Differences

This shows you the differences between two versions of the page.

--- nodejs:nextjs-example [2024/04/06 02:49] – created kirtisingh
+++ nodejs:nextjs-example [2024/04/06 03:06] (current) – kirtisingh
@@ Line 1: / Line 1: @@
 ===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