A focused .gitignore builder for React and Next.js repositories. Instead of copy-pasting from an old project, tick the sections your app actually uses — dependencies, the .next build output, environment files, logs and editor cruft — and the tool assembles a clean, labelled .gitignore you can copy or download.
Why a React / Next.js project needs its own .gitignore
A generic .gitignore template misses several Next.js-specific artefacts and can leave secrets or giant build directories in version control. The most common problem new teams hit is accidentally committing node_modules/ (hundreds of megabytes), the /.next/ build cache, or .env.local files containing API keys. Each of those mistakes requires a git history rewrite to fully fix, so getting the .gitignore right from the start matters.
How it works
Each toggle maps to a curated block of ignore patterns. When you enable a section, its lines are concatenated under a # Header comment so the final file stays readable. The blocks cover the things Git should never track in a React or Next.js project: the node_modules/ dependency tree, the /.next/ and /out/ build directories, .env.local and its variants, debug logs, coverage reports, and OS files like .DS_Store. Selecting nothing leaves the output empty; selecting several merges them in order.
What gets ignored and why
| Section | Key patterns | Reason |
|---|---|---|
| Dependencies | node_modules/, Yarn PnP | Regenerated on install; can be hundreds of MB |
| Next.js output | /.next/, /out/, next-env.d.ts, .vercel | Regenerated on every build; platform-specific |
| Environment files | .env.local, .env.*.local | Contain secrets; each developer has their own |
| Debug logs | npm-debug.log*, yarn-debug.log* | Build noise; not meaningful to teammates |
| Coverage | /coverage/ | Test artefacts; regenerate with npm test |
| OS files | .DS_Store, Thumbs.db | Machine-specific; not part of the project |
| Editor | .vscode/, .idea/ | Varies per developer (optionally commit shared settings) |
Worked example: a common mistake and how this fixes it
For example, imagine you start a Next.js project, run npm install, and then git add . before creating a .gitignore. Git stages all of node_modules/ — thousands of files. Running git commit bakes them into history. Later teammates waste minutes cloning a bloated repository and then have to run git filter-repo to excise those files.
With this tool you generate the .gitignore before your first git add so the problem never arises.
Tips
- Place the generated file at the root of your repository — Git applies the patterns to every subdirectory automatically.
- If a file is already tracked, run
git rm --cached <file>and commit so the new ignore rule takes effect; just adding the pattern to.gitignoreis not enough for files Git already knows about. - Keep a committed
.env.example(not ignored) listing every variable name without values, so teammates know what your app needs. - Use
.vscode/settings.jsonin.gitignorebut commit.vscode/extensions.jsonif you want to recommend extensions to the team — you can be selective rather than ignoring the whole.vscode/folder.