Next-translate: How to implement localization for static site generated (SSG) pages?

[afzaalahmad]

I have implemented next-translate in our next app and it is working absolutely fine for pages, that are being server rendered but it is not working for static site generated (SSG) pages, specifically it is able to create route only for default language and for other languages it is throwing 404 error. My setup uses with build step option. So, I have following question:

1. Can I achieve localization for SSG pages or not?
2. If yes, can you elaborate through some example? Because there is no SSG page in current examples.

[aralroca]

Yes, it's possible. In the examples, there are SSG pages: https://github.com/vinissimus/next-translate/tree/master/examples/with-build-step for example the /index.js uses a getStaticProps.

Which version of next-translate are you using?

[masoodtalha]

@aralroca So the next-translate version that we're on is 0.19.5

[aralroca]

The version is the latest, it should work. I would like to help. If you provide a repo reproducing the error I'll try to see what is happening.

[afzaalahmad]

@aralroca I've seen the example, specifically index.tsx and passed the locale from context to props, still same issue. I've also implemented getStaticPaths because my page is like this integrations/[[...slug]].tsx and I've written getStaticPaths to generate multiple static pages from this page. Do you think this has something to do with the error?

[aralroca]

@afzaalahmad @masoodtalha I found a bug, I did a 0.19.6-canary.1 prerelease with the fix, confirm me if it works now, thanks a lot 🙏 😊

[afzaalahmad]

@aralroca I am glad that you found a bug but the bug that you found is not the one, I have mentioned here because I've tried your fix and it still behaving in the same manner that I stated above.

I have solved this bug but this is not actually a bug, it is more related to documentation.
So, first of all, let me give you an overview of my problem,

Problem:
I have a page path integrations/[[...slug]].tsx inside pages_ directory and I've implemented two methods getStaticPaths & getStaticProps to generate SSG from this page. In your documentation of with build step, you mentioned that we have to pass lang to props and we can get this from context being passed to getStaticProps. I did the same thing along with the implementation of getStaticPaths to generate 16 different pages depending on the slug. I am pasting the implementation of my getStaticProps and getStaticPaths below:

export const getStaticPaths: GetStaticPaths = async () => {
    const categories = Object.values(IntegrationCategory) // IntegrationCategory is a constant object
    const tags = Object.values(IntegrationTag) //IntegrationTag is a constant object

    const indexPath = [{params: { slug: [] }}]
    const tagPaths = tags.map((tag) => ({
        params: { slug: [TAG, tag] },
    }))
    const categoryPaths = categories.map((cat) => ({
        params: { slug: [CATEGORY, cat] },
    }))

    return { paths: [...indexPathWithLocales, ...tagPathsWithLocales, ...categoryPathsWithLocales], fallback: false }
}

export const getStaticProps = async ({ locale }: { locale: string }) => {
    const apps = await fetchIntegrations()

    return {
        props: {
            apps,
            lang: locale
        },
    }
}

So, with this, whenever I make build of an app, it only generates static pages for default language because it is a fallback language.

Solution:
After encountering this problem, I found next-localization package which also claims that you can achieve SSG localization with it. I went to their example and I found something in getStaticPaths method there, which I tried with next-translate and surprisingly, it worked. In their example, they mentioned that in order to generate different paths, you have to get locales from context of getStaticPaths and generate paths by passing locale to the pages context, which solved my problem, generating pages for both languages i.e. english and french.

Implementation of getStaticPaths and getStaticProps now:

export const getStaticPaths: GetStaticPaths = async ({ locales }: { locales: string[] }) => {
    const categories = Object.values(IntegrationCategory)
    const tags = Object.values(IntegrationTag)

    const indexPath = [{params: { slug: [] }}]
    const tagPaths = tags.map((tag) => ({
        params: { slug: [TAG, tag] },
    }))
    const categoryPaths = categories.map((cat) => ({
        params: { slug: [CATEGORY, cat] },
    }))

    //flatMap, map are method of lodash library
    const indexPathWithLocales = flatMap(indexPath, path => map(locales, l => ({ ...path, locale: l })));
    const tagPathsWithLocales = flatMap(tagPaths, path => map(locales, l => ({ ...path, locale: l })));
    const categoryPathsWithLocales = flatMap(categoryPaths, path => map(locales, l => ({ ...path, locale: l })));

    return { paths: [...indexPathWithLocales, ...tagPathsWithLocales, ...categoryPathsWithLocales], fallback: false }
}

export const getStaticProps = async ({ locale }: { locale: string }) => {
    const apps = await fetchIntegrations()

    return {
        props: {
            apps,
            lang: locale
        },
    }
}

[afzaalahmad]

@aralroca I am closing this issue, because it was more related to next internationalized routing in v10.0.0. Anyway, I got it solved and thanks for your help for going an extra mile! I really appreciate it. :+1:

[aralroca]

@afzaalahmad it's not necessary to pass the lang on getStaticProps, it should work without it