How to get paths in getStaticPaths with locales in Next.js?

Question

I'm using Strapi as a CMS, where I query for slugs, and I would like to have statically generated pages using getStaticPaths and getStaticProps in Next.js.

As I need to work with multiple locales, I have to map through the locales and get paths for each "Announcements" I'm getting from my query.

The error message I'm getting is:

Error: A required parameter (slug) was not provided as a string in getStaticPaths for /updates/announcements/[slug]

This is my getStaticPaths:

export async function getStaticPaths({ locales }: any) {
  const paths = await (
    await Promise.all(
      locales.map(async (locale: any) => {
        const { data } = await client.query({
          query: gql`
            query Announcements {
              announcements(locale: "${locale}") {
                data {
                  attributes {
                    slug
                    locale
                  }
                }
              }
            }
          `,
        });
        return {
          announcements: data.announcements.data,
          locale,
        };
      })
    )
  ).reduce((acc, item) => {
    item.announcements.map((p: any) => {
      acc.push({
        params: {
          slug:
            p.attributes.slug === "/" ? false : p.attributes.slug.split("/"),
        },
        locale: p.attributes.locale,
      });
      return p;
    });
    return acc;
  }, []);

  return {
    paths,
    fallback: false,
  };
}

If I console.log(paths) I get the following in the terminal:

[
  { params: { slug: [Array] }, locale: 'en' },
  { params: { slug: [Array] }, locale: 'en' },
  { params: { slug: [Array] }, locale: 'en' },
  { params: { slug: [Array] }, locale: 'da' },
  { params: { slug: [Array] }, locale: 'sv' },
  { params: { slug: [Array] }, locale: 'nb' }
]

I might think that Next.js don't want the slug to be an array, but I'm not entirely sure. What am I doing wrong?

Answer 1

You page uses dynamic routes named ( /updates/announcements/[slug] ), therefore the param slug is required in paths .

From the Next.js getStaticPaths documentation :

The paths key determines which paths will be pre-rendered. For example, suppose that you have a page that uses Dynamic Routes named pages/posts/[id].js . If you export getStaticPaths from this page and return the following for paths :

 return { paths: [ { params: { id: '1' }}, { params: { id: '2' }, // with i18n configured the locale for the path can be returned as well locale: "en", }, ], fallback: ... }

Then, Next.js will statically generate /posts/1 and /posts/2 during next build using the page component in pages/posts/[id].js .

The slug param can only be a string since it's used to generate routes. As you found when logging paths , you were trying to pass slug: [Array] .

The problem in the question's code snippet is this expression to assign a slug :

// ...
params: {
  slug: p.attributes.slug === "/" ? false : p.attributes.slug.split("/"), // 👈
},
// ...

This expression will either assign false (boolean) or an array of substrings (see the docs for String.prototype.split() ).

In this case, as confirmed in a comment above, simply passing the slug as a string solves the issue.

The confusion likely came from following a tutorial that uses an optional catch-all route ( pages/[[...slug]] ) instead of regular dynamic routes ( pages/[slug] ) ( ref ).

From the Next.js getStaticPaths documentation again:

• If the page name is pages/posts/[postId]/[commentId] , then params should contain postId and commentId .
• If the page name uses catch-all routes like pages/[...slug] , then params should contain slug (which is an array). If this array is ['hello', 'world'] , then Next.js will statically generate the page at /hello/world .
• If the page uses an optional catch-all route, use null , [] , undefined or false to render the root-most route. For example, if you supply slug: false for pages/[[...slug]] , Next.js will statically generate the page / .