Cómo configurar un servidor personalizado en Next.js

Next.js incluye su propio servidor con next start por defecto. Si tiene un backend existente, aún puede usarlo con Next.js (esto no es un servidor personalizado). Un servidor personalizado de Next.js le permite iniciar un servidor de manera programática para patrones personalizados. La mayoría de las veces no necesitará este enfoque. Sin embargo, está disponible si necesita desacoplarlo.

Es bueno saberlo:

• Antes de decidir usar un servidor personalizado, tenga en cuenta que solo debe usarse cuando el enrutador integrado de Next.js no pueda satisfacer los requisitos de su aplicación. Un servidor personalizado eliminará optimizaciones de rendimiento importantes, como la Optimización Estática Automática.
• Cuando se utiliza el modo de salida independiente, no rastrea archivos de servidor personalizados. Este modo genera un archivo server.js mínimo separado. Estos no pueden usarse juntos.

Consulte el siguiente ejemplo de un servidor personalizado:

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 no pasa por el proceso de compilación o empaquetado de Next.js. Asegúrese de que la sintaxis y el código fuente que requiere este archivo sean compatibles con la versión actual de Node.js que está utilizando. Vea un ejemplo.

Para ejecutar el servidor personalizado, deberá actualizar los scripts en package.json de la siguiente manera:

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

Alternativamente, puede configurar nodemon (ejemplo). El servidor personalizado utiliza la siguiente importación para conectar el servidor con la aplicación Next.js:

import next from 'next'

const app = next({})

La importación next anterior es una función que recibe un objeto con las siguientes opciones:

La app devuelta puede usarse para que Next.js maneje las solicitudes según sea necesario.

Deshabilitar el enrutamiento del sistema de archivos

Por defecto, Next servirá cada archivo en la carpeta pages bajo un nombre de ruta que coincida con el nombre del archivo. Si su proyecto utiliza un servidor personalizado, este comportamiento puede resultar en que el mismo contenido se sirva desde múltiples rutas, lo que puede presentar problemas con SEO y UX.

Para deshabilitar este comportamiento y evitar el enrutamiento basado en archivos en pages, abra next.config.js y deshabilite la configuración useFileSystemPublicRoutes:

module.exports = {
  useFileSystemPublicRoutes: false,
}

Nota: useFileSystemPublicRoutes deshabilita las rutas de nombres de archivo desde SSR; el enrutamiento del lado del cliente aún puede acceder a esas rutas. Al usar esta opción, debe protegerse contra la navegación a rutas que no desee programáticamente.

También puede configurar el enrutador del lado del cliente para prohibir redirecciones del lado del cliente a rutas de nombres de archivo; para eso, consulte router.beforePopState.