Explicaremos el enrutamiento en Next.js: pasos básicos, considerando que Next.js es un marco de React que se envÃa con las funciones que necesita para la producción.
Cómo funciona el enrutamiento en Next.js
Next.js usa el sistema de archivos para habilitar el enrutamiento en la aplicación. Next trata de forma automática los archivos con extensiones .js, .jsx, .ts, o .tsx bajo el directorio pages como una ruta.
Una página en Next.js es un componente de React que tiene una ruta basada en su nombre de archivo.
A continuación, se presenta una estructura de carpetas como ejemplo:
├── pages
| ├── index.js
| ├── contact.js
| └── my-folder
| ├── about.js
| └── index.js
Cómo vincular páginas
De forma predeterminada, Next.js procesa cada página para que su aplicación sea rápida y fácil de usar. Utiliza el componente Link proporcionado por next / link para habilitar las transiciones entre rutas.
import Link from “next/link”
export default function IndexPage() {
return (
<div>
<Link href=”/contact”>
<a>My second page</a>
</Link>
<Link href=”/my-folder/about”>
<a>My third page</a>
</Link>
</div>
)
}
Aquà hay dos rutas:
- El primer enlace lleva a la página. http://localhost:3000/contact
- El segundo enlace lleva a la página. http://localhost:3000/my-folder/about
El componente Link puede recibir varias propiedades, pero solo hrefse requiere el atributo. AquÃ, usamos una <a></a>etiqueta como componente secundario para vincular páginas. Pero, alternativamente, puede usar cualquier elemento que admita el evento onClick en el componente Link.
Cómo pasar parámetros de ruta
Next.js permite pasar parámetros de ruta y luego recuperar los datos usando el useRouterhook o getInitialProps y da acceso al objeto del enrutador que contiene los parámetros.
index.js
import Link from “next/link”
export default function IndexPage() {
return (
<Link
href={{
pathname: “/about”,
query: { id: “test” },
}}
>
<a>About page</a>
</Link>
)
}
Como se puede ver, en lugar de proporcionar una cadena al atributo href, se pasa un objeto que contiene una propiedad pathname. Esta es la ruta, junto con un elemento de consulta que contiene los datos.
about.js
import { useRouter } from “next/router”
export default function AboutPage() {
const router = useRouter()
const {
query: { id },
} = router
return <div>About us: {id}</div>
}
AquÃ, se debe importar el gancho useRouter para pasar los datos. A continuación, se extrae del objeto query mediante la desestructuración.
Si está utilizando la representación del lado del servidor, debe usar getInitialProps para obtener los datos.
export default function AboutPage({ id }) {
return <div>About us: {id}</div>
}
AboutPage.getInitialProps = ({ query: { id } }) => {
return { id }
}
Rutas dinámicas
Next.js le permite definir rutas dinámicas en su aplicación usando los corchetes ( [param]). En lugar de establecer un nombre estático en sus páginas, se puede utilizar uno dinámico.
Se puede usar esta estructura de carpetas como ejemplo:
├── pages
| ├── index.js
| ├── [slug].js
| └── my-folder
| ├── [id].js
| └── index.js
Next.js obtendrá los parámetros de ruta pasados ​​y luego los usará como un nombre para la ruta.
index.js
export default function IndexPage() {
return (
<ul>
<li>
<Link href=”/”>
<a>Home</a>
</Link>
</li>
<li>
<Link href=”/[slug]” as=”/my-slug”>
<a>First Route</a>
</Link>
</li>
<li>
<Link href=”/my-folder/[id]” as=”/my-folder/my-id”>
<a>Second Route</a>
</Link>
</li>
</ul>
)
}
AquÃ, hay que definir el valor del atributo as porque la ruta es dinámica. El nombre de la ruta será el que establezcas en el accesorio as.
[slug] .js
import { useRouter } from “next/router”
export default function DynamicPage() {
const router = useRouter()
const {
query: { id },
} = router
return <div>The dynamic route is {id}</div>
}
También se puede obtener los parámetros de ruta con el gancho useRouter en el cliente o getInitialPropsen el servidor.
mi-carpeta / [id] .js
export default function MyDynamicPage({ example }) {
return <div>My example is {example}</div>
}
MyDynamicPage.getInitialProps = ({ query: { example } }) => {
return { example }
}
AquÃ, usamos getInitialProps para obtener la ruta dinámica.
Rutas anidadas dinámicas
Con Next.js, también puede anidar rutas dinámicas con los corchetes ( [param]).
Se puede considerar esta estructura de archivo:
├── pages
| ├── index.js
| └── [dynamic]
| └── [id].js
index.js
export default function IndexPage() {
return (
<ul>
<li>
<Link href=”/”>
<a>Home</a>
</Link>
</li>
<li>
<Link href=”/[dynamic]/[id]” as=”/my-folder/my-id”>
<a>Dynamic nested Route</a>
</Link>
</li>
</ul>
)
}
Como se puede ver aquÃ, se puede establecer los valores dinámicos en el atributo as como se hizo en el ejemplo anterior. Pero esta vez, hay que definir el nombre de la carpeta y su archivo.
import { useRouter } from “next/router”
export default function DynamicPage() {
const router = useRouter()
const {
query: { dynamic, id },
} = router
return (
<div>
Data: {dynamic} – {id}
</div>
)
}
AquÃ, hay que sacar los parámetros de ruta del objeto de consulta con el gancho useRouter.
LeÃste: Enrutamiento en Next.js: pasos básicos, te recomendamos: Cómo implementar fácilmente una app Fullstack Next.js con Vercel
Te invitamos a que nos sigas en nuestras redes sociales: Facebook, Twitter, Instagram y Youtube con el perfil:Â @tortugacode
