Use optional catch-all routes with getStaticPaths

Bug report

Describe the bug

I’m trying to build dynamic nested SSG routes with Next. The goal is to be able to create any page using an external data source. I also want this method to cover the root (path /) page, so I’m using optional catch-all routes.

So after enabling experimental optional catch all routes in next.config.js, here is what I wrote:

In pages/[[...slug]].js :

const MyPage = ({ slug }) => {
  return <div>My page, slug {JSON.stringify(slug)}</div>;
};

export async function getStaticPaths() {
  const paths = [
    {
      params: { slug: [] },
    },
    {
      params: { slug: ["home"] },
    },
    {
      params: { slug: ["home", "page"] },
    },
  ];
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  // Make sure params are what we expected
  console.log(params);
  return {
    props: {
      slug: params.slug,
    },
  };
}

export default MyPage;

When I try to access my routes (/, home and /home/page), I get a 404 instead. After running yarn build, I found out Next did this instead:

Page                                                           Size     First Load JS
┌   /_app                                                      3.47 kB        61.1 kB
├ ● /[[...slug]]                                               319 B          61.5 kB
├   ├ /[]
├   ├ /[home]
├   └ /[home/page]
└ ○ /404                                                       3.25 kB        64.4 kB

And in my logs, the values of params were:

1. { slug: [ '[home', 'page]' ] }
2. { slug: [ '[]' ] }
3. { slug: [ '[home]' ] }

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Create a default Next app
2. Create a next.config.js file with this content:

module.exports = {
  experimental: {
    optionalCatchAll: true,
  },
};

1. In the pages folder, delete index.js and create a file called [[...slug]].js instead
2. In that file, paste the code I included above
3. Run yarn build
4. See the result

Expected behavior

Next.js should have created these pages instead:

Page                                                           Size     First Load JS
┌   /_app                                                      3.47 kB        61.1 kB
├ ● /[[...slug]]                                               319 B          61.5 kB
├   ├ /
├   ├ /home
├   └ /home/page
└ ○ /404                                                       3.25 kB        64.4 kB

And I think the values of params in getStaticProps should have been:

1. { slug: [ 'home', 'page' ] }
2. { slug: [ ] }
3. { slug: [ 'home' ] }

System information

• OS: macOS 10.15.5

• Version of Next.js: 9.4.4

• Version of Node.js: 12.18.2

Additional context

My code fine with regular catch-all routes, with a file called [...slug].js and without the root page.

[remidej]

So TLDR:

• The bug does happen on Next 9.4.4 where optional catch-all routes are an experimental feature
• It’s fixed in 9.4.5 (currently the canary release)
• When there’s no slug, getStaticProps’ ctx.params is an empty object

Thanks for the help!

[Timer]

This is the expected behavior. You’ll need to set a default value!

All falsy values passed into getStaticPaths result in the omission of the variable from params.

export async function getStaticProps({ params }) {
  // Make sure params are what we expected
  console.log(params);
  return {
    props: {
      slug: params.slug || null,
    },
  };
}

Or:

export async function getStaticProps({ params: { slug = null } }) {
  return {
    props: {
      slug
    },
  };
}