Next.js: i18n routing with getStaticProps and getStaticPaths, first item provided to getStaticProps is empty

[wiesson]

Bug report

Describe the bug

It looks like that the first element provided to getStaticProps is empty while using i18n and getStaticPaths:

export const getStaticPaths = async ({ locales }) => {
  // generate dummy pages
  const items = [
    "123_a", "234_b", "345_c", "456_d",
  ];

  // create paths
  const paths = locales.reduce(
    (acc, next) => [
      ...acc,
      ...items.map((slug) => ({
        params: {
          slug,
        },
        locale: next,
      })),
    ],
    []
  );

  return {
    paths,
    fallback: true,
  };

Generated paths:

[
  { params: { slug: "123_a" }, locale: "de" },
  { params: { slug: "234_b" }, locale: "de" },
  { params: { slug: "345_c" }, locale: "de" },
  { params: { slug: "456_d" }, locale: "de" },
  { params: { slug: "123_a" }, locale: "en" },
  { params: { slug: "234_b" }, locale: "en" },
  { params: { slug: "345_c" }, locale: "en" },
  { params: { slug: "456_d" }, locale: "en" },
  { params: { slug: "123_a" }, locale: "fr" },
  { params: { slug: "234_b" }, locale: "fr" },
  { params: { slug: "345_c" }, locale: "fr" },
  { params: { slug: "456_d" }, locale: "fr" },
  { params: { slug: "123_a" }, locale: "it" },
  { params: { slug: "234_b" }, locale: "it" },
  { params: { slug: "345_c" }, locale: "it" },
  { params: { slug: "456_d" }, locale: "it" },
];

getStaticProps

export const getStaticProps = async ({ params, locale }) => {
  const { slug } = params;

  const id = slug.match(/\d{3}/)[0]; // fails, because slug is undefined

  return {
    props: { slug, id, locale },
    revalidate: 1,
  };
};

With the first item, params is empty, but locale is set (de).

Error message:

18:24:27.197    info  - Generating static pages (0/46)
18:24:27.444    info  - Generating static pages (11/46)
18:24:27.446    Unhandled error during request: TypeError: Cannot read property 'match' of undefined
18:24:27.447        at getStaticProps (/vercel/workpath0/.next/serverless/pages/items/[slug].js:1059:19)
18:24:27.447        at renderToHTML (/vercel/workpath0/node_modules/next/dist/next-server/server/render.js:26:115)
18:24:27.447        at async renderReqToHTML (/vercel/workpath0/.next/serverless/pages/items/[slug].js:890:22)
18:24:27.447        at async Object.exportPage [as default] (/vercel/workpath0/node_modules/next/dist/export/worker.js:12:92)
18:24:27.447    Error occurred prerendering page "/items/[slug]". Read more: https://err.sh/next.js/prerender-error
18:24:27.447    TypeError: Cannot read property 'match' of undefined
18:24:27.448        at getStaticProps (/vercel/workpath0/.next/serverless/pages/items/[slug].js:1059:19)
18:24:27.448        at renderToHTML (/vercel/workpath0/node_modules/next/dist/next-server/server/render.js:26:115)
18:24:27.448        at async renderReqToHTML (/vercel/workpath0/.next/serverless/pages/items/[slug].js:890:22)
18:24:27.448        at async Object.exportPage [as default] (/vercel/workpath0/node_modules/next/dist/export/worker.js:12:92)
18:24:27.455    info  - Generating static pages (22/46)
18:24:27.464    info  - Generating static pages (34/46)
18:24:27.494    info  - Generating static pages (46/46)
18:24:27.494    > Build error occurred
18:24:27.496    Error: Export encountered errors on following paths:
18:24:27.496        /items/[slug]
18:24:27.496        at exportApp (/vercel/workpath0/node_modules/next/dist/export/index.js:25:1103)
18:24:27.496        at runMicrotasks (<anonymous>)
18:24:27.496        at processTicksAndRejections (internal/process/task_queues.js:97:5)
18:24:27.496        at async build (/vercel/workpath0/node_modules/next/dist/build/index.js:39:69)
18:24:27.510    npm ERR! code ELIFECYCLE
18:24:27.510    npm ERR! errno 1
18:24:27.511    npm ERR! [email protected] build: `next build`
18:24:27.511    npm ERR! Exit status 1
18:24:27.511    npm ERR! 
18:24:27.511    npm ERR! Failed at the [email protected] build script.
18:24:27.512    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
18:24:27.518    npm ERR! A complete log of this run can be found in:
18:24:27.518    npm ERR!     /vercel/.npm/_logs/2020-10-28T17_24_27_512Z-debug.log
18:24:27.523    Error: Command "npm run build" exited with 1
18:24:29.426    Done with "package.json"

To Reproduce

Example: https://github.com/wiesson/nextjs-i18n-static-error

Expected behavior

I expect that getStaticProps only receives items that has been defined by getStaticPaths

Screenshots

If applicable, add screenshots to help explain your problem.

System information

Deployed on vercel.

[wiesson]

In addition, If I add something like this to fix the build,

  if (!slug) {
    return {
      notFound: true,
      props: {},
      revalidate: 1,
    };
  }

It looks like that revalidation has been disabled for the whole locale.

[domcoleman]

This is failing because you have fallback: true along with the reason you commented in the code above.
Make sure that you can call the index of slug.match first and it builds everything for me.

const slugMatch = slug && slug.match(/\d{3}/);
const id = slugMatch && slugMatch[0];

[wiesson]

Yes, sure - I have added fallback: true to enable static generation for additional pages. I did not expect that empty data is passed during the build and if I remember it correctly, it wasn't the case for Next < v10.

It looks like that the correct way to handle this case is to return notFound: true. With your approach, I'm passing wrong parameters because I expect that a slug is given.

The real world use case is that I take the slug or id to fetch a post from an API, I just faked it here.

[timneutkens]

I did not expect that empty data is passed during the build and if I remember it correctly, it wasn't the case for Next < v10.

Rendering the page without data was already the default behavior when using fallback. However this can be handled better so marked it as a bug 👍