Set root to different page

[benjaminmateev]

Hey there,

I have truly fallen in love with Vercel and Next.js and we have been building some simple apps with it over the past few months.

I stumbled on to a question that I cannot find a solution to so far. We started with a regular index.js page, and have another like this list/[id].js Now we want the index page to default to something like list/foo with foo being the id that loads by default. So far in index.js we redirect to the page but I feel that's not the best solution and I wonder where there is a setting we can use that sets domain.com/ to list/foo

Is there something like that? I found something in the vercel documentation but that did not work and I found a stark overflow that said it was outdated.

Do I use routes with for this? How do I set them now with the latest next.js version with Vercel if that's the right solution?

Cheers,
Benjamin

[Tylerian]

You can use the experimental Next.js Custom Routes redirect feature in your next.config.js for doing exactly that.

Example usage

// next.config.js
module.exports = {
  async redirects() {
    return [
      // 307 temporary redirect
      {
        source: "/",
        destination: "/under-construction",
        permanent: false,
      },
      // 308 permanent redirect
      {
        source: "/posts",
        destination: "/blog",
        permanent: true // permanent redirect
      },
      // With parameter and custom status code
      {
        source: "/photos/:id",
        destination: "/photo/:id",
        statusCode: 303 // see other
      }
    ];
  }
};