Benutzerdefinierter Server

Next.js bringt standardmäßig einen eigenen Server mit next start mit. Wenn Sie einen bestehenden Backend-Server haben, können Sie diesen weiterhin mit Next.js verwenden (dies ist kein benutzerdefinierter Server). Ein benutzerdefinierter Next.js-Server ermöglicht es Ihnen, einen Server für benutzerdefinierte Muster programmgesteuert zu starten. In den meisten Fällen werden Sie diesen Ansatz nicht benötigen. Er steht jedoch zur Verfügung, falls Sie aussteigen müssen.

Hinweis:

• Bevor Sie sich für einen benutzerdefinierten Server entscheiden, beachten Sie, dass dieser nur verwendet werden sollte, wenn der integrierte Router von Next.js die Anforderungen Ihrer Anwendung nicht erfüllen kann. Ein benutzerdefinierter Server entfernt wichtige Leistungsoptimierungen wie Automatische statische Optimierung.
• Ein benutzerdefinierter Server kann nicht auf Vercel bereitgestellt werden.
• Bei Verwendung des Standalone-Ausgabemodus werden benutzerdefinierte Serverdateien nicht nachverfolgt. Stattdessen wird eine separate minimale server.js-Datei ausgegeben. Diese können nicht zusammen verwendet werden.

Sehen Sie sich das folgende Beispiel eines benutzerdefinierten Servers an:

import { createServer } from 'http'
import { parse } from 'url'
import next from 'next'
 
const port = parseInt(process.env.PORT || '3000', 10)
const dev = process.env.NODE_ENV !== 'production'
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(port)
 
  console.log(
    `> Server läuft unter http://localhost:${port} als ${
      dev ? 'Entwicklung' : process.env.NODE_ENV
    }`
  )
})

import { createServer } from 'http'
import { parse } from 'url'
import next from 'next'
 
const port = parseInt(process.env.PORT || '3000', 10)
const dev = process.env.NODE_ENV !== 'production'
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(port)
 
  console.log(
    `> Server läuft unter http://localhost:${port} als ${
      dev ? 'Entwicklung' : process.env.NODE_ENV
    }`
  )
})

server.js durchläuft nicht den Next.js-Compiler oder den Bundling-Prozess. Stellen Sie sicher, dass die Syntax und der Quellcode dieser Datei mit der aktuellen Node.js-Version, die Sie verwenden, kompatibel sind. Beispiel anzeigen.

Um den benutzerdefinierten Server auszuführen, müssen Sie die scripts in package.json wie folgt aktualisieren:

{
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  }
}

Alternativ können Sie nodemon einrichten (Beispiel). Der benutzerdefinierte Server verwendet den folgenden Import, um den Server mit der Next.js-Anwendung zu verbinden:

import next from 'next'
 
const app = next({})

Der oben genannte next-Import ist eine Funktion, die ein Objekt mit den folgenden Optionen erhält:

Der zurückgegebene app kann dann verwendet werden, um Anfragen nach Bedarf zu verarbeiten.

Dateisystem-Routing deaktivieren

Standardmäßig bedient Next jede Datei im pages-Ordner unter einem Pfadnamen, der dem Dateinamen entspricht. Wenn Ihr Projekt einen benutzerdefinierten Server verwendet, kann dieses Verhalten dazu führen, dass derselbe Inhalt von mehreren Pfaden bereitgestellt wird, was Probleme mit SEO und UX verursachen kann.

Um dieses Verhalten zu deaktivieren und das Routing basierend auf Dateien in pages zu verhindern, öffnen Sie next.config.js und deaktivieren Sie die useFileSystemPublicRoutes-Konfiguration:

module.exports = {
  useFileSystemPublicRoutes: false,
}

Beachten Sie, dass useFileSystemPublicRoutes Dateinamen-Routen vom serverseitigen Rendering deaktiviert; Client-seitiges Routing kann weiterhin auf diese Pfade zugreifen. Bei Verwendung dieser Option sollten Sie Navigationswege, die Sie nicht wünschen, programmgesteuert blockieren.

Möglicherweise möchten Sie auch den Client-seitigen Router so konfigurieren, dass Client-seitige Weiterleitungen zu Dateinamen-Routen nicht zulässig sind. Dafür verweisen Sie auf router.beforePopState.