Alimente datos a un componente Next.js usando getInitialProps

Cuando hablé deagregar contenido dinámico a Next.jstuvimos un problema con la generación dinámica de la página de publicación, porque el componente requería algunos datos por adelantado, y cuando intentamos obtener los datos del archivo JSON:

import { useRouter } from 'next/router'
import posts from '../../posts.json'
export default () => {
const router = useRouter()
const post = posts[router.query.id]
return (
<>
<h1>{post.title}</h1>
<p>{post.content}</p>
</>
)
}

tenemos este error:

¿Cómo resolvemos esto? ¿Y cómo hacemos que SSR funcione para rutas dinámicas?

Debemos proporcionar al componente accesorios, usando una función especial llamadagetInitialProps()que se adjunta al componente.

Para ello, primero nombramos el componente:

const Post = () => {
  //...
}
export default Post

luego le agregamos la función:

const Post = () => {
  //...
}
Post.getInitialProps = () => {
//…
}
export default Post

Esta función obtiene un objeto como argumento, que contiene varias propiedades. En particular, lo que nos interesa ahora es que obtenemos elqueryobject, el que usamos anteriormente para obtener la identificación de la publicación.

Entonces podemos obtenerlo usando eldesestructuración de objetossintaxis:

Post.getInitialProps = ({ query }) => {
  //...
}

Ahora podemos devolver la publicación desde esta función:

Post.getInitialProps = ({ query }) => {
  return {
    post: posts[query.id]
  }
}

Y también podemos eliminar la importación deuseRoutery obtenemos la publicación delpropspropiedad pasada a laPostcomponente:

import posts from '../../posts.json'
const Post = props => {
return (
<div>
<h1>{props.post.title}</h1>
<p>{props.post.content}</p>
</div>
)
}
Post.getInitialProps = ({ query }) => {
return {
post: posts[query.id]
}
}
export default Post

Ahora no habrá ningún error y SSR funcionará como se esperaba, como puede ver al verificar la fuente de la vista:

losgetInitialPropsLa función se ejecutará en el lado del servidor, pero también en el lado del cliente, cuando navegamos a una nueva página usando elLinkcomponente como lo hicimos nosotros.

Es importante tener en cuenta quegetInitialPropsobtiene, en el objeto de contexto que recibe, además delqueryobjetar estas otras propiedades:

• pathname: lapathsección de URL
• asPath- Cadena de la ruta real (incluida la consulta) que se muestra en el navegador

que en el caso de llamarhttp://localhost:3000/blog/testresultará, respectivamente, a:

• /blog/[id]
• /blog/test

Y en el caso de la renderización del lado del servidor, también recibirá:

• req: el objeto de solicitud HTTP
• res: el objeto de respuesta HTTP
• err: un objeto de error

reqyresle resultará familiar si ha realizado alguna codificación Node.js.

Más próximos tutoriales:

• Empezando con Next.js
• Next.js vs Gatsby vs create-react-app
• Cómo instalar Next.js
• Vincular dos páginas en Next.js usando Link
• Contenido dinámico en Next.js con el enrutador
• Alimente datos a un componente Next.js usando getInitialProps
• Aplicar estilo a los componentes de Next.js con CSS
• Precarga de contenido en Next.js
• Usando el enrutador para detectar el enlace activo en Next.js
• Ver fuente para confirmar que SSR está funcionando en Next.js
• Next.js: rellene la etiqueta principal con etiquetas personalizadas
• Implementar una aplicación Next.js en Now
• Next.js: ejecuta código solo en el lado del servidor o del cliente en Next.js
• Implementar una aplicación Next.js en producción
• Cómo analizar los paquetes de aplicaciones Next.js
• Módulos de carga diferida en Next.js
• Agregar un componente contenedor a su aplicación Next.js
• Los íconos agregados por Next.js a su aplicación
• Paquetes de aplicaciones Next.js
• Cómo usar el enrutador Next.js
• Cómo utilizar las rutas de la API de Next.js
• Cómo obtener cookies del lado del servidor en una aplicación Next.js
• Cómo cambiar el puerto de una aplicación Next.js