{"id":2237,"date":"2025-01-21T13:35:41","date_gmt":"2025-01-21T13:35:41","guid":{"rendered":"https:\/\/777hosting.net\/blog\/?p=2237"},"modified":"2025-01-23T15:27:48","modified_gmt":"2025-01-23T15:27:48","slug":"deploying-a-next-js-application-on-cpanel-a-comprehensive-guide","status":"publish","type":"post","link":"https:\/\/777hosting.net\/blog\/deploying-a-next-js-application-on-cpanel-a-comprehensive-guide\/","title":{"rendered":"Deploying a Next.js Application on cPanel: A Comprehensive Guide"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\"><strong><mark style=\"color:#00cd11\" class=\"has-inline-color\">Introduction<\/mark><\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Deploying a Next.js application on cPanel can seem like a daunting task, especially if you\u2019re unfamiliar with either platform. However, with the right approach, you can take advantage of cPanel\u2019s intuitive tools and Next.js\u2019s powerful features to create and host high-performance applications.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this guide, we\u2019ll walk you through a simple, step-by-step process to help you deploy your Next.js application on cPanel efficiently and effectively. Whether you\u2019re a seasoned developer or just starting, this guide is designed to simplify the deployment process for you.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h3 class=\"wp-block-heading\"><mark style=\"color:#00cd11\" class=\"has-inline-color\">Understanding the Basics: What Are cPanel and Next.js?<\/mark><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><mark style=\"color:#00cd11\" class=\"has-inline-color\">What Is cPanel?<\/mark><\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">cPanel is a web hosting control panel designed to simplify server management. It provides intuitive tools like File Manager, Database Manager, Domain Manager, and CMS installers, making server operations efficient and user-friendly.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><mark style=\"color:#00cd11\" class=\"has-inline-color\">What Is Next.js?<\/mark><\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Next.js is a robust React.js-based framework that enables server-side rendering (SSR) and static site generation (SSG). It allows developers to create SEO-friendly, high-performance applications that go beyond traditional single-page applications (SPA).<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h3 class=\"wp-block-heading\"><mark style=\"color:#00cd11\" class=\"has-inline-color\">Step-by-Step Guide to Deploy a Next.js App on cPanel<\/mark><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><mark style=\"color:#00cd11\" class=\"has-inline-color\">1. Build a Custom Server for Your Next.js Application<\/mark><\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Begin by creating a custom server to handle your Next.js application:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create a file named <code>server.js<\/code> in the root directory of your project.<\/li>\n\n\n\n<li>Add the following code:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code><code>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 = 3000;\n\nconst app = next({ dev, hostname, port });\nconst handle = app.getRequestHandler();\n\napp.prepare().then(() =&gt; {\n  createServer(async (req, res) =&gt; {\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 handling request', req.url, err);\n      res.statusCode = 500;\n      res.end('Internal Server Error');\n    }\n  })\n    .once('error', (err) =&gt; {\n      console.error(err);\n      process.exit(1);\n    })\n    .listen(port, () =&gt; {\n      console.log(`&gt; Ready on http:\/\/${hostname}:${port}`);\n    });\n});<\/code><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><mark style=\"color:#00cd11\" class=\"has-inline-color\">2. Configure Your Project for Production<\/mark><\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Update your <code>package.json<\/code> file to include a script for starting your server in production mode:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><code>{\n  \"scripts\": {\n    \"start\": \"NODE_ENV=production node server.js\"\n  }\n}<\/code><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><mark style=\"color:#00cd11\" class=\"has-inline-color\">3. Build the Application for Deployment<\/mark><\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Use the following command to build your application:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"background-color: initial;color: var(--ast-global-color-3)\">npm run build<\/span><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Alternatively, for Yarn users:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><span style=\"background-color: initial;color: var(--ast-global-color-3)\">yarn build<\/span><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><mark style=\"color:#00cd11\" class=\"has-inline-color\">4. Prepare Your Project Files<\/mark><\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigate to your project folder and locate the necessary files.<\/li>\n\n\n\n<li>Exclude unnecessary files and folders such as <code>node_modules<\/code>, <code>.git<\/code>, <code>README.md<\/code>, and <code>.gitignore<\/code>.<\/li>\n\n\n\n<li>Compress the remaining files into a ZIP archive.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><mark style=\"color:#00cd11\" class=\"has-inline-color\">5. Upload Files to Your cPanel Account<\/mark><\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Log in to your cPanel account.<\/li>\n\n\n\n<li>Access the <strong>File Manager<\/strong> and navigate to the root directory of your domain.<\/li>\n\n\n\n<li>Upload and extract the ZIP archive.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><mark style=\"color:#00cd11\" class=\"has-inline-color\">6. Configure the Node.js Application in cPanel<\/mark><\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to the <strong>Software<\/strong> section in cPanel and select <strong>Setup Node.js App<\/strong>.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"497\" src=\"https:\/\/777hosting.net\/blog\/wp-content\/uploads\/2025\/01\/1000369696-1024x497.png\" alt=\"\" class=\"wp-image-2240\" srcset=\"https:\/\/777hosting.net\/blog\/wp-content\/uploads\/2025\/01\/1000369696-1024x497.png 1024w, https:\/\/777hosting.net\/blog\/wp-content\/uploads\/2025\/01\/1000369696-300x146.png 300w, https:\/\/777hosting.net\/blog\/wp-content\/uploads\/2025\/01\/1000369696-768x373.png 768w, https:\/\/777hosting.net\/blog\/wp-content\/uploads\/2025\/01\/1000369696-1536x745.png 1536w, https:\/\/777hosting.net\/blog\/wp-content\/uploads\/2025\/01\/1000369696.png 1630w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click the <strong>Create Application<\/strong> button.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"178\" src=\"https:\/\/777hosting.net\/blog\/wp-content\/uploads\/2025\/01\/1000369698-1024x178.png\" alt=\"\" class=\"wp-image-2239\" srcset=\"https:\/\/777hosting.net\/blog\/wp-content\/uploads\/2025\/01\/1000369698-1024x178.png 1024w, https:\/\/777hosting.net\/blog\/wp-content\/uploads\/2025\/01\/1000369698-300x52.png 300w, https:\/\/777hosting.net\/blog\/wp-content\/uploads\/2025\/01\/1000369698-768x133.png 768w, https:\/\/777hosting.net\/blog\/wp-content\/uploads\/2025\/01\/1000369698-1536x266.png 1536w, https:\/\/777hosting.net\/blog\/wp-content\/uploads\/2025\/01\/1000369698.png 1660w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Set up the application by configuring the following:\n<ul class=\"wp-block-list\">\n<li><strong>Node.js Version<\/strong>: Ensure it matches your project requirements.<\/li>\n\n\n\n<li><strong>Application Mode<\/strong>: Select &#8220;Production.&#8221;<\/li>\n\n\n\n<li><strong>Application Root<\/strong>: Specify your domain\u2019s root directory.<\/li>\n\n\n\n<li><strong>Application URL<\/strong>: Enter your domain name.<\/li>\n\n\n\n<li><strong>Startup File<\/strong>: Set this to <code>server.js<\/code>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Once completed, click <strong>Create<\/strong> to initialize your application.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><mark style=\"color:#00cd11\" class=\"has-inline-color\">7. Install Dependencies and Launch the App<\/mark><\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Scroll down to the <strong>Detected Configuration Files<\/strong> section.<\/li>\n\n\n\n<li>Click <strong>Run NPM Install<\/strong> to install the required packages.<\/li>\n\n\n\n<li>Once the installation is complete, click <strong>Start App<\/strong> to launch your application.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h3 class=\"wp-block-heading\"><mark style=\"color:#00cd11\" class=\"has-inline-color\">Verifying the Deployment<\/mark><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Open your domain name in a web browser to check if your Next.js application is live. If configured correctly, your app will be fully functional and accessible.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><mark style=\"color:#00cd11\" class=\"has-inline-color\">Conclusion<\/mark><\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Congratulations! By following this guide, you\u2019ve successfully deployed your Next.js application on cPanel. This combination of technologies allows you to deliver fast, dynamic, and scalable applications while leveraging cPanel\u2019s user-friendly hosting environment.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Should you encounter any issues, revisit the steps or consult the resources provided to troubleshoot effectively. Deploying applications doesn\u2019t have to be complicated, and with practice, it becomes second nature. Happy hosting!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Deploying a Next.js application on cPanel can seem like a daunting task, especially if you\u2019re unfamiliar with either platform. [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":2253,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[26],"tags":[],"ppma_author":[20],"class_list":["post-2237","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cpanel","author-joseph"],"authors":[{"term_id":20,"user_id":5,"is_guest":0,"slug":"joseph","display_name":"Joseph C","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/1e2b7dc41170a0745c11b9881bc61aa548b87207c1cd1acc16a99d0ed0c1a584?s=96&d=mm&r=g","first_name":"Joseph","last_name":"C","job_title":"","description":""}],"_links":{"self":[{"href":"https:\/\/777hosting.net\/blog\/wp-json\/wp\/v2\/posts\/2237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/777hosting.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/777hosting.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/777hosting.net\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/777hosting.net\/blog\/wp-json\/wp\/v2\/comments?post=2237"}],"version-history":[{"count":8,"href":"https:\/\/777hosting.net\/blog\/wp-json\/wp\/v2\/posts\/2237\/revisions"}],"predecessor-version":[{"id":2264,"href":"https:\/\/777hosting.net\/blog\/wp-json\/wp\/v2\/posts\/2237\/revisions\/2264"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/777hosting.net\/blog\/wp-json\/wp\/v2\/media\/2253"}],"wp:attachment":[{"href":"https:\/\/777hosting.net\/blog\/wp-json\/wp\/v2\/media?parent=2237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/777hosting.net\/blog\/wp-json\/wp\/v2\/categories?post=2237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/777hosting.net\/blog\/wp-json\/wp\/v2\/tags?post=2237"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/777hosting.net\/blog\/wp-json\/wp\/v2\/ppma_author?post=2237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}