Flux de données vers un composant Next.js à l'aide de getInitialProps

Comment alimenter en données un composant Next.js à l'aide de getInitialProps

Quand j'ai parlé deajout de contenu dynamique à Next.jsnous avons eu un problème avec la génération dynamique de la page de publication, car le composant nécessitait des données à l'avance, et lorsque nous avons essayé d'obtenir les données du fichier 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>
</>
)
}

nous avons eu cette erreur:

Comment pouvons-nous résoudre ce problème? Et comment faire fonctionner le SSR pour les routes dynamiques?

Nous devons fournir au composant des accessoires, en utilisant une fonction spéciale appeléegetInitialProps()qui est attaché au composant.

Pour ce faire, nous nommons d'abord le composant:

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

puis nous y ajoutons la fonction:

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

Cette fonction obtient un objet comme argument, qui contient plusieurs propriétés. En particulier, ce qui nous intéresse maintenant, c'est que nous obtenons lequeryobject, celui que nous avons utilisé précédemment pour obtenir l'identifiant de l'article.

Nous pouvons donc l'obtenir en utilisant ledéstructuration d'objetssyntaxe:

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

Maintenant, nous pouvons renvoyer le message à partir de cette fonction:

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

Et nous pouvons également supprimer l'importation deuseRouter, et nous obtenons le message dupropspropriété transmise auPostcomposant:

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

Il n'y aura plus d'erreur et SSR fonctionnera comme prévu, comme vous pouvez le voir en vérifiant la source de la vue:

LegetInitialPropsLa fonction sera exécutée côté serveur, mais aussi côté client, lorsque nous naviguons vers une nouvelle page en utilisant leLinkcomposant comme nous l'avons fait.

Il est important de noter quegetInitialPropsobtient, dans l'objet de contexte qu'il reçoit, en plus duqueryobjectez ces autres propriétés:

pathname: lepathsection d'URL
asPath- La chaîne du chemin réel (y compris la requête) s'affiche dans le navigateur

qui dans le cas de l'appelhttp://localhost:3000/blog/testse traduira respectivement par:

/blog/[id]
/blog/test

Et dans le cas du rendu côté serveur, il recevra également:

req: l'objet de requête HTTP
res: l'objet de réponse HTTP
err: un objet d'erreur

reqetresvous sera familier si vous avez effectué un codage Node.js.

Téléchargez mon gratuitManuel Next.js

Flux de données vers un composant Next.js à l'aide de getInitialProps

Comment alimenter en données un composant Next.js à l'aide de getInitialProps

Plus de prochains tutoriels: