how to deploy nextJs app in cpanel

[abdullah565]

Hi all!
I'm trying to deploy my nextJs app in Cpanel, but I ended up with posting my problem here. Please help me in this regard any help will be appreciated.

• I've installed node v-10.16.0
• My project folder is also successfully uploaded and it also contains .next folder in the result of running the command " npm run build "
• It's working correctly on localhost but on real server it's not.
• when I open it on my domain it doesn't render the pages as next app does, but it returns the code.
  screenshot

this is my package.json file:
{ "name": "react-nextjs", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next", "build": "next build", "start": "next start", "export": "next export" }, "author": "", "license": "ISC", "dependencies": { "next": "^9.3.5", "react": "^16.13.1", "react-dom": "^16.13.1" } }

[okozolin]

I'm facing a similar problem. How do deploy the NextJs app to shared hosting with cPanel. The instructions indicate to define a Node app and define a strtup file like 'app.js'. The problem is that a build of NextJs does not have any startup file ! Hoe to worlaround this ?

[okozolin]

That is true, only if your type of application is completely static (without any server side render), then 'next export' is an excellent solution and you don't need a Node server to run it , ergo, will work fine on any hosting server. For all other cases, you would have to use the regular 'next build' which eventually, does involve Node. You can read more about it here https://nextjs.org/docs/advanced-features/static-html-export#caveats

[abdullah565]

great knowledge.
Thank you for sharing.

Now I'm going to close the issue.

[QasimRRizvi]

But there's an issue when I export my NextJS app and copy all the content from the out folder to the public_html directory.

On local machine when I put wrong path it takes me to 404 page but after export when I put wrong path it showing me home page but with wrong url in addressbar, i.e no 404 page is showing after deploying on cpanel using export.

Any solution for this?

[Ehab97]

@okozolin hey,can you tell me how to use the sever.js file and where to put it ,because next export not working and gave me many problem ,not that the peoblem only in c panel not in a host like netlify or vercel etc ..

[rashid-shahriar]

having similar issue

[mcasters]

Hello,
I have same problem. Vercel seems to be a solution but not with a custom server, which is my case...
I can build and start on local, but when on server, I get errors when I build (next build) :

info - Creating an optimized production build .events.js:174
throw er; // Unhandled 'error' event

I thought it was because of env variables (reported in cpanel interface), so I create an .env.local file like on my localhost, but it still doesn't work.
I also tried to build on local to copy the next build folder on server (and package.json to install dependencies), but no success.
(conf : npm6.14.6, node10.22.0, next9.5.2)

Any help would be so great..! :)

[okozolin]

@mcasters its a bit hard to understand what is the problem without seeing your package.json and the server startup file (server.js/app.js.index.js)
'Unhandled error' could be anything not specifically related to custom server

[tiavina-mika]

@mcasters @okozolin I've got the same problem (throw er: // Unhandled 'error' event).

here is my server.js
`
/** ----------------------------------------------------- /
/* ------------------- Custom Server ------------------- /
/* ----------------------------------------------------- */

const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';

const port = parseInt(process.env.PORT, 10) || 3000;

// Create the Express-Next App
const app = next({ dev });
const handle = app.getRequestHandler();

app
.prepare()
.then(() => {
const server = createServer((req, res) => {
const parsedUrl = parse(req.url, true);
handle(req, res, parsedUrl);
});

if (dev) {
  server.listen(port, (err) => {
    if (err) throw err;
    /* eslint-disable no-console */
    console.log(
      `> Server listening at http://localhost:${port} as ${
        dev ? 'development' : process.env.NODE_ENV
      }`,
    );
  });
} else {
  server.listen();
}

});
`

and my script:
"scripts": { "prod": "cross-env NODE_ENV=production node server.js", },

the error message:

[mcasters]

@okozolin, I've tried the simple example of next : [https://github.com/vercel/next.js/tree/master/examples/custom-server-express] and I get the same problem :

