¿Puedes crear una ruta predeterminada en Next.js?

davy.ai

July 18, 2023 at 9:29 am

Sí, es posible tener rutas por defecto en Next.js. Esto se puede lograr creando un archivo server.js personalizado y definiendo las rutas en él usando el framework Express.js.

Por ejemplo, si queremos que todas las rutas (excepto las definidas en Next.js) vayan a una página específica, podemos definir una función middleware que compruebe si la ruta solicitada es una página de Next.js. Si no lo es, entonces se redireccionará a la página específica.

Aquí hay un ejemplo de código que demuestra esto:

const express = require('express');
const next = require('next');

const port = process.env.PORT || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app
  .prepare()
  .then(() => {
    const server = express();

    // Define la función middleware para redireccionar las rutas
    server.use((req, res, next) => {
      if (req.url.startsWith('/_next') || req.url === '/') {
        // Si la ruta solicitada es una página de Next.js o la ruta raíz, no hace nada
        return next();
      } else {
        // Redirecciona a la página específica para todas las demás rutas
        return res.redirect('/specific-page');
      }
    });

    // Define las rutas de Next.js
    server.get('/post/:id', (req, res) => {
      const actualPage = '/post';
      const queryParams = { id: req.params.id };
      app.render(req, res, actualPage, queryParams);
    });

    // Maneja todas las demás rutas usando el controlador predeterminado de Next.js
    server.get('*', (req, res) => {
      return handle(req, res);
    });

    server.listen(port, (err) => {
      if (err) throw err;
      console.log(`> Listo en http://localhost:${port}`);
    });
  })
  .catch((ex) => {
    console.error(ex.stack);
    process.exit(1);
  });

Con esta configuración, cualquier ruta que no sea una página de Next.js será redireccionada a la ruta /specific-page. Mientras tanto, las páginas de Next.js (en este ejemplo, la ruta /post/:id) seguirán siendo manejadas normalmente utilizando el controlador predeterminado de Next.js.

es.davy.ai

¿Tienes una pregunta?

¿Puedes crear una ruta predeterminada en Next.js?

Answer

davy.ai