NEXTJS i18N internationalization

[grave oasis]

I would like to know what's the best way to add differents languages in my website?

https://blog.logrocket.com/complete-guide-internationalization-nextjs/

I followed this tutorial to do it with Lingui, but it use getStaticPaths & getStaticProps

And since that... my router.push() is so slow... more slower than before. So I don't really like...

What's your approach to do it? Thanks

`export const getStaticProps: GetStaticProps = async (ctx) => {
const translation = await loadTranslation(
ctx.locale!,
process.env.NODE_ENV === "production"
);
return {
props: {
translation,
},
};
};

export const getStaticPaths: GetStaticPaths<{ slug: string }> = async () => {
return {
paths: [], //indicates that no page needs be created at build time
fallback: "blocking", //indicates the type of fallback
};
};`

[swift turret]

If it's for your blog then why don't you use getStaticPaths to build all pages? (i.e., replace the paths: [] with paths: [//the required data to generate all your blog pages].

Because, if I understand this correctly, you're not building any pages up front, meaning it needs to be built on the first render (https://nextjs.org/docs/api-reference/data-fetching/get-static-paths#fallback-blocking) - which presumably means you'll need to wait for the translations to be fetched, etc.

My (newbie) understanding is that this is useful where you have thousands of pages "expensive" pages to build and don't want a long build time. For a blog you could probably generate everything at build time?

[grave oasis]

I generate page, profiles according data

I have in my database

[swift turret]

I mean, why not use getStaticPaths to do it at build time?

(again, new to nextjs, so might be barking up the wrong tree)

looks like you're deferring initial generation to the first request

but if you fed getStaticPaths something like paths: [{ params: { id: 'post_slug_1' } }, { params: { id: 'post_slug_2' } }],

then it would generate the pages up front

(you might need a local param as well, or maybe year and month params

but basically, the elements needed to hit each post url

then they would get generated at build time

and load quickly for users even on the first request

basing my thinking on: https://nextjs.org/docs/basic-features/data-fetching/get-static-paths

[grave oasis]

Im also a newbie in react

I just followed this tutorial to do it, and they do like this, but I feel that getStaticProps kill my navigation speed https://blog.logrocket.com/complete-guide-internationalization-nextjs/

I will try to understand what you are saying, checkimg your link

[grave oasis]

Okay got it ! Will try it. Thanks man