{"id":32034,"date":"2024-09-22T21:53:39","date_gmt":"2024-09-22T16:23:39","guid":{"rendered":"https:\/\/codeforgeek.com\/?p=32034"},"modified":"2024-09-22T21:53:40","modified_gmt":"2024-09-22T16:23:40","slug":"nextjs-cli","status":"publish","type":"post","link":"https:\/\/codeforgeek.com\/nextjs-cli\/","title":{"rendered":"Next.js CLI: Commands You Must Know"},"content":{"rendered":"\n

Next.js provides a command line interface using which we can save our time spent in building and configuring a Next.js app. These include commands to start a local development server, change the default port, run ESLint, generate static HTML files and much more. Let’s start exploring these commands to increase our productivity!<\/p>\n\n\n\n

Ready to deploy your Next.js app to Vercel? Click here for a quick guide.<\/a><\/p>\n\n\n\n

Getting Started with Next.js CLI<\/h2>\n\n\n\n

To test Next.js CLI commands we first need a demo Next.js app. Let’s create one in a few easy steps.<\/p>\n\n\n\n

Step 1:<\/strong> Make sure that Node.js version 18.17 <\/strong>or higher is installed on your system<\/p>\n\n\n\n

\"Checking<\/figure>\n\n\n\n

Step 2: <\/strong>Open the terminal and run the below command to initialize a new Next.js app:<\/p>\n\n\n

\nnpx create-next-app@latest\n<\/pre><\/div>\n\n\n
Choose any project name you want – all in lowercase<\/strong>, use hyphens (\u2013) for space<\/strong>, and no whitespace<\/strong>.<\/p>\n\n\n\n
For the other parameters let’s go with the default option for now. Just check “Yes” for both TypeScript and App Router to follow along with us.<\/p>\n\n\n\n
\"Initialize<\/figure>\n\n\n\n
Once the project is set up, you will get the project path:<\/p>\n\n\n\n
\"Copy<\/figure>\n\n\n\n
Step 3:<\/strong> Copy the project path and navigate to it:<\/p>\n\n\n\n
\"Navigate<\/figure>\n\n\n\n
Step 4:<\/strong> Once the project is set up, open it inside a code editor and remove all the files inside the app<\/strong> directory and create a page.tsx<\/strong> file with the following code:<\/p>\n\n\n
\nconst Main = () => {\n    return <h1>Hello World!<\/h1>;\n};\n\nexport default Main;\n<\/pre><\/div>\n\n\n
Step 5:<\/strong> Now execute the below command to test the application:<\/p>\n\n\n
\nnpm run dev\n<\/pre><\/div>\n\n\n
\"Test<\/figure>\n\n\n\n
Here we are running the development server which listens on “http:\/\/localhost:3000”:<\/p>\n\n\n\n
\"Next.js<\/figure>\n\n\n\n
\n
The “create-next-app” we used above is also a Next.js CLI tool that is used to initiate a new Next.js application with a default template (which we did) or from the Next.js GitHub repository.<\/p>\n<\/blockquote>\n\n\n\n
How to Execute Next.js CLI Commands<\/h2>\n\n\n\n
If you directly try to execute these Next.js CLI commands, like let’s run “next dev”, you will see the system says it is not found:<\/p>\n\n\n\n
\"next<\/figure>\n\n\n\n
This is because when we install Next.js, it is installed for that particular project inside the node_modules folder. This makes the next commands accessible within that project but not globally.<\/p>\n\n\n\n
So either you install Next.js globally using the command “npm install -g next” or using the NPX.<\/p>\n\n\n\n
Installing Next.js globally:<\/strong><\/p>\n\n\n\n
\"Installing<\/figure>\n\n\n\n
Now run “next dev” again:<\/strong><\/p>\n\n\n\n
\"<\/figure>\n\n\n\n
See, it works.<\/p>\n\n\n\n
Using NPX:<\/strong><\/p>\n\n\n\n
NPX comes with npm version 5.2.0+ which lets us execute binaries from the node_modules\/.bin directory. <\/p>\n\n\n\n
So it means if we run the command “npx next dev”, NPX search the local node_modules\/.bin directory for the next binary and executes it. So eventually we don’t have to install Next.js globally.<\/p>\n\n\n\n
\"Using<\/figure>\n\n\n\n
The choice is yours but for this tutorial, we will use NPX as it comes with npm and is available on most computers.<\/p>\n\n\n\n
Next CLI Commands <\/h2>\n\n\n\n
Let’s demonstrate the highly used Next.js CLI commands.<\/p>\n\n\n\n
1. next dev<\/h3>\n\n\n\n
This is the most common command and we have also used this to start a development server. It works like “nodemon” and updates the server as soon as we change anything in the code.<\/p>\n\n\n\n
\"next<\/figure>\n\n\n\n
\n
For each Next.js CLI command, we can use the “-h or –help” option to list all the available options and flags we can use with that command.<\/p>\n\n\n\n
\"--help<\/figure>\n<\/blockquote>\n\n\n\n
One interesting option among them is the “-p or –port <port>”, which can be used to change the default port from 3000 to whatever we want.<\/p>\n\n\n\n
\"--port<\/figure>\n\n\n\n
Note: <\/strong>The -p option can also be used with “next start”.<\/p>\n\n\n\n
2. next build<\/h3>\n\n\n\n
This command is used when our Next.js app is completed and ready to be deployed. It generates a production build or we can say an optimized version of the application in the .next folder.\u00a0<\/p>\n\n\n\n
\"next<\/figure>\n\n\n\n
3. next start<\/h3>\n\n\n\n
After building the application for production, we can use this command to run the optimized application. It starts a Node.js server that serves the production build.<\/p>\n\n\n\n
\"next<\/figure>\n\n\n\n
4. next export<\/h3>\n\n\n\n
This command exports the Next.js app as a static site, but this has been removed in favour of “output”: “export” in Next.js v14.0.0.<\/p>\n\n\n\n
Now to export static assets, you need to modify the output mode to “export” in the ‘next.config.js’ or ‘next.config.mjs’ file located in your project directory:<\/p>\n\n\n\n
\"Changing<\/figure>\n\n\n\n
Then run the ‘next build’ command to generate an ‘out’ folder containing HTML, CSS, and JS assets from your Next.js app.<\/p>\n\n\n\n
\"next<\/figure>\n\n\n\n
For more information on this:<\/strong> Export Static HTML Files from Next.js Ap<\/a>p<\/p>\n\n\n\n
5. next info<\/h3>\n\n\n\n
This command returns different details about our system like operating system, package versions, etc which is used when asking for help from the community.<\/p>\n\n\n\n
\"next<\/figure>\n\n\n\n
6. next lint<\/h3>\n\n\n\n
This command runs ESLint, a tool to identify and fix errors in JavaScript code.<\/p>\n\n\n\n
\"next<\/figure>\n\n\n\n
We can also change the configuration for ESLint inside the file eslintrc.json.<\/p>\n\n\n\n
7. next telemetry<\/h3>\n\n\n\n
Next.js fetches telemetry data for the improvement of the framework. <\/p>\n\n\n\n
\"next<\/figure>\n\n\n\n
We can enable or disable this using “next telemetry” command like this:<\/p>\n\n\n\n
\"next<\/figure>\n\n\n\n
\"next<\/figure>\n\n\n\n
Summary<\/h2>\n\n\n\n
In this guide, we have seen many useful Next.js CLI commands that can boost our productivity to the next level.<\/p>\n\n\n\n
Let’s summarise them:<\/p>\n\n\n\n