nodejs:nextjs-example [N99panel Documentation]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
===How to run Next.js on N99panel===

Here we would provide by an example of how to setup a Next.js app. As Next.js requires NodeJS version 18 or above on the command line, kindly follow the article, [[:nodejs:cli-version|How to change the default version of node or NodeJS CLI for a user]], to set your command line NodeJS version to 18. 

**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

<code>
cd node_apps
</code>

**Step 3 :** Install the App using the command

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

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

Now change the directory to nextjs-blog folder

<code>
cd nextjs-blog
</code>

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

<code>
{
  "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"
  }
}
</code>

Now we just need to start the App using the command

<code>
npm run dev
</code>

Now from within N99panel console, link a Node App in [[:nodejs:development-mode|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 unlink/remove it from within N99panel’s console.

**Step 5 :** To prepare the App for [[:nodejs:production-mode|production mode]], you need to prepare it using

<code>
npm run build
</code>

**Step 6 :** Now from within N99panel console, link a Node App in [[:nodejs:production-mode|production mode]] 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