Migrieren einer Next.js-Anwendung zum Node.js-Selektor in cPanel

This article explains how to prepare and migrate a Next.js application so it can run using the Node.js Selector in cPanel. The procedure covers project preparation, packaging, and application setup inside cPanel.

Scope and requirements

• Node.js Selector must be available on the hosting account
• The application must use a custom Node.js server
• Next.js requires Node.js version 18.17 or newer

This workflow applies to application hosting environments such as cPanel-Hosting, and may require adjustments depending on the application structure.

Preparing a Next.js project for migration

If you already have an existing Next.js project, start from step 5.

Creating a sample project

1. Make sure Node.js and npm are installed locally.
2. Open a terminal and create a new project:

npx create-next-app@latest

3. Name the project nextapp and accept the default options.

Creating a custom server

Next.js must run with a custom server to work with the Node.js Selector.

1. In the project root, create a file named server.js.
2. Add the following code:

const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = 3000
const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer(async (req, res) => {
    try {
      const parsedUrl = parse(req.url, true)
      const { pathname, query } = parsedUrl

      if (pathname === '/a') {
        await app.render(req, res, '/a', query)
      } else if (pathname === '/b') {
        await app.render(req, res, '/b', query)
      } else {
        await handle(req, res, parsedUrl)
      }
    } catch (err) {
      res.statusCode = 500
      res.end('internal server error')
    }
  }).listen(port)
})

3. Speichern Sie die Datei.

Updating the start script

1. Offen package.json.
2. Replace the start script with the following:

"start": "NODE_ENV=production node server.js"

3. Speichern Sie die Datei.

Building and packaging the project

1. Build the application:

npm run build

2. Create a ZIP archive, excluding unnecessary files:

zip -r ../nextapp.zip . --exclude "node_modules/*" ".git/*" .gitignore README.md

The archive will be created in the parent directory.

Uploading files to cPanel

1. Melden Sie sich bei CPanel an.
2. Offen Dateimanager.
3. Hochladen nextapp.zip to your account.
4. Create a directory named nextapp inside public_html.
5. Extract the ZIP file into public_html/nextapp.

Creating the Node.js application

1. On the Werkzeuge Seite, klicken Setup Node.js App.
2. Klicken Create Application.
3. Select a Node.js version compatible with Next.js.
4. Set Anwendungsmodus zur Produktion.
5. Set Anwendungsstamm Zu nextapp.
6. Wählen Sie Ihre Domain aus und lassen Sie den Pfad leer.
7. Set Anwendungsstartdatei Zu server.js.
8. Klicken Erstellen.

Installing dependencies and starting the app

1. Klicken Stoppen Sie die App wenn es läuft.
2. Klicken Führen Sie die NPM-Installation aus.
3. Nach Abschluss der Installation, klicken App starten.

Wenn die NPM-Installationsoption nicht verfügbar ist, Laden Sie die Node.js-Auswahlseite neu, um die Anwendungsliste zu aktualisieren.

Verifying deployment

Öffnen Sie Ihre Domain in einem Browser. Die Next.js-Anwendung sollte erfolgreich geladen werden.

Hosting considerations

Node.js-Anwendungen mit höherem Datenverkehr oder höheren Skalierungsanforderungen erzielen möglicherweise eine bessere Leistung Cloud-Server. Für Workloads, die eine vollständige Kontrolle auf Systemebene erfordern, A Dedizierter Server Bietet maximale Flexibilität für die Laufzeitoptimierung von Node.js.