title: Next.js dynamic routing adds to existing path
body: <p>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:</p>
  <pre><code>export async function getStaticPaths() {
  const categories = await getCategories()
  return {
      paths: categories.map((category) =&gt; `/categories/${category.id}`) || [],
      fallback: false,
  }
  </code></pre>
  <p>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.</p>
  <p>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.</p>
  <p>the expected result is http://localhost:3000/categories/2</p>
  <p>The next/link component I am using for dropdown elements looks like so:</p>
  <pre><code>&lt;Link href=&quot;/categories/[id]&quot; as={`/categories/${category.id}`}&gt;
        &lt;a&gt;{category.name}&lt;/a&gt;
  &lt;/Link&gt;
  </code></pre>
  <p>I know I did some mistake, but can't figure out what it is.</p>
  <p>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.</p>