Avoid running getStaticPaths for a specific locale

Question

Avoid running getStaticPaths for a specific locale

Is there a way to prevent Next.js getStaticPaths from generating static pages for a specific locale?

In my Next.js configuration:

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

We always need the locale, which is not supported by Next.js by default. To work around this, we have to use the middleware trick as described in the official Next.js documentation: https://github.com/vercel/next.js/discussions/18419

However, I do not want Next.js to generate pages like:

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

How can I prevent this behavior? The current method I tried with slice is not working:

 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(),
    },
  }))

I need help in finding a solution to prevent the generation of /default pages, as this is just a workaround for my locale prefix and will not be used anywhere.

javascript next.js internationalization server-side-rendering

Answer 1

Answer №1

To specify the locales for which getStaticPaths generates paths, you can return the desired locales in the paths array.

According to the i18n Dynamic Routing documentation:

If you are using getStaticProps with Dynamic Routes for your pages, you need to return all locale variants of the page that you want to prerender from getStaticPaths. In addition to the params object for paths, you should also include a locale field to specify which locale to render.

In your situation, your getStaticPaths function should resemble the following code snippet.

export const getStaticPaths = ({ locales }) => {
    // Your logic here
    
    // Exclude the `default` locale and iterate over 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 // Include the current `locale` value in the `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 the `locale` value here
    }))

    return {
        paths,
        fallback: false
    }
}

Answer 2

To specify the locales for which getStaticPaths generates paths, you can return the desired locales in the paths array.

According to the i18n Dynamic Routing documentation:

If you are using getStaticProps with Dynamic Routes for your pages, you need to return all locale variants of the page that you want to prerender from getStaticPaths. In addition to the params object for paths, you should also include a locale field to specify which locale to render.

In your situation, your getStaticPaths function should resemble the following code snippet.

export const getStaticPaths = ({ locales }) => {
    // Your logic here
    
    // Exclude the `default` locale and iterate over 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 // Include the current `locale` value in the `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 the `locale` value here
    }))

    return {
        paths,
        fallback: false
    }
}

Answer 3

Answer №2

According to the official guidelines on getStaticProps:

For static pages using getStaticProps that are not dynamic, a version is created for each language as mentioned above. getStaticProps is invoked with each language that needs to be displayed.

If you wish to exclude a specific language from being pre-rendered, you can add notFound: true in getStaticProps which will prevent that version of the page from being generated.

export async function getStaticProps(ctx: GetStaticPropsContext) {
  if (ctx.locale === 'none') { // or check "default"
    return {
      notFound: true,
    }
  }

  return {
    props: {},
    revalidate: 3600,
  }
}

Answer 4

According to the official guidelines on getStaticProps:

For static pages using getStaticProps that are not dynamic, a version is created for each language as mentioned above. getStaticProps is invoked with each language that needs to be displayed.

If you wish to exclude a specific language from being pre-rendered, you can add notFound: true in getStaticProps which will prevent that version of the page from being generated.

export async function getStaticProps(ctx: GetStaticPropsContext) {
  if (ctx.locale === 'none') { // or check "default"
    return {
      notFound: true,
    }
  }

  return {
    props: {},
    revalidate: 3600,
  }
}

Avoid running getStaticPaths for a specific locale

Answer №1

Answer №2

Similar questions

Storing a MySQL query result in a global array in a Node.js environment

Remove any errors as soon as the input field becomes valid

conceal menu upon click (gradually disappear)

"Refreshing the page with Next.js version 13.5 by clicking on the link

What are the steps for implementing ABI in Next.js?

How can the Node app utilize an HTML page to reference another JavaScript file? Ran into an unexpected syntax error: `Uncaught SyntaxError: Unexpected token '<

Highcharts JS encountered an error: x[(intermediate value)(intermediate value)(intermediate value)] is not a valid constructor

Adding a Material UI Tooltip to the header name of a Material UI Datagrid - a step-by-step guide!

The functionality of the onclick button input is not functioning properly in the Google

Exploring TingoDB: Trouble encountered when passing global variable to insert operation

Ways to forward a parameter to a different web address?

Displaying a random number triggers a snackbar notification in a ReactJS application

What are the steps to set up i18next in my HTML?

Exploring the integration of JSONP with the unmatched features of Google

Revamp the code by implementing promises

The Google Maps directions stay visible even when new routes are generated

Displaying an iframe in Internet Explorer

In my React.js project, I am looking to iterate through an array of objects and organize them based on a specific condition

The following middleware fails to transmit cookies received from the server

Error in Next.js Image Component: Missing SRC