How to deploy a next.js app to Cyberpanel

General
1

I am trying to deploy a full next js app in Cyberpanel

So i am trying to deploy a next js app to CyberPanel, and after following the only documentation they have on this (How to host nextjs app on cyberpanel - #2 by josephgodwinke - General Discussion - CyberPanel Community) it did not work, the webiste is still showing me the 404 page, while I’m running the app (using pm2). The only thing i didnt do is that a ran it on the default port (3000).

2

1. Install Node.js and npm:

  • Ensure Node.js and npm are installed on your CyberPanel server. You can use the following commands to check and install them if necessary:

Bash

node -v
npm -v
sudo apt install nodejs npm

2. Create a CyberPanel Website:

  • Log in to your CyberPanel dashboard.
  • Go to Websites > Add Website.
  • Enter the domain name, document root (e.g., /home/youruser/public_html/nextjs-app), and other required information.
  • Click Create.

3. Deploy Next.js App:

  • Clone or upload your Next.js app’s code to the document root you specified in step 2.
  • Run the following commands to install dependencies and build the app:

Bash

cd /home/youruser/public_html/nextjs-app
npm install
npm run build

4. Configure Nginx:

  • Edit the Nginx configuration file for your website. You can find it in /etc/nginx/sites-enabled/your_domain.conf.
  • Add the following location block:

Nginx

location / {
    try_files $uri $uri/ /index.html;
    proxy_pass http://127.0.0.1:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;    1.  pythonlinux.com pythonlinux.com
}

  • Replace 3000 with the actual port your Next.js app is running on if it’s different.

  • Save the file and restart Nginx:
    Bash

sudo systemctl restart nginx

5. Run Next.js App with pm2:

  • Install pm2 globally:

Bash

npm install -g pm2

Run your Next.js app with pm2:

Bash

cd /home/youruser/public_html/nextjs-app
pm2 start npm -- start

6. Test Your Website:

  • Access your website in a web browser. You should now see your Next.js app running successfully.

Additional Tips:

  • If you’re using a custom port for your Next.js app, make sure to update the proxy_pass directive in the Nginx configuration accordingly.
  • For production environments, consider using a dedicated domain name for your Next.js app and configuring SSL/TLS certificates.
  • If you encounter any issues, check the Nginx error logs and the pm2 logs for clues.

By following these steps, you should be able to successfully deploy your Next.js app in CyberPanel.