skip to Main Content

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.
NodeJS app config

Internal server error

I tried with all my files like in the video, and with a standalone build, but I have the same issue.

My code architecture :
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);
});

2

Answers


  1. Chosen as BEST ANSWER

    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.


  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search