Alimente datos a un componente Next.js usando getInitialProps

Cómo alimentar 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.

Descarga mi gratisManual de Next.js


Más próximos tutoriales: