Introduzca datos en un componente Next.js mediante getInitialProps

 

 

 

Introduzca datos en un componente next js mediante getinitialprops 1

Cómo introducir datos en un componente Next.js mediante getInitialProps

Cuando hablé sobre agregar contenido dinámico a Next.js, tuvimos 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 / )}

Recibimos este error:

 

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

Debemos proporcionar al componente propiedades, utilizando una función especial llamada getInitialProps()que está asociada 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 recibe un objeto como argumento, que contiene varias propiedades. En particular, lo que nos interesa ahora es que obtengamos el queryobjeto que usamos anteriormente para obtener el ID de la publicación.

Podemos obtenerlo utilizando la sintaxis de desestructuración de objetos :

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 de useRouter, y obtenemos la publicación de la propspropiedad pasada al Postcomponente:

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 espera, como puedes ver al verificar la fuente: Camas articuladas

La getInitialPropsfunción se ejecutará en el lado del servidor, pero también en el lado del cliente, cuando naveguemos a una nueva página usando el Linkcomponente como lo hicimos.

Es importante tener en cuenta que getInitialPropsobtiene, en el contexto del objeto que recibe, además del queryobjeto estas otras propiedades:

  • pathname:la pathsección de URL
  • asPath– La cadena de la ruta real (incluida la consulta) se muestra en el navegador

Lo cual en el caso de llamada https://localhost:3000/blog/testresultará respectivamente:

  • /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

reqy reste resultará familiar si has codificado con Node.js.

Tips de Next.js (enrutador de páginas)




Tal vez te puede interesar:

  1. Introducción a React
  2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
  3. Cómo cambiar el valor de un nodo DOM
  4. Cómo comprobar si un elemento DOM tiene una clase

Introduzca datos en un componente Next.js mediante getInitialProps

Cuando hablé sobre agregar contenido dinámico a Next.js, tuvimos un problema con la generación dinámica de la página de publicación, porque el componente

programar

es

https://aprendeprogramando.es/static/images/programar-introduzca-datos-en-un-componente-next-2200-0.jpg

2024-11-03

 

Introduzca datos en un componente next js mediante getinitialprops 1
Introduzca datos en un componente next js mediante getinitialprops 1

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences