J'essaie d'apprendre nextjs. J'ai du mal à mettre au point le routage avec getServerSideProps .
En utilisant une api gratuite, j'ai une liste de pays affichée sur le DOM. Je veux créer un lien dynamique vers un pays pour que les données soient récupérées et affichées pour ce pays spécifique.
Voici mon code jusqu'à présent
const Country = props => (
<Layout>
<h1>{props.country.name}</h1>
<span>{props.country.capital}</span>
</Layout>
);
export async function getServerSideProps(context) {
const { id } = context.query;
const res = await fetch(`https://restcountries.eu/rest/v2/name/${id}`);
const country = await res.json();
console.log(`Fetched place: ${country.name}`);
return { props: { country } };
}
export default Country;
<div className='container'>
<Head>
<title>Countries List</title>
<link rel='icon' href="stackoverflow.com/favicon.ico' />
</Head>
<Layout>
<main>
<h1>
Countries{' '}
<span role='img' aria-label='world emoji'>
</span>
</h1>
<ul>
{countries.map(country => (
<li key={country.name}>
<Link href="stackoverflow.com/p/[id]' as={`/p/${country.name}`}>
<a>{country.name}</a>
</Link>
</li>
))}
</ul>
</main>
</Layout>
</div>
);
export async function getServerSideProps() {
// Call an external API endpoint to get posts.
const res = await fetch('https://restcountries.eu/rest/v2/all');
const countries = await res.json();
// By returning { props: posts }, the Blog component
// will receive `posts` as a prop at build time
return {
props: {
countries,
},
};
}
export default Home;L'URL est acheminée dynamiquement. Par exemple, lorsque vous cliquez sur Afghanistan, l'URL affiche http://localhost:3000/p/Afghanistan .
Mon composant de pays n'affiche cependant rien et undefined est imprimé sur le terminal.
Exemple d'url et de réponse à partir de l'URL : https://restcountries.eu/rest/v2/name/Afghanistan
{
name: "Afghanistan"
}Toutes mes excuses si c'est une question de débutant. J'essaie d'apprendre nextjs
