Next.js can easily be run on N99panel . Before setting up your Next.js App, please ensure that you have gone through the FAQ article : https://n99panel.com/ufaq/does-n99panel-support-nodejs/

Now coming to Next.js, here we would provide by an example of how to set it up. As Next.js requires NodeJS version 18 or above on the command line, kindly follow this article to set your command line NodeJS version to 18 : https://n99panel.com/ufaq/how-to-add-a-default-node-and-npm-command-in-cli-or-ssh/ . Importantly, when you link the App from within N99panel’s console, please use ‘/’ as the value for ‘App Web Path’ . If you plan to run it on sub-url like /app1 , please design your App accordingly.

The example which we are going to follow in this case is mentioned at https://nextjs.org/learn-pages-router/basics/create-nextjs-app/setup . To properly deploy this Next.js app, we need to take these steps.

Step 1 – SSH as the user under whose VHost/Website the Next.js app is to be set. Here we assume the username to be user1

Step 2 – Change directory to node_apps using the command

cd node_apps

Step 3 – Install the App using the command

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

The above command will install the app under the folder nextjs-blog

Now change the directory to nextjs-blog folder

cd nextjs-blog

Now initially we need to run the App under N99panel’s NodeJS’s Development mode at a port number as specified while linking the App from under N99panel. Here this author assume’s that the port number is 50011 . And later we plan to run this App in N99panel’s NodeJS’s Production mode at port number 40011. Therefore we need to appropriately adjust its package.json as under


{
"private": true,
"scripts": {
"build": "next build",
"dev": "next dev -p 50011",
"start": "next start -p 40011"
},
"dependencies": {
"next": "latest",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"engines": {
"node": ">=18"
}
}


Now we just need to start the App using the command


npm run dev


Now from within N99panel console, link a Node App in development mode using the following values for the concerned fields

App Web Path : /
App Port : 50011
App Mode : Development

If you have properly linked your App from within N99panel’s console, you should be able to see a working App on your App URL which in this case is just /

If the App does not work at this stage, you need to resolve the issues pertaining to it before moving to the next step i.e. running the App in production mode.

Step 4 – If your app is running as mentioned above, you need to stop it in your SSH console use Ctrl+c . And also remove it from within N99panel’s console.

Step 5 – To prepare the App for production mode, you need to prepare it using


npm run build


Step 6 – Now from within N99panel console, link a Node App in Production more using the following values for the concerned fields

App Web Path : /
App Port : 40011
App Mode : Production (npm start)
Prod. filesystem Path : nextjs-blog
Prod. Node Version : 18

Now save it and wait for at-least one min to check via browser whether your App has come online or not.

Conclusion : Here we have seen that it is not that complicated to setup your Next.js App from within N99panel. For any questions/queries, please feel free to reach us at 91-9872263977