Introduction
The deployment of modern frameworks such as Next.js is usually associated exclusively with complex cloud platforms. However, cPanel has evolved to offer robust support for Node.js applications.
At ClickPandaWe show you how to combine the power of React with the ease of administration of our infrastructure, achieving superior performance without unnecessary complications.
Table of Contents
Application preparation (Local)
Before uploading your project, you must prepare the build for production. In your local terminal, run:
Bash
npm run build
Make sure your file package.json have the correct scripts and that you use a custom server or the Next.js startup command.
💡Important: For cPanel, the most stable is to use an input file called app.js or index.js.
Configuration in cPanel: "Setup Node.js App".
The key is in the cPanel module. Follow these steps:
- Search for the section Software and click on Setup Node.js App.
- Click on Create Application.
- Node.js version: Select the recommended version (e.g. 18.x or 20.x).
- Application mode: Change it to Production.
- Application root: The folder where you will upload the files (ex. my-next-app).
- Application URL: Select your domain or subdomain.
Application startup file: Write app.js.
💡Tip: If you prefer to use a subdomain (ex: lab.yourdomain.com), be sure to create it first in the "Subdomains" section of your cPanel.
Using cPanel Terminal and Commands
Once the application is created, cPanel will give you a command to enter the virtual environment (VirtualEnv).
- Go to the section Advanced > Terminal in cPanel.
- Copy and paste the command that the previous step gave you (it looks something like this source /home/user/nodevenv/.../bin/activate).
- Now, navigate to your folder and install the dependencies:
Bash
cd my-next-app
npm install
The Entry Point file: app.js
As cPanel uses Phusion Passenger to serve the app, you need a file app.js in the root of your project that "lifts" Next.js:
JavaScript
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')
const dev = false
const app = next({ dev })
const handle = app.getRequestHandler()
app.prepare().then(() => {
createServer((req, res) => {
const parsedUrl = parse(req.url, true)
handle(req, res, parsedUrl)
}).listen(process.env.PORT || 3000, (err) => {
if (err) throw err
console.log('> Ready on http://localhost:' + (process.env.PORT || 3000))
})
})
Environment and Deployment Variables Management
Do not upload your file .env to the repository or by FTP if it contains sensitive keys.
- Within Setup Node.js Appgo to the section Environment variables.
- Add your API keys, database secrets, and the NODE_ENV=production.
- Click on Save and then in Restart. Your Next.js application will already be running with optimized server-side rendering (SSR).
Benefits of choosing ClickPanda for Next.js
✅ Resource optimization: cPanel manages memory to keep response times to a minimum.
✅ Safety: Free SSL included and visual firewall management.
✅ All in one: Corporate emails, databases and your modern frontend in one place.
Conclusion
You don't have to sacrifice ease of use for modernity. Implementing Next.js in ClickPanda gives you the best of both worlds: a high-level framework on a platform you already know and trust.