`info - Creating an optimized production build
info - Compiled successfully

Build error occurred
TypeError: child.send is not a function
at ChildProcessWorker.initialize (/home/cama7387/nodevenv/public_html/custom-server-express/10/lib/node_modules/jest-worker/build/workers/ChildProcessWorker.js:181:11)
at new ChildProcessWorker (/home/cama7387/nodevenv/public_html/custom-server-express/10/lib/node_modules/jest-worker/build/workers/ChildProcessWorker.js:127:10)
at WorkerPool.createWorker (/home/cama7387/nodevenv/public_html/custom-server-express/10/lib/node_modules/jest-worker/build/WorkerPool.js:44:12)
at new BaseWorkerPool (/home/cama7387/nodevenv/public_html/custom-server-express/10/lib/node_modules/jest-worker/build/base/BaseWorkerPool.js:82:27)
at new WorkerPool (/home/cama7387/nodevenv/public_html/custom-server-express/10/lib/node_modules/jest-worker/build/WorkerPool.js:30:1)
at new JestWorker (/home/cama7387/nodevenv/public_html/custom-server-express/10/lib/node_modules/jest-worker/build/index.js:131:26)
at build (/home/cama7387/nodevenv/public_html/custom-server-express/10/lib/node_modules/next/dist/build/index.js:15:2163)
info - Collecting page data .npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: next build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/cama7387/.npm/_logs/2020-08-24T12_35_01_239Z-debug.log`

The complete log :
0 info it worked if it ends with ok 1 verbose cli [ '/opt/alt/alt-nodejs10/root/usr/bin/node', 1 verbose cli '/opt/alt/alt-nodejs10/root/usr/bin/npm', 1 verbose cli 'run', 1 verbose cli 'build' ] 2 info using [email protected] 3 info using [email protected] 4 verbose run-script [ 'prebuild', 'build', 'postbuild' ] 5 info lifecycle [email protected]~prebuild: [email protected] 6 info lifecycle [email protected]~build: [email protected] 7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true 8 verbose lifecycle [email protected]~build: PATH: /opt/alt/alt-nodejs10/root/usr/lib/node_modules/npm/node_modules.bundled/npm-lifecycle/node-gyp-bin:/home/cama7387/publ$ 9 verbose lifecycle [email protected]~build: CWD: /home/cama7387/public_html/custom-server-express 10 silly lifecycle [email protected]~build: Args: [ '-c', 'next build' ] 11 silly lifecycle [email protected]~build: Returned: code: 1 signal: null 12 info lifecycle [email protected]~build: Failed to exec build script 13 verbose stack Error: [email protected] build: next build13 verbose stack Exit status 1 13 verbose stack at EventEmitter.<anonymous> (/opt/alt/alt-nodejs10/root/usr/lib/node_modules/npm/node_modules.bundled/npm-lifecycle/index.js:332:16) 13 verbose stack at EventEmitter.emit (events.js:198:13) 13 verbose stack at ChildProcess.<anonymous> (/opt/alt/alt-nodejs10/root/usr/lib/node_modules/npm/node_modules.bundled/npm-lifecycle/lib/spawn.js:55:14) 13 verbose stack at ChildProcess.emit (events.js:198:13) 13 verbose stack at maybeClose (internal/child_process.js:982:16) 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5) 14 verbose pkgid [email protected] 15 verbose cwd /home/cama7387/public_html/custom-server-express 16 verbose Linux 4.18.0-147.8.1.el7h.lve.x86_64 17 verbose argv "/opt/alt/alt-nodejs10/root/usr/bin/node" "/opt/alt/alt-nodejs10/root/usr/bin/npm" "run" "build" 18 verbose node v10.22.0 19 verbose npm v6.14.6 20 error code ELIFECYCLE 21 error errno 1 22 error [email protected] build:next build 22 error Exit status 1 23 error Failed at the [email protected] build script. 23 error This is probably not a problem with npm. There is likely additional logging output above. 24 verbose exit [ 1, true ]

I am on a shared hosting, could it be because of virtual env ? In the project directory (public_html) the node_modules created is a link to a nodevenv directory. It seems that next does build but at the end maybe it fails because next can't manage node_modules directory's link ?

