4

Dynamic Route en Next js 9 y Now v2

Uno de los problemas con los que más lidié en Next js fue poder crear las rutas y hacer el despliegue a la última versión de now (v2). En el momento que se refrescaba el navegador salia un error 404. Así que consulté hasta que di con la solución cambiando next routes por la forma de rutas que se propone en Next js 9.

  1. Primer paso sería actualizar next:
npm i next@latest react@latest react-dom@latest

2.Usar los scripts dev, build, start y now-build

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "now-build": "next build"
  },
  1. Crear un archivo now.json en la raíz del proyecto con la configuración de Now
{
    "version": 2,
    "name": "[Nombre del proyecto]",
    "alias": [
        "[dominio o alias del proyecto]"
    ],
    "builds": [
        {
            "src": "next.config.js",
            "use": "@now/next"
        }
    ]
}
  1. Crear el archivo next.config.js con lo siguiente:
module.exports = {
    target: 'serverless'
}
  1. Por último los archivos dentro de la carpeta pages deben tener la estructura que se quiere en las rutas. Si por ejemplo se quiere la ruta https://midominio.com/channel/:id se debe crear la carpeta blog y dentro de esta el archivo [id].js para que la dirección del archivo sea /pages/channel/[id].js
    ya con esto es posible usar la query.id para asignarla donde se necesite dentro del archivo.
let { id } = query
  1. Para usar los links se usa la siguiente estructura:
<Link href="/channel/[id]"as={`/channel/${channel.id}`} ><a>Ver más</a></Link>

La información de dynamic routes oficial está en el siguiente link:
https://nextjs.org/blog/next-9#dynamic-route-segments

Espero les sirva 😃

Escribe tu comentario
+ 2