Mapping page to multiple routes

[milenazuccarelli]

Hey guys,

I have a dynamic route which looks like this:
/chapters/[slug].js
But I would like the first chapter /chapters/chapter-i to also be the landing page/index for the website. Could anyone suggest how I should go about doing this? (I'm not using a custom server).

Thanks!

[TommySorensen]

Optional Catch all routes is what you are looking for 😉
https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routes

[milenazuccarelli]

Thank you! Maybe I'm missing something though, do you know how I can map pages/index.js to pages/chapters/chapter-i ?

[TommySorensen]

Like mentioned in the documentation just create a Catch all route under the pages folder. This page will be hit for all urls.

pages/[[...slug]].js

[alanqchen]

I would try looking at rewrites or redirects, depending on if you want to original URL to change or not.

For example, you could rewrite / to /chapters/chapter-i:

module.exports = {
  async rewrites() {
    return [
      {
        source: '/',
        destination: '/chapters/chapter-i',
      },
    ]
  },
}