A utility for automatically generating files that follow the Next.js App Router structure based on folder name patterns.

next-file-gen A utility for automatically generating files that follow the Next.js App Router structure based on folder name patterns. Installation # Using npm npm install --save-dev @next-file-gen/core # Using yarn yarn add --dev @next-file-gen/core Usage Running the tool From your project root directory, run: npx @next-file-gen/core You can also add it as a script in your package.json: { "scripts": { "dev:watch": "next-file-gen" } } Then run it with npm run dev:watch. Folder Naming Patterns Create folders with the following naming patterns to automatically generate template files: [name].default: Creates all default files (page.tsx, layout.tsx, loading.tsx, error.tsx) # Example: Creating a folder named settings.default # Result: Creates all default files in the settings folder [name].page: For page components (generates page.tsx file) # Example: Creating a folder named blog.page # Result: Creates blog/page.tsx file [name].layout: For layout components (generates layout.tsx file) # Example: Creating a folder named dashboard.layout # Result: Creates dashboard/layout.tsx file [name].error: For error components (generates error.tsx file) # Example: Creating a folder named profile.error # Result: Creates profile/error.tsx file [name].loading: For loading components (generates loading.tsx file) # Example: Creating a folder named products.loading # Result: Creates products/loading.tsx file Note: You can also use : instead of . as a separator (e.g., blog:page). Configuration A next-file-gen.config.json file is automatically created in your project root. You can modify this file to change the following settings: { "watchDir": "/app", "ignorePatterns": ["/node_modules/", "/.git/", "/dist/", "/build/"] } watchDir: The directory to watch for changes ignorePatterns: Patterns to exclude from watching Notes Folders without specific patterns will be kept as is without any files being generated The tool watches the app directory by default. Edit the config file to watch a different directory Existing files will not be overwritten Files are generated with clean, minimal boilerplate code

Mar 8, 2025 - 10:01

# Using npm
npm install --save-dev @next-file-gen/core

# Using yarn
yarn add --dev @next-file-gen/core

From your project root directory, run:

npx @next-file-gen/core

You can also add it as a script in your package.json:

{
  "scripts": {
    "dev:watch": "next-file-gen"
  }
}

Then run it with npm run dev:watch.

Create folders with the following naming patterns to automatically generate template files:

[name].default: Creates all default files (page.tsx, layout.tsx, loading.tsx, error.tsx)

   # Example: Creating a folder named settings.default
   # Result: Creates all default files in the settings folder

   # Example: Creating a folder named blog.page
   # Result: Creates blog/page.tsx file

   # Example: Creating a folder named dashboard.layout
   # Result: Creates dashboard/layout.tsx file

   # Example: Creating a folder named profile.error
   # Result: Creates profile/error.tsx file

   # Example: Creating a folder named products.loading
   # Result: Creates products/loading.tsx file

Note: You can also use : instead of . as a separator (e.g., blog:page).

A next-file-gen.config.json file is automatically created in your project root. You can modify this file to change the following settings:

{
  "watchDir": "/app",
  "ignorePatterns": ["**/node_modules/**", "**/.git/**", "**/dist/**", "**/build/**"]
}

Folders without specific patterns will be kept as is without any files being generated
The tool watches the app directory by default. Edit the config file to watch a different directory
Existing files will not be overwritten
Files are generated with clean, minimal boilerplate code