Next.js dynamic routing adds to existing path

Question

In my Next.js blog with Strapi CMS, I am trying to sort the posts based on its category. I created a dynamic route for categories [id].js. It is using getStaticPaths like so:

export async function getStaticPaths() {
const categories = await getCategories()
return {
    paths: categories.map((category) => `/categories/${category.id}`) || [],
    fallback: false,
}

I am using a dropdown to filter categories. For example, if I select category 1, the path is like this http://localhost:3000/categories/1. Till here it's fine.

But the dropdown is still rendered on the page and when I select category 2. Now, the path is http://localhost:3000/categories/categories/2 which of course results in a 404 error.

the expected result is http://localhost:3000/categories/2

The next/link component I am using for dropdown elements looks like so:

<Link href="/categories/[id]" as={`/categories/${category.id}`}>
      <a>{category.name}</a>
</Link>

I know I did some mistake, but can't figure out what it is.

However, I have a [slug].js for posts, which renders more posts too. That routes to proper posts without adding the extra /posts for the path. But it is not working in a similar way for categories. Kindly help.

Nilesh Patel · Accepted Answer · 2020-12-27 15:24:10Z

1

It should return id only.

export async function getStaticPaths() {
  const categories = await getCategories()
  const paths = categories.map((category) => ({
    params: { id: category.id.toString() },
  }))
  return {
      paths,
      fallback: false,
  }
}

edited Dec 27, 2020 at 15:24

answered Dec 27, 2020 at 12:28

Nilesh Patel

3,3079 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sudo Over a year ago

Thanks for the response. Tried this, did not work.

Nilesh Patel Over a year ago

code updated.. please see if this work.. it worked for me.

Nilesh Patel Over a year ago

id has to be string => params: { id: category.id.toString() }

sudo Over a year ago

I don't think that is the issue. If I type the correct address manually, the required page renders. It's just that extra ` /categories` is added . btw, tried to convert it to a string. did not work

de3 · Accepted Answer · 2020-12-27 12:27:54Z

0

Why don't you use the parmas property as in this example? https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation

answered Dec 27, 2020 at 12:27

de3

2,0006 gold badges25 silver badges42 bronze badges

2 Comments

sudo Over a year ago

Thanks for the response. Do you mean as @Nilesh Patel mentioned? That did not work

sudo Over a year ago

export async function getStaticProps({ params }) {     const categories = await getCategories()     const posts = await getPostByCategory(params.id)     const category = posts[0]?.category.name.toString() || ''      return {         props: { posts, categories, category },         revalidate: 1,     }; }

sudo · Accepted Answer · 2020-12-27 23:50:10Z

0

I am not sure if this is the right way to solve this, I just added a condition to check if there is already /categories in the pathname. If so, I am not adding /categories to href link like this:

    <Link as={this.props.router.pathname.includes("categories") ? `${category.id}` : `categories/${category.id}`}
          href={this.props.router.pathname.includes("categories") ? "[id]" : "categories/[id]"}>
      <a>{category.name}</a>
   </Link>

Please let me know if there is any better solution

edited Dec 27, 2020 at 23:50

answered Dec 27, 2020 at 22:47

sudo

1152 silver badges8 bronze badges

Collectives™ on Stack Overflow

Next.js dynamic routing adds to existing path

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related