Next.js - Enrutamiento dinámico
En Next.js, podemos crear rutas de forma dinámica. En este ejemplo, crearemos páginas sobre la marcha y su enrutamiento.
Step 1. Define [id].js file- [id] .js representa la página dinámica donde id será la ruta relativa. Defina este archivo en el directorio pages / post.
Step 2. Define lib/posts.js- posts.js representa los identificadores y el contenido. El directorio lib se creará en el directorio raíz.
[id] .js
Actualice el archivo [id] .js con el método getStaticPaths () que establece las rutas y el método getStaticProps () para obtener el contenido según el id.
import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'
import { getAllPostIds, getPostData } from '../../lib/posts'
export default function Post({ postData }) {
return (
<Container>
{postData.id}
<br />
{postData.title}
<br />
{postData.date}
</Container>
)
}
export async function getStaticPaths() {
const paths = getAllPostIds()
return {
paths,
fallback: false
}
}
export async function getStaticProps({ params }) {
const postData = getPostData(params.id)
return {
props: {
postData
}
}
}
posts.js
posts.js contiene getAllPostIds () para obtener los identificadores y getPostData () para obtener los contenidos correspondientes.
export function getPostData(id) {
const postOne = {
title: 'One',
id: 1,
date: '7/12/2020'
}
const postTwo = {
title: 'Two',
id: 2,
date: '7/12/2020'
}
if(id == 'one'){
return postOne;
}else if(id == 'two'){
return postTwo;
}
}
export function getAllPostIds() {
return [{
params: {
id: 'one'
}
},
{
params: {
id: 'two'
}
}
];
}
Inicie el servidor Next.js
Ejecute el siguiente comando para iniciar el servidor:
npm run dev
> [email protected] dev \Node\nextjs
> next
ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully
Verificar salida
Abra localhost: 3000 / posts / one en un navegador y verá el siguiente resultado.
Abra localhost: 3000 / posts / two en un navegador y verá el siguiente resultado.