Creating a home page dynamically in NextJs

I'm trying to create all my pages using NextJs with the slugs/uri I get when fetching the data, however when trying to create the home page it says.

Error: The provided path `/` does not match the page: `/[slug]`.

[slug].tsx is located in the page folder. I removed the index.js since I would like to have the home page the same page layout as other pages.

Currently getting the static paths like this:

export async function getStaticPaths() {
  const allPages = await getAllPostsWithSlug();

  return {
    paths: allPages.edges.map(({ node }) => `${node.uri}`) || [],
    fallback: true,
  };
}

The error I got makes sense, but I couldn't really find a solution to create my home page in the same page template.

Solution 1:

As per the documentation, you can use an optional catch-all route.

Name your page file [[...slug]].js, and then use something like the this for the paths prop in getStaticPaths:

paths: [
  { params: { slug: [] } },
  { params: { slug: ['foo'] } },
  { params: { slug: ['bar'] } },
]

FWIW - if you want to share components from the main template (i.e. header, nav, footer etc), I recommend using a custom _app.js page. If your homepage really is identical to your other pages, it might be worth re-visiting the design!

Good luck!