How to map from API call to params in getStaticPaths?

Question

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].

Does this answer your question: [How to generate static pages with nested dynamic routes](https://stackoverflow.com/questions/65550644/how-to-generate-static-pages-with-nested-dynamic-routes)? You need to pass both `username` _and_ `slug` in the params objects inside your `getStaticPaths`. — juliomalves, Oct 17 '21 at 11:17
Also, please add your code as a snippet, do _not_ use images for code. — juliomalves, Oct 17 '21 at 11:22

score -1 · Answer 1 · edited Oct 16 '21 at 15:35

-1

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,
  }
}

edited Oct 16 '21 at 15:35

Dharman

30,962
25
85
135

answered Oct 16 '21 at 15:30

ASG

513
3
10

I have no problem getting the params… but when I try to add one more param it becomes a problem. This page is a dynamic page with dynamic url. The url is www.[username]/[articleSlug] so adding just the article url won’t be enough, I need the username param too. – thenotorious Oct 16 '21 at 15:35
You should do that in the username page then in the same way we've done for articles above. Son when you got to www.[username] you will see username info in that page. If you go to www.[username]/[articleSlug] you'll see the article info in there. This is how it works in next.js, if you don't need a page for username then you can just append it at the end with ?username='Jon' This will point you in the right direction https://nextjs.org/docs/routing/dynamic-routes - please upvote if this was of a help for you :) – ASG Oct 16 '21 at 15:44
I have that configured in my username page already. It’s working perfectly fine whenever I browse www.[username] but now I want to have an article that’s linked to a profile like so [username]/[articleSlug] but to do that I need to have my folders configured like so: pages/[username]/[slug] username folder has index.jsx which represents [username] param whereas [slug] folder is a child folder of username and that’s also with index.jsx which represents [slug]. I can’t have username page have username param and not slug page not have it too, it has to be consistent otherwise I’ll get an error. – thenotorious Oct 16 '21 at 15:48
how does this looks on your folder tree? – ASG Oct 16 '21 at 15:49
Edited my comment after your latest comment. Please have a look at above. – thenotorious Oct 16 '21 at 15:51

How to map from API call to params in getStaticPaths?

1 Answers1