My next.js app goes blank after deploying on cPanel

[Wiseard]

Summary

I deployed my Next.js app on cPanel and its blank. It works fine locally. Here are the steps I followed :

1.First, I created a custom server.js in my root directory with the following code :

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

const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = 3000
// when using middleware hostname and port must be provided below
const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()

app.prepare().then(() => {
createServer(async (req, res) => {
try {
// Be sure to pass true as the second argument to url.parse.
// This tells it to parse the query portion of the URL.
const parsedUrl = parse(req.url, true)
const { pathname, query } = parsedUrl

  if (pathname === '/a') {
    await app.render(req, res, '/a', query)
  } else if (pathname === '/b') {
    await app.render(req, res, '/b', query)
  } else {
    await handle(req, res, parsedUrl)
  }
} catch (err) {
  console.error('Error occurred handling', req.url, err)
  res.statusCode = 500
  res.end('internal server error')
}

})
.once('error', (err) => {
console.error(err)
process.exit(1)
})
.listen(port, () => {
console.log(> Ready on http://${hostname}:${port})
})
})
`

2. Then I edited the package.json file to set the environment to production on the start script :

"scripts": { "dev": "next dev", "build": "next build", "start": "NODE_ENV=production node server.js", "lint": "next lint" },

3. npm run build and compress the following files :

4. Imported and extracted all in the File Manager Root Directory :

5. Created my application on Setup Node.js App with the following information :

6. Stop Application - Run NPM install and then restart the application

After all these steps, my app is blank, and I don't know what I did wrong.

Here is a Github link where you can see all the app code. I'm stuck since yesterday and I appreciate any help you can give me to resolve this problem. I know the issue is due to my app but I can't figure it out. But I'm pretty sure the main problem is located on the server.js file.

I hope all the information I provided could help you to understand.

Additional information

No response

Example

No response

[rahulsharmacode]

I am also facing same issue, my app also works fine in local but, after hosting in cpanel with all steps followed, the app goes blank.

[yiaoma]

Same here, we had a website hosted on cpanel for almost a year already, it crashed when I updated my packages to match nextjs13

[harisahmedz]

did u find any solution?

[nicolez9911]

Same thing. I tested some versions, 13.4.13 is the last one that works for me. With later versions I just get empty responses (even with the example project).

[yiaoma]

How do you downgrade nextjs to 13.4.13, do you just put this version in package.json file?

[nicolez9911]

Yes, that‘s what I did. And then of course npm install and a new build. I‘m nor sure if that‘s the way to go, but it worked for me..

[yiaoma]

Thank you, it did work but only on nodesj application. We were using passenger before, it is completely broken right now even with downgraded version. Have you had any issues with next images ? I'm getting current error: ""url" parameter is valid but upstream response is invalid"

[nicolez9911]

didn't have any issues with images..

[NafeesIS]

The process worked to end to end, but when I open the URL, I get the notification "It works! NodeJS 20.18.3", Would you know why?

[comtrast-remi]

Same issue here but on a Plesk server. I've also made changes to the package.json file and created a server.js file.

I'm using Next 13.4.19 and Node 16.20.

[yiaoma]

At the moment the only version we've managed to run without any problems is 13.4.4

[one-and-only]

Bumping this, as the issue still persists with Next.JS 14 and 15-RC.0.

[ByAnthony]

Managed to deploy on CPanel with Next.js 14.2.4. Wrote a wee guide; hope that helps 🙏

[one-and-only]

Managed to deploy on CPanel with Next.js 14.2.4. Wrote a wee guide; hope that helps 🙏

I appreciate the effort. However, the issue here seems that after a while, all page responses end up return literally an empty HTML body after all the headers. The server runs for the first few hours or so, but it eventually "dies". The issue still persists in its original form (I just testedd with latest Canary on Node 22).

[NafeesIS]

The process worked to end to end, but when I open the URL, I get the notification "It works! NodeJS 20.18.3", Would you know why?

[NafeesIS]

The process worked to end to end, but when I open the URL, I get the notification "It works! NodeJS 20.18.3", Would you know why?

[designdrumm]

Take a look inside app.js in the parent directory. More than likely your node instance start page is set to this js file.

[designdrumm]

Next.js needs node v18.17.. min. I believe to work on a server.

[designdrumm]

I am having the same issue.
I did notice this code in you post.

if (pathname === '/a') {
    await app.render(req, res, '/a', query)
  } else if (pathname === '/b') {
    await app.render(req, res, '/b', query)
  } else {
    await handle(req, res, parsedUrl)
  }

Fix /a and /b, they should be pages related to your app.
Essentially, I think they are giving you the ability to use queries here for
only pages that require them otherwise leaving them out.

So for example if you have a cart page and say a blog page that take url queries,
then they are /a and /b . (pathname === '/cart' or pathname === '/blog')
otherwise all other pages just load via the url.

Not sure if this will fix your problem though.
I am still in the middle of testing. Why I found this discussion!

[alnetarg]

Hi team,

I’m following up on the issue regarding deploying a simple Next.js application on cPanel. Despite allocating 4GB of RAM, I’m unable to get even a basic test project running.

I created the required server.js file as per documentation:

import express from "express";
import next from "next";

const port = process.env.PORT || 3000;
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
const server = express();

server.all("*", (req, res) => {
    return handle(req, res);
});

server.listen(port, (err) => {
    if (err) throw err;
    console.log(`🚀 Server running at http://localhost:${port}`);
});

});

My package.json contains the following script:

"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "NODE_ENV=production node server.js",
"lint": "next lint"
}

Node.js version: 20.17.0
Application mode: Production

However, when running the start script through the UI using "RUN JS SCRIPT", I get this error:

RangeError: WebAssembly.instantiate(): Out of memory: Cannot allocate Wasm memory for new instance
at lazyllhttp (node:internal/deps/undici/undici:5560:32)

The Node.js process fails with a WebAssembly memory allocation error, although the application only consumes ~24MB of RAM when tested on a Debian VM with 4GB RAM (same conditions, runs fine).

Limits shown include:

Max resident set: 4GB

Max address space: 4GB

I’ve already reviewed that the issue is not on the application side. Could you please:

Confirm if this may be due to LVE limits or a deeper issue with the platform's WebAssembly/node runtime?

Attempt to deploy a test Next.js app yourselves on this environment for validation (perhaps using the example starter project)?

Let me know if any tuning is needed for this kind of app.

Thanks in advance for the support. Let me know if you need access logs or configs.

Best regards,

[designdrumm]

I was told by my hosting tech staff that the memory error is because of the Node setup UI and memory limits can not be increased for this in CPanel. They advised me to use terminal for this instead.

Also. I found this regarding your code you posted.
Specifically the commented text.

```
...

app.prepare().then(() => {
  const server = express();

  // Custom server-side logic or API routes can go here
  // For example:
  // server.get('/custom-route', (req, res) => {
  //   res.send('Hello from custom route!');
  // });

  // Handle all other requests with Next.js
  server.all('*', (req, res) => {
    return handle(req, res);
  });

  server.listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on http://localhost:${port}`);
  });
});

[designdrumm]

I have had some success with loading my app.
When I set the application start file to the server.js in the Node Setup UI and replace the "NODE_ENV=production node server.js" text from my package.json file to "next start". I then start my app and "run script" selecting start, I get my site html loading with broken links and mostly just the raw html exposed from my front page. But my app loaded! Again though, I am getting the memory error in the UI. My suspicion is that I need to take the techs advice and try with terminal however, I am not savvy with terminal.