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 query
objeto 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 props
propiedad pasada al Post
componente:
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 getInitialProps
funció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 Link
componente como lo hicimos.
Es importante tener en cuenta que getInitialProps
obtiene, en el contexto del objeto que recibe, además del query
objeto estas otras propiedades:
pathname
:lapath
sección de URLasPath
– 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/test
resultará 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 HTTPres
: el objeto de respuesta HTTPerr
: un objeto de error
req
y res
te resultará familiar si has codificado con Node.js.
Tips de Next.js (enrutador de páginas)
Tal vez te puede interesar:
- Introducción a React
- Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
- Cómo cambiar el valor de un nodo DOM
- 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
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