0
273
ViewsHow to map from API call to params in getStaticPaths?
I'm trying to map params into Next.js getStaticPaths but it doesn't work. Below you can see it works.
But it doesn't work as soon as want to add one more field which is the slug of the article.
The routing looks something like this. index>[username]>[slug] <=== slug is for article.
To simplify the code, the API looks like this.
[
{
id
username
email
},
articles: [
[Object], [Object], [Object],
]
}
]
And inside articles array looks something like this:
articles: [
{
id
title
description
slug
}
]
How do I make it work? How to map username and article's slug to param so that it works?
Edit: I want to have username slug and article slug together so that I can have www.com/[username]/[articleSlug].
1 answers
Answer question0
I'm not sure I understood your issue very well, but you just use getStaticPaths to generate the article url like this:
export async function getStaticPaths() {
const articles = await fetchAPI("/articles")
return {
paths: articles.map((article) => ({
params: {
slug: article.slug,
},
})),
fallback: false,
}
}
Then to get the user and the article data you can use getStaticProps like this:
export async function getStaticProps({ params }) {
const article = (await fetchAPI(`/articles?slug=${params.slug}`))[0]
const users = await fetchAPI("/users")
return {
props: { article, users },
revalidate: 1,
}
}