(Thank you so much for your reply !;)

[okozolin]

@mcasters Are you trying to make the build on the shared hosting server ? If so, it is known to be problematic virtual memory wise, and sometimes the builds fail.
What you can try to do, is make the Nextjs build locally, and then just copy the '.next' directory to your projects root directory on the shared hosting server (that's what i usually do, and it works just fine)

[mcasters]

It is working, thank you ! 😊

[sleez007]

Please i need help! i am currently faced with this challenge
Can someone show their package.json and server.json file @mcasters @okozolin . Thanks in advance

[ishu202]

sure
here is my package .json
{ "name": "nextjs", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start -p 80" }, "dependencies": { "next": "10.0.5", "react": "17.0.1", "react-dom": "17.0.1" } }

[sleez007]

Thank you @ishu202

[ishu202]

also deploying with vercel is very easy.
it requires 4 steps.

1. create free vercel account and connect your repo to it.
2. and in the domains you can add your domain or subdomain.
3. for domain you would change your nameservers to vercels nameservers.
4. for subdomain just add a CNAME record to the existing hosting where the domain is hosted. you will get what cname to add when you add the domain or subdomain.
   for me it took about 5 mins and another 15min for CNAME to be effective.

[okozolin]

See server.js file above

[Mipo8159]

hello I'm having a strange issue. with React it was pretty simple to deploy the app on shared hosting, but with next.js it became problematic. i get the forbidden error when I put my .next file in server directory. I've been using this server for over a year now. . . Has anyone found a working method to deploy nexj.js build(.next) on a custom server?

[mcasters]

Actually, if you don't use git, you put into public_html folder all your project directory except node_modules folder :

public_html

my_project

.next
src
server.js
package.json
...

Then when you create your node application ("setup node.js app"), you set up the options, including "Application root" (public_html/my_project), "Application startup file" (server.js)... Then "Run NPM install" to create node_modules package. And finally "Start App".
Normally, you don't need to take care about .htaccess, it is created automatically when you start the app.
Maybe there is a better way to do it, but I haven't found it. This way is working for me.

[mingeee]

@mcasters Thanks! I will give it a go now. ^.^

[okozolin]

I'm working with shared hosting via cPanel, and after creating the project folder and Node application (https://www.a2hosting.com/kb/cpanel/cpanel-software/create-application-with-nodejs-selector), all i do are the following steps to make the Next app run:

1. copy package.json
2. copy server.js (may be you named it as app.js or index.js, as long as you are consistent with what is defined in the Node setup. I use the server.js and the 'app.js' is not used, I will delete it)
3. copy .next folder
4. run 'npm install' either from the Node application page or from SSH.

• All files/folder are copied to the project's root directory , NOT 'public_html' or 'public' (no need for that)
• Make sure you do not have unnecessary code in you server.js file (see code example above)

here is how my project's folder look like:

[mingeee]

Thank you so much all! It works. ❤️

[aaqib-innov8]

I have some issues with the above issues. Can someone guide me on this?

[tiavina-mika]

Hello,
I got this error when runing my custom server in a cpanel :
throw er: // Unhandled 'error' event

here is my server.js
`
/** ----------------------------------------------------- /
/* ------------------- Custom Server ------------------- /
/* ----------------------------------------------------- */

const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';

const port = parseInt(process.env.PORT, 10) || 3000;

// Create the Express-Next App
const app = next({ dev });
const handle = app.getRequestHandler();

app
.prepare()
.then(() => {
const server = createServer((req, res) => {
const parsedUrl = parse(req.url, true);
handle(req, res, parsedUrl);
});

if (dev) {
  server.listen(port, (err) => {
    if (err) throw err;
    /* eslint-disable no-console */
    console.log(
      `> Server listening at http://localhost:${port} as ${
        dev ? 'development' : process.env.NODE_ENV
      }`,
    );
  });
} else {
  server.listen();
}

});
`

and my script:
"scripts": { "prod": "cross-env NODE_ENV=production node server.js", },

the error message:

[suaterkilic]

Hello,

I created Next Js project. And i have VDS server. I want to deploy it to CPanel. How can i do this? I dont want static HTML. Node js installed on my server. I need y'all help. Thank you

[mcasters]

Hi,
Even if it is not a static html, you have to use this public_html.
What I describe above is for a non-static site.

[suaterkilic]

I could not fully understand what you explained above. I've been working on this problem for two days but haven't found any solution. I need a roadmap :(

[suaterkilic]

Hi again Error: Cannot find module 'next' i took this error

[mcasters]

@suaterkilic : Is next into le the node_modules folder ?

[mcasters]

Road map for deploying on cPanel Next App with server side rendering (not only static) :

1. Build locally (next build)
2. Copy into html_folder all your project directory (not only the build folder, and except node_modules of course) :

public_html
    my_project
        .next
        src
        server.js
        package.json
        ...

Note : A custom server is needed as cPanel needs a startup file (use the next's default one)

3. create your node application ("setup node.js app") with options :
   Application root : public_html/my_project
   Application startup file : server.js
   ...
4. "Run NPM install" to create node_modules packages
5. Finally "Start App"

package.json with the start command :

"scripts": {
    "start": "cross-env NODE_ENV=production node server.js"
}

[arashesnaashari]

Hello everyone
Can this method meet the needs of nextjs default SSG, SSR, and API route ??
I'm gonna deploy my app on Cpanel too

In general, this method uses Custom Server ...
And my question in general is :
Does the Custom server support SSG, SSR, and API routes??

[Syakhisk]

For anyone still looking for answer, I have tested the default npx create-next-app and the API routes works in cPanel.

[BilalMohmand58]

I deployed it and its working but the issue I am facing is my data is coming from contentful [ the blogs and projects section is dynamic ] and my contact forms are connected with nodemailer these two are not working after I deploy it. even I setup the node js application and setup env variables there also. my hosting provider support node js

[tttoh]

Successfully deployed in shared hosting with following steps:

1. run npm run build locally
2. copy .next folder, public folder (static content), package.json, package-lock.json, .env if necessary to public_html directory in shared hosting
3. create .htaccess file with following content in same directory to redirect traffic to your server:

RewriteEngine On
RewriteRule ^$ http://127.0.0.1:3000/ [P,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ http://127.0.0.1:3000/$1 [P,L]

4. run npm install in same directory
5. finally run npm run start

[arashesnaashari]

thanks bro

[thirashapw]

Successfully deployed in shared hosting with following steps:

1. run npm run build locally
2. copy .next folder, public folder (static content), package.json, package-lock.json, .env if necessary to public_html directory in shared hosting
3. create .htaccess file with following content in same directory to redirect traffic to your server:

RewriteEngine On
RewriteRule ^$ http://127.0.0.1:3000/ [P,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ http://127.0.0.1:3000/$1 [P,L]

1. run npm install in same directory
2. finally run npm run start

is there any way to run npm run build on the server without getting build error?

[BilalMohmand58]

I deployed it and its working but the issue I am facing is my data is coming from contentful [ the blogs and projects section is dynamic ] and my contact forms are connected with nodemailer these two are not working after I deploy it. even I setup the node js application and setup env variables there also. my hosting provider support node js

[natashajaved]

I have deployed my next js project on netlify with custom server. But after deployment the custom server wouldn't run so I added this in my package.json
"scripts": { "dev": "node server.js", "build": "next build", "start": "cross-env NODE_ENV=production node server.js", "export": "next build && next export && npm start" },

and added the build command npm run export , now the server starts but the build isn't completed.

[BM-BrunoMarques]

I was never able to build in my server. I normally build locally and pass the built folder through FTP.

[mrrawatofficial]

error showing need help

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
error - Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error
RangeError: WebAssembly.instantiate(): Out of memory: wasm memory
at node:internal/deps/cjs-module-lexer/dist/lexer:1:33593
at async initCJSParse (node:internal/modules/esm/translators:69:5)
at async ESMLoader.commonjsStrategy (node:internal/modules/esm/translators:176:18)
at async link (node:internal/modules/esm/module_job:67:21)

[hellotreedigital]

Same Issue here :(

[Message-Akunna]

I think from all I have been able to piece together, NextJs ssr and middleware don't run on shared hosting.

[demirimamovic]

is that true that NextJs ssr and middleware don't run on shared hosting?

[sami-42]

When I trying to deploy my next app in my cpanel and click the run npm install its give an error "An error occured during installation of modules. The operation was performed, but check availability of application has failed. Web application responds, but its return code "None" or content type before operation "text/html" doesn't equal to contet type after operation "text/html; charset=utf-8". "

[noahchernet]

I faced the same error. Try changing your node version to v14.20.1, I believe it's v16 by default.

[Elio-Muculo]

doesn't it still work for app folder Nextjs 13?

[ishu202]

try using vercel if you can it's already a managed setup and free to use.
this is basic but you will need the following.
node installed -> any version supported by your Next distro
some kind of server to reverse proxy the node connections ( nginx or apache dosen't really matter what you go with )
once done it should all work.

in case if you want to expose node directly you will need the access to the IP tables and ufw on your linux distro.
use ufw to expose the node on port 80 and you should be gucchi. just be ware if you do that you will be responsibe to handle all 400 , 404 , 401 etc with success responses.

third solution is just use docker with node and nginx gateway copy your image on the server and expose the port to the internet
I personally think 1st and third is the best choice.

[rashid-shahriar]

thank you শুক্র, ১১ আগ, ২০২৩ তারিখে ১১:১৭ PM টায় তারিখে Ishu Sharma < ***@***.***> লিখেছেন:

…

try using vercel if you can it's already a managed setup and free to use. this is basic but you will need the following. node installed -> any version supported by your Next distro some kind of server to reverse proxy the node connections ( nginx or apache dosen't really matter what you go with ) once done it should all work. in case if you want to expose node directly you will need the access to the IP tables and ufw on your linux distro. use ufw to expose the node on port 80 and you should be gucchi. just be ware if you do that you will be responsibe to handle all 400 , 404 , 401 etc with success responses. third solution is just use docker with node and nginx gateway copy your image on the server and expose the port to the internet I personally think 1st and third is the best choice. — Reply to this email directly, view it on GitHub <#12234 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ATB3T7OIE4NLIIKMWYQSQODXUZSLBANCNFSM4MRZD5TA> . You are receiving this because you commented.Message ID: <vercel/next. ***@***.***>

[BilalMohmand58]

Road map for deploying on cPanel Next App with server side rendering (not only static) :

1. Build locally (next build)
2. Copy into html_folder all your project directory (not only the build folder, and except node_modules of course) :

public_html
    my_project
        .next
        src
        server.js
        package.json
        ...

Note : A custom server is needed as cPanel needs a startup file (use the next's default one)

3. create your node application ("setup node.js app") with options :
   Application root : public_html/my_project
   Application startup file : server.js
   ...
4. "Run NPM install" to create node_modules packages
5. Finally "Start App"

package.json with the start command :

"scripts": {
    "start": "cross-env NODE_ENV=production node server.js"
}

Successfully deployed in shared hosting with following steps:

1. run npm run build locally
2. copy .next folder, public folder (static content), package.json, package-lock.json, .env if necessary to public_html directory in shared hosting
3. create .htaccess file with following content in same directory to redirect traffic to your server:

RewriteEngine On
RewriteRule ^$ http://127.0.0.1:3000/ [P,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ http://127.0.0.1:3000/$1 [P,L]

4. run npm install in same directory
5. finally run npm run start

[BilalMohmand58]

I deployed it and it's working but the issue I am facing is my data is coming from contentful [ the blogs and projects section is dynamic ] and my contact forms are connected with nodemailer these two are not working after I deployed it. even I set up the node js application and env variables there, my hosting provider support node js

[sami-42]

You can use pm2 package to maintain you node js on production, i fixed my next js issue using this pm2 package

[MarinosTBH]

i'm using next v15 and it works well by starting the app this way:

require("next");
const { startServer } = require("next/dist/server/lib/start-server");

i build locally and push .next folder ...