Powerful command-line interface tool designed to accelerate the development of Next.js applications by automating the generation of common file types, such as pages, layouts, templates, errors, middlewares and more.

Built with ease of use in mind, it streamlines the setup of new routes and components, allowing developers to focus on building their applications faster.

🚀 For Visual Studio Code: Try the Next.js File Generator extension!

Table of contents

• Installation 🔋
• Commands 💻
• Usage 📋
• Developer Support 🔗
• Contributing 🦾
• Support my work ❤️

Installation

To use Next JS CLI, you need to have Node.js installed on your system. Once Node.js is installed, you can install next-cli globally using npm:

npm install -g next-cli-turbo

Or if you prefer using Yarn:

yarn global add next-cli-turbo

Commands

init

• ⌛️ nc g i <projectName>

The init command is used to create a new Next.js application. It requires a single argument:

• <projectName>: Name of the project to create.

Example usage:

nc init my-next-app
nc i my-next-app

generate all

• 🧪 nc generate [path] --all
• ⌛️ nc g [path] -a

The generate all command has been augmented to automatically create a set of predefined files (page, loading, error, not-found) for a new route. This is useful for quickly scaffolding the basic structure of a route within a Next.js application.

Requires the following arguments:

• [path]: The path where the files will be created.
• --option - anything from the list:
  • -a, --all: Generate page.tsx, error.tsx, loading.tsx, not-found.tsx files.
  • -n, --name: Special name for the files page.tsx, loading.tsx.
    • Default names: Page, Loding.

Example usage:

nc generate --all users
nc g -a users

Result:

-app
--users
---page.tsx
---error.tsx
---not-found.tsx
---loading.tsx

generate

• ⌛️ nc g [path] --option

This command has been extended to support the generation of specific files within a Next.js application. Users can specify which files they want to generate using options.

The generate it requires the following arguments:

nc generate [path] --option --option

• [path]: The path where the files will be created.

• --option - anything from the list:

  • -a, --all: Generate page.tsx, error.tsx, loading.tsx, not-found.tsx files.
  • -n, --name: Special name for the files page.tsx, loading.tsx,layout.tsx and template.tsx files.
  • -p,---page: Generate a page.tsx file.
  • -l,--layout: Generate a layout.tsx file.
  • -t,--template: Generate a template.tsx file.
  • -load,--loading: Generate a loading.tsx file.
  • -err,--error: Generate an error.tsx file.
  • -not,--not-found: Generate a not-found.tsx file.
  • -d,--default-file: Generate a default.tsx file.
  • -r,--route: Generate a route.tsx file.
  • -g,--globalError: Generate a global-error.tsx file in the root directory.
  • -m,--middleware: Generate a middleware.tsx file.

Example usage:

1. Generate page, layout and loading files.

nc generate dashboard --page --layout --loading
nc g dashboard -p -l -load

Result:

-app
--dashboard
---page.tsx
---layout.tsx
---loading.tsx

2. Generate page.tsx, error.tsx, not-found.tsx files

nc generate dashboard --page --error --not-found
nc g dashboard dashboard -p -err -not

Result:

-app
--dashboard
---error.tsx
---not-found.tsx

• If any file of the options above already exists the command to creat new one will be skiped.

Usage

Page.tsx file

• 🧪 nc generate [path] --page
• ⌛️ nc g [path] -p

This command simplifies the creation of individual pages within a Next.js application by specifying the path of the page and, optionally, the name where it should be created.

• [path]: The path where the files will be created.
• --option - anything from the list:
  • -p, --page: Generate page.tsx file.
  • -n, --name: Special name for function in the file page.tsx,
    • Default name: Page.

Example usage:

nc generate users --page
nc g users -p

Result:

-app
--users
---page.tsx

Layout.tsx file

• 🧪 nc generate [path] --layout
• ⌛️ nc g [path] -l

This command is tailored for creating layout components, which serve as templates for various parts of a Next.js application, ensuring consistency across different pages. By specifying the name of the layout and, optionally, the path, developers can quickly scaffold necessary layout components.

• [path]: The path where the files will be created.
• --option
  • -l, --layout: Generate layout.tsx file.
  • -n, --name: Special name for function in the file layout.tsx,
    • Default name: Layout.

Example usage:

nc generate users --layout -n Users
nc g users -l -n Users

Result:

-app
--users
---layout.tsx // name of the function in layout.tsx file - UsersLayout

Loading.tsx file

• 🧪 nc generate [path] --loading
• ⌛️ nc g [path] -load

This command is tailored for creating loading components.

• [path]: The path where the files will be created.
• --option
  • -load, --loading: Generate loading.tsx file.
  • -n, --name: Special name for function in the file loading.tsx,
    • Default name: Loading.

Example usage:

nc generate users --loading -n Users
nc g users -load -n Users

Result:

-app
--users
---loading.tsx // name of the function in loading.tsx file - UsersLoading

Error.tsx

• 🧪 nc generate [path] --error
• ⌛️ nc g [path] -err

Create error.tsx file.

• [path]: The path where the files will be created.
• --option
  • -err, --error: Generate error.tsx file.
    • Default name: Error.

Example usage:

nc generate users --error
nc g users -err

Result:

-app
--users
---error.tsx

Template.tsx

• 🧪 nc generate [path] --template
• ⌛️ nc g [path] -t

Create template.tsx file.

• [path]: The path where the files will be created.
• --option
  • -t, --template: Generate template.tsx file.
    • Default name: Template.

Example usage:

nc generate users --template
nc g users -t

Result:

-app
--users
---error.tsx

Default.tsx file

• 🧪 nc generate [page] --default-file
• ⌛️ nc g [page] -d

Generate default.tsx file.

• [path]: The path where the files will be created.
• --option
  • -d, --default-file: Generate default.tsx file.

Example usage:

nc generate users --default-file
nc g users -d

Result:

-app
--users
---default.tsx

Not-found.tsx file

• 🧪 nc generate [page] --not-found
• ⌛️ nc g [page] -not

Generate not-found.tsx file.

• [path]: The path where the files will be created.
• --option
  • -not, --not-found: Generate not-found.tsx file.

Example usage:

nc generate users --not-found
nc g users -not

Result:

-app
--users
---not-found.tsx

Route.tsx file

• 🧪 nc generate [page] --route
• ⌛️ nc g [page] -r

Generate route.tsx file.

• [path]: The path where the files will be created.
• --option
  • -r, --route: Generate route.tsx file in api folder.

Example usage:

nc generate users --route
nc g users -r

Result:

-app
-- api
---users
----route.tsx

Global-error.tsx file

• 🧪 nc generate root --global-error
• ⌛️ nc g r -g

Generate global-error.tsx file in the root of the project.

Example usage:

nc generate root --global-error
nc g r -g

Result

-app
--global.tsx

Middleware.tsx file

• 🧪 nc generate root --middleware
• ⌛️ nc g r -m

Generate middleware.tsx file.

Example usage:

nc generate root --middleware
nc g r -m

Result

-app
--midleware.tsx

Developer Support:

• If you saw some issue/bug 🐛 related to the specific release version.
• If you want some new feature or change to be added/implemented. 😊

Please, contact the creator of the Next CLI, so he will be able to fix or improve it:

Kristiyan Velkov

Take a look my blog in Medium: Kristiyan Velkov

Support my work

If you like my work and want to support me to work hard, please donate via:

| Revolut | Buy me a coffee | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | |

Thanks a bunch for supporting me! It means a LOT 😍

Contributing

Contributions are welcome! ❤️

If you have suggestions for improving next CLI, please open an issue and submit a pull request.