Comment configurer un serveur personnalisé dans Next.js

Next.js inclut son propre serveur avec next start par défaut. Si vous avez un backend existant, vous pouvez toujours l'utiliser avec Next.js (ce n'est pas un serveur personnalisé). Un serveur Next.js personnalisé vous permet de démarrer un serveur de manière programmatique pour des motifs personnalisés. La plupart du temps, vous n'aurez pas besoin de cette approche. Cependant, elle est disponible si vous en avez besoin.

Bon à savoir :

• Avant de décider d'utiliser un serveur personnalisé, gardez à l'esprit qu'il ne devrait être utilisé que lorsque le routeur intégré de Next.js ne peut pas répondre aux exigences de votre application. Un serveur personnalisé supprimera des optimisations de performance importantes, comme l'Optimisation Statique Automatique.
• Lorsque vous utilisez le mode de sortie autonome, il ne trace pas les fichiers du serveur personnalisé. Ce mode produit plutôt un fichier minimal séparé server.js. Ces deux modes ne peuvent pas être utilisés ensemble.

Consultez l'exemple suivant d'un serveur personnalisé :

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 listening at http://localhost:${port} as ${
      dev ? 'development' : process.env.NODE_ENV
    }`
  )
})

server.js ne passe pas par le compilateur ou le processus de bundling de Next.js. Assurez-vous que la syntaxe et le code source requis par ce fichier sont compatibles avec la version actuelle de Node.js que vous utilisez. Voir un exemple.

Pour exécuter le serveur personnalisé, vous devrez mettre à jour les scripts dans package.json comme suit :

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

Alternativement, vous pouvez configurer nodemon (exemple). Le serveur personnalisé utilise l'import suivant pour connecter le serveur avec l'application Next.js :

import next from 'next'

const app = next({})

L'import next ci-dessus est une fonction qui reçoit un objet avec les options suivantes :

L'app retournée peut ensuite être utilisée pour laisser Next.js gérer les requêtes comme nécessaire.

Désactiver le routage par système de fichiers

Par défaut, Next servira chaque fichier dans le dossier pages sous un chemin correspondant au nom du fichier. Si votre projet utilise un serveur personnalisé, ce comportement peut entraîner le même contenu étant servi depuis plusieurs chemins, ce qui peut poser des problèmes de SEO et d'expérience utilisateur.

Pour désactiver ce comportement et empêcher le routage basé sur les fichiers dans pages, ouvrez next.config.js et désactivez la configuration useFileSystemPublicRoutes :

module.exports = {
  useFileSystemPublicRoutes: false,
}

Note : useFileSystemPublicRoutes désactive les routes basées sur les noms de fichiers pour le SSR ; le routage côté client peut toujours accéder à ces chemins. Lorsque vous utilisez cette option, vous devriez protéger contre la navigation vers les routes que vous ne voulez pas de manière programmatique.

Vous pourriez aussi vouloir configurer le routeur côté client pour interdire les redirections côté client vers les routes basées sur les noms de fichiers ; pour cela, référez-vous à router.beforePopState.