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 lequery
object, 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 duprops
propriété transmise auPost
composant:
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:
LegetInitialProps
La fonction sera exécutée côté serveur, mais aussi côté client, lorsque nous naviguons vers une nouvelle page en utilisant leLink
composant comme nous l'avons fait.
Il est important de noter quegetInitialProps
obtient, dans l'objet de contexte qu'il reçoit, en plus duquery
objectez ces autres propriétés:
pathname
: lepath
section d'URLasPath
- 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/test
se 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 HTTPres
: l'objet de réponse HTTPerr
: un objet d'erreur
req
etres
vous sera familier si vous avez effectué un codage Node.js.
Téléchargez mon gratuitManuel Next.js
Plus de prochains tutoriels:
- Premiers pas avec Next.js
- Next.js vs Gatsby vs create-react-app
- Comment installer Next.js
- Lier deux pages dans Next.js à l'aide de Link
- Contenu dynamique dans Next.js avec le routeur
- Flux de données vers un composant Next.js à l'aide de getInitialProps
- Styliser les composants Next.js à l'aide de CSS
- Pré-extraire du contenu dans Next.js
- Utilisation du routeur pour détecter le lien actif dans Next.js
- Afficher la source pour confirmer que SSR fonctionne dans Next.js
- Next.js: remplissez la balise head avec des balises personnalisées
- Déployer une application Next.js maintenant
- Next.js: exécutez le code uniquement côté serveur ou côté client dans Next.js
- Déployer une application Next.js en production
- Comment analyser les bundles d'applications Next.js
- Modules de chargement paresseux dans Next.js
- Ajout d'un composant wrapper à votre application Next.js
- Les icônes ajoutées par Next.js à votre application
- Les offres groupées d'applications Next.js
- Comment utiliser le routeur Next.js
- Comment utiliser les routes d'API Next.js
- Comment obtenir des cookies côté serveur dans une application Next.js
- Comment changer le port d'une application Next.js