{"id":18542,"date":"2025-01-24T10:18:26","date_gmt":"2025-01-24T10:18:26","guid":{"rendered":"https:\/\/truehost.com\/support\/?post_type=docs&p=18542"},"modified":"2025-01-24T13:14:10","modified_gmt":"2025-01-24T13:14:10","password":"","slug":"how-to-deploy-nextjs-on-cyberpanel","status":"publish","type":"docs","link":"https:\/\/truehost.com\/support\/knowledge-base\/how-to-deploy-nextjs-on-cyberpanel\/","title":{"rendered":"How to deploy Nextjs on Cyberpanel."},"content":{"rendered":"\n

<\/p>\n\n\n\n

Deploying a Next.js app on CyberPanel is easy with the right steps. This guide walks you through setting up a custom\u00a0server.js<\/code>, configuring LiteSpeed, and getting your Next.js app live quickly. Let\u2019s get started!<\/p>\n\n\n\n

Part 1: Preparing a Next.js App for Deployment<\/strong><\/h2>\n\n\n\n

To deploy a Next.js app on CyberPanel, follow these steps:<\/p>\n\n\n\n

Step 1: Create a Custom Next.js Server (server.js)<\/strong><\/h3>\n\n\n\n

Next.js apps typically use the built-in server for development. However, for deployment on CyberPanel, you need to create a custom server.<\/p>\n\n\n\n

    \n
  1. Create a server.js<\/code> file in the root directory of your project.<\/li>\n\n\n\n
  2. Add the following code to the file:<\/li>\n<\/ol>\n\n\n\n
    const { createServer } = require('http');\nconst { parse } = require('url');\nconst next = require('next');\n\nconst dev = process.env.NODE_ENV !== 'production';\nconst hostname = 'localhost';\nconst port = process.env.PORT || 3000;\n\nconst app = next({ dev, hostname, port });\nconst handle = app.getRequestHandler();\n\napp.prepare().then(() => {\n  createServer(async (req, res) => {\n    try {\n      const parsedUrl = parse(req.url, true);\n      const { pathname, query } = parsedUrl;\n\n      if (pathname === '\/a') {\n        await app.render(req, res, '\/a', query);\n      } else if (pathname === '\/b') {\n        await app.render(req, res, '\/b', query);\n      } else {\n        await handle(req, res, parsedUrl);\n      }\n    } catch (err) {\n      console.error('Error occurred handling', req.url, err);\n      res.statusCode = 500;\n      res.end('Internal server error');\n    }\n  })\n    .once('error', (err) => {\n      console.error(err);\n      process.exit(1);\n    })\n    .listen(port, () => {\n      console.log(`> Ready on http:\/\/${hostname}:${port}`);\n    });\n});<\/code><\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    This code sets up a custom server to handle requests and serve your Next.js app.<\/p>\n\n\n\n
    Step 2: Modify the package.json File<\/strong><\/h3>\n\n\n\n
    Update the package.json<\/code> file to use the custom server for production. Add the following to the start<\/code> script:<\/p>\n\n\n\n
    \"start\": \"NODE_ENV=production node server.js\",<\/code><\/pre>\n\n\n\n
    This ensures that the custom server (server.js<\/code>) is used when the app is deployed.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Step 3: Build the Next.js Application<\/strong><\/h3>\n\n\n\n
    Before deploying, build your Next.js app by running:<\/p>\n\n\n\n
    npm run build<\/code><\/pre>\n\n\n\n
    This generates an optimized production build of your app. Ensure there are no errors during the build process.<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Step 4: Prepare Files for Deployment<\/strong><\/h3>\n\n\n\n
      \n
    1. Open your file manager and locate your Next.js project files.<\/li>\n\n\n\n
    2. Enable visibility for hidden files (if necessary).<\/li>\n\n\n\n
    3. Exclude the following files and folders:\n