Search code examples
javascriptnext.jsinternationalizationserver-side-rendering

Prevent getStaticPaths running for specific locale


Is it possible that you prevent Next.js getStaticPaths for generating static pages for a specific locale?

In my next config:

  i18n: {
    locales: ['default', 'en', 'hu', 'de', 'cz', 'eu', 'sl'],
    defaultLocale: 'default',
    localeDetection: true,
  },

That's just because we need the locale all the time, and by the default, Next.js does not support it, so we have to use the middleware trick followed by the official Next.js docs: https://github.com/vercel/next.js/discussions/18419

But now when I want to generate sites, I don't want to generate pages like

  • /default/products/id1
  • /default/products/id2

How can I prevent Next.js doing this? Because this does not work: For my faq page where /help/[maincategory]/[subcategory]/[help].

Using slice (I will skip the default locale):

 locales.slice(1).map((locale) => {
        pages.map((item) => {
          item.data.mainTabList?.[locale]?.map((main, mainidx) => {
            main.subTabList?.map((sub, subidx) => {
              questions.map((help) => {
                help.data.helplist?.[locale]?.map((title) => {
                  const urllink = {
                    maincategory: urlConverter(main.tab),
                    subcategory: urlConverter(sub.tab),
                    help: title.url
                  }
    
                  routes.push(urllink)
                })
              })
            })
          })
        })
      })

  const paths = routes.map((doc) => ({
    params: {
      maincategory: `${doc.maincategory}`,
      subcategory: `${doc.subcategory}`,
      help: doc.help?.toLowerCase(),
    },
  }))

Can anyone help me how to solve this, that /default pages won't get generated, because that's just a hacky way for my locale prefix, we won't use it anywhere.


Solution

  • It's possible to control which locales getStaticPaths will generate paths for by returning the desired locales in the paths array.

    From the i18n Dynamic Routing documentation:

    For pages using getStaticProps with Dynamic Routes, all locale variants of the page desired to be prerendered need to be returned from getStaticPaths. Along with the params object returned for paths, you can also return a locale field specifying which locale you want to render.


    In your case, your getStaticPaths function should roughly look like the following.

    export const getStaticPaths = ({ locales }) => {
        // Your own logic
        
        // Filter out the `default` locale, and map through the remaining locales
        locales.filter((locale) => locale !== 'default').map((locale) => {
            pages.map((item) => {
                item.data.mainTabList?.[locale]?.map((main, mainidx) => {
                    main.subTabList?.map((sub, subidx) => {
                        questions.map((help) => {
                            help.data.helplist?.[locale]?.map((title) => {
                                const urlLink = {
                                    maincategory: urlConverter(main.tab),
                                    subcategory: urlConverter(sub.tab),
                                    help: title.url,
                                    locale // Also push current `locale` value to be used in `paths` array
                                }
                                routes.push(urlLink)
                            })
                        })
                    })
                })
            })
        })
    
        const paths = routes.map((doc) => ({
            params: {
                maincategory: `${doc.maincategory}`,
                subcategory: `${doc.subcategory}`,
                help: doc.help?.toLowerCase(),
            },
            locale: doc.locale // Pass `locale` value here
        }))
    
        return {
            paths,
            fallback: false
        }
    }