Deploy Nextjs app to cpanel 500 internal server error - node.js

Question

I have a website hosted on CPanel which was previously in React, but I needed to migrate it to NextJS for SEO requirements. Now that I want to deploy it, I struggle to make it work. I followed this video : https://www.youtube.com/watch?v=lex3qZAf_Ok&t=1136s and the official NextJS documentation : https://nextjs.org/docs/advanced-features/custom-server, but in the end, when I add the Node JS app I get a 500 Internal Server Error.
When I execute node server.js on local or through cpanel terminal, it works and shows the website at localhost:3000.
I tried with all my files like in the video, and with a standalone build, but I have the same issue.
My code architecture :
package.json :
{
"name": "newglobal",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js",
"export": "next build && next export",
"lint": "next lint",
"sitemap": "next-sitemap --config next-sitemap-config.js"
},
"dependencies": {
"#emailjs/browser": "^3.6.2",
"axios": "^0.26.1",
"bootstrap": "^5.1.3",
"moment": "^2.29.3",
"next": "12.1.5",
"react": "^17.0.2",
"react-big-calendar": "^0.40.1",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-multi-carousel": "^2.8.0",
"react-responsive-carousel": "^3.2.23",
"reactstrap": "^9.0.2",
"sass": "^1.50.0",
"sharp": "^0.30.6"
},
"devDependencies": {
"babel-plugin-styled-components": "^2.0.7",
"babel-preset-next": "^1.4.0",
"eslint": "8.13.0",
"eslint-config-next": "12.1.5",
"next-sitemap": "^2.5.28",
"styled-components": "^5.3.5"
}
}
next.config.js
/** #type {import('next').NextConfig} */
const path = require("path");
const nextConfig = {
experimental: {
outputStandalone: true,
},
images : {
domains : ["res.cloudinary.com", 'http://localhost:3000'],
loader : 'imgix',
path : ''
},
reactStrictMode: true,
sassOptions: {
includePaths: [path.join(__dirname, 'src/styles')],
prependData: `#import "variables.scss";`
},
};
module.exports = nextConfig;
jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#/*":["src/*"],
"#/components/*":["src/components/*"],
"#/styles/*":["src/styles/*"],
"#/context/*":["src/context/*"],
"#/image/*":["public/img/*"]
}
}
}
I use the same server.js as the official documentation, or the following after the standalone build :
process.env.NODE_ENV = "production";
process.chdir(__dirname);
const NextServer = require("next/dist/server/next-server").default;
const http = require("http");
const path = require("path");
// Make sure commands gracefully respect termination signals (e.g. from Docker)
process.on("SIGTERM", () => process.exit(0));
process.on("SIGINT", () => process.exit(0));
let handler;
const server = http.createServer(async (req, res) => {
try {
await handler(req, res);
} catch (err) {
console.error(err);
res.statusCode = 500;
res.end("internal server error");
}
});
const currentPort = parseInt(process.env.PORT, 10) || 3000;
server.listen(currentPort, (err) => {
if (err) {
console.error("Failed to start server", err);
process.exit(1);
}
const addr = server.address();
const nextServer = new NextServer({
hostname: "localhost",
port: currentPort,
dir: path.join(__dirname),
dev: false,
conf: {
env: {},
webpack: null,
webpackDevMiddleware: null,
eslint: { ignoreDuringBuilds: false },
typescript: { ignoreBuildErrors: false, tsconfigPath: "tsconfig.json" },
distDir: "./.next",
cleanDistDir: true,
assetPrefix: "",
configOrigin: "next.config.js",
useFileSystemPublicRoutes: true,
generateEtags: true,
pageExtensions: ["tsx", "ts", "jsx", "js"],
target: "server",
poweredByHeader: true,
compress: true,
analyticsId: "",
images: {
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
path: "",
loader: "imgix",
domains: ["res.cloudinary.com", "http://localhost:3000"],
disableStaticImages: false,
minimumCacheTTL: 60,
formats: ["image/webp"],
dangerouslyAllowSVG: false,
contentSecurityPolicy: "script-src 'none'; frame-src 'none'; sandbox;",
},
devIndicators: {
buildActivity: true,
buildActivityPosition: "bottom-right",
},
onDemandEntries: { maxInactiveAge: 15000, pagesBufferLength: 2 },
amp: { canonicalBase: "" },
basePath: "",
sassOptions: {
includePaths: [
"C:\\Users\\johnk\\OneDrive\\Documents\\Elikya Academy\\global.client\\src\\styles",
],
prependData: '#import "variables.scss";',
},
trailingSlash: false,
i18n: null,
productionBrowserSourceMaps: false,
optimizeFonts: true,
excludeDefaultMomentLocales: true,
serverRuntimeConfig: {},
publicRuntimeConfig: {},
reactStrictMode: true,
httpAgentOptions: { keepAlive: true },
outputFileTracing: true,
staticPageGenerationTimeout: 60,
swcMinify: false,
experimental: {
cpus: 11,
sharedPool: true,
plugins: false,
profiling: false,
isrFlushToDisk: true,
workerThreads: false,
pageEnv: false,
optimizeCss: false,
nextScriptWorkers: false,
scrollRestoration: false,
externalDir: false,
reactRoot: false,
disableOptimizedLoading: false,
gzipSize: true,
swcFileReading: true,
craCompat: false,
esmExternals: true,
isrMemoryCacheSize: 52428800,
serverComponents: false,
fullySpecified: false,
outputFileTracingRoot: "",
outputStandalone: true,
images: { layoutRaw: false },
trustHostHeader: false,
},
configFileName: "next.config.js",
},
});
handler = nextServer.getRequestHandler();
console.log("Listening on port", currentPort);
});

Answer 1

try to 'next build' first before you delopy on CPanel , if you got erorr in next build you must fix it , then try deploy agin

Answer 2

As a workaround because I needed to deploy the website, I removed SSR from my pages and used useEffect instead, and did a next export to deploy it easily.