How to deploy Next.js app in cPanel (how-to)

Be taught to seamlessly and successfully deploy a Subsequent.js utility on cPanel. I’ll stroll you thru this course of step-by-step.

Earlier than we dive in, let’s check out Subsequent.js and cPanel in case you are new to those phrases.

What’s Subsequent.js?

Subsequent.js is a pleasant framework primarily based on React.js. It is a wizard with regards to constructing Server Aspect Rendering (SSR) apps. By default, React.js solely helps constructing Single Web page Purposes (SPA). Nonetheless, Subsequent.js steps in with its enticing SSR function. What else? Subsequent.js additionally gives a file-based routing system, amongst different advantages.

What’s cPanel

Change to cPanel. Consider it as software program that simplifies server administration. It brings quite a lot of instruments to your desk. File supervisor, database supervisor and area identify supervisor are just some examples.

Now that we’re comfy with Subsequent.js and cPanel, we are able to transfer on to our principal process: deploying a Subsequent.js app to cPanel. Assuming you may have a Subsequent.js app, an online host with cPanel, and a linked area identify, let’s transfer on.

Deploy the Subsequent.js app to cPanel

Step 1: Begin establishing a customized Subsequent.js server. You want a server.js file within the root of your challenge, populated with the required code. Search for assist in an official Subsequent.js information.

const { createServer } = require('http')
const { parse } = require('url')
const subsequent = require('subsequent')
 
const dev = course of.env.NODE_ENV !== 'manufacturing'
const hostname="localhost"
const port = 3000
// when utilizing middleware `hostname` and `port` should be offered beneath
const app = subsequent({ dev, hostname, port })
const deal with = app.getRequestHandler()
 
app.put together().then(() => {
  createServer(async (req, res) => {
    strive {
      // Make sure you go `true` because the second argument to `url.parse`.
      // This tells it to parse the question portion of the URL.
      const parsedUrl = parse(req.url, true)
      const { pathname, question } = parsedUrl
 
      if (pathname === '/a') {
        await app.render(req, res, '/a', question)
      } else if (pathname === '/b') {
        await app.render(req, res, '/b', question)
      } else {
        await deal with(req, res, parsedUrl)
      }
    } catch (err) {
      console.error('Error occurred dealing with', req.url, err)
      res.statusCode = 500
      res.finish('inner server error')
    }
  })
    .as soon as('error', (err) => {
      console.error(err)
      course of.exit(1)
    })
    .pay attention(port, () => {
      console.log(`> Prepared on http://${hostname}:${port}`)
    })
})

step 2: Optimize the package deal.json file. This step makes the surroundings “manufacturing prepared” and prompts the server.js file.


{
   "scripts": {
      "begin": "NODE_ENV=manufacturing node server.js"
   }
}

step 3: Time to create your Subsequent.js utility. You are able to do this with the npm run construct or Yarn run construction command in your terminal.

step 4: After the construct, find your Subsequent.js challenge information in your file supervisor. In the event you do not see any hidden information, allow visibility. Keep away from the node_modules and .git folders, the README.md and .gitignore information. Choose all different information and folders and create a ZIP file.

step 5: Login to your cPanel webhosting now. Add the ZIP file and extract it to the foundation folder of your area identify.

step 6: Your challenge information are prepared. Go to the “Software program” part in your cPanel. Click on Arrange Node.js app after which click on the + Create utility button. Arrange your Node.js app, bearing in mind the Node.js model, manufacturing utility mode, utility root, URL, and launch file (server.js).

Lastly, click on CREATE. As soon as it is created, cease it for some time. Scroll right down to the Detected Configuration Recordsdata part. Run NPM Set up to get all Node.js packages. Lastly, click on START APP.

Right here we go! Open your area identify in your browser. Your Subsequent.js app is now dwell. Nice work for the profitable utility!

It was a pleasure to share this technique of deploying Subsequent.js apps on cPanel. Good luck and pleased coding!

Execs and cons of deploying a NextJs in cPanel

Deploying a Subsequent.js utility on cPanel brings an a variety of benefits. Listed below are some execs and cons to contemplate.

Benefits:

  1. Person pleasant: cPanel gives an easy-to-use graphical interface that simplifies the deployment course of.
  2. automation: cPanel comes with many automated instruments that may deal with duties like creating databases, managing web site information, establishing e-mail, and extra.
  3. versatility: cPanel helps a variety of purposes, together with Node.js apps comparable to these constructed with Subsequent.js.

Disadvantages:

  1. Restricted flexibility: Though cPanel is straightforward to make use of, it will probably generally restrict flexibility and management over your server surroundings resulting from its simplified consumer interface.
  2. Attainable compatibility points: Some customers reported issues deploying Subsequent.js purposes on shared internet hosting platforms, e.g. B. Errors through the construct course of.

FAQs

What are the benefits and limitations of internet hosting a Subsequent.js web site on cPanel?

Internet hosting a Subsequent.js web site on cPanel can have a number of advantages, comparable to price financial savings and retaining Subsequent.js options. Nonetheless, there are some limitations that you have to be conscious of. For instance, cPanel doesn’t assist serverless capabilities and automated static optimization. The choice to host on cPanel must be primarily based on particular person preferences and enterprise wants.

What does the .htaccess file configuration do when deploying a Subsequent.js utility to cPanel?

Configuring the .htaccess file is a vital a part of deploying a Subsequent.js utility on cPanel. This file controls the server’s habits when sure situations are met. The precise configuration offered within the instance helps to course of requests and redirects correctly.

What if crashes or redirection points happen when deploying a Subsequent.js app to cPanel?

If you’re encountering crashes or redirection points when deploying your Subsequent.js app to cPanel, one resolution is likely to be to create a startup file named app.js in your root folder. On this state of affairs, you could run your utility as a Node.js utility.

How can I disable picture optimization when deploying a Subsequent.js app to cPanel?

Disabling picture optimization when deploying a Subsequent.js app to cPanel is feasible, however the actual directions weren’t included within the info offered. For particular steps, see the official Subsequent.js documentation or tutorials.

Different Assets

Finest Subsequent.JS Internet hosting Suppliers

Finest Node.js Internet hosting Suppliers

Diploma

Whereas deploying a Subsequent.js utility on cPanel can current some challenges, the professionals usually outweigh the cons. cPanel’s simplicity and automation make the deployment course of simple and manageable, even for builders who’re new to the method. With this information, it is best to now be higher geared up to deploy your Subsequent.js purposes to cPanel.

Scroll to Top