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.