Choosing between third party libraries - Next.js Internationalization in 2024 with the app router
HTML-код
- Опубликовано: 14 окт 2024
- Contact us: rendr.io/contact
This is the 2nd video of a 6 part series we have created on internationalization in Next.js. A new video will be released each week until all 6 are published.
This series goes from the absolute basics all the way to advanced, enterprise-level, cross team topics that you've never seen anywhere else.
Start here if you missed video: #1 - The basics: • The basics - Internati...
Video #3 - You STILL don't know anything about internationalization: • You STILL don't know a...
Video #4 - Solving i18n workflow problems. It doesn't have to be a mess.: • Solving i18n workflow ...
Libraries reviewed in this video:
next-intl: next-intl-docs...
next-i18next: github.com/i18...
next-international: next-internati...
Source code for this video: github.com/ren...
Hi, thanks for sharing
I need an suggestion for my application which contains only English and arabic language. But the application will be bit complex moving forward. So which approach is good for me.
Hey sorry, I’m not getting notifications in my RUclips app, just saw your comment.
Assuming we’re talking about a Next.js app, are your building it on the app or pages router?
For pages router you’ve got your pick as there are so many frameworks. We’ve rolled out a few app router projects with next-intl recently, and it does a great job of staying out of the way.
Check out our next video coming this week for more details on what it’s like to grow with one of these projects.
@@rendrdotio great, thanks for the reply. Much appreciated
I'm building the app using page router. There will be only two languages through out the cycle.
For pages router apps we used to use next-i18n, as it was near enough a standard, lots of support etc. The problem is that they’ve basically thrown their hands up with regard to the app router, so it’s kind of limiting in terms of future-proofing.
You still may want to have a look at next-intl, even with only two languages, as it supports the pages router as well, is easy to implement and you avoid the pitfalls of the “roll your own approach”
I just found this channel today. It’s actually very informative and easy to understand. Thank you, and keep up the great work!
Thanks very much, welcome!
14:10 but wait, the first library does the same as react-i18next: it has different functions for the server and client i18n: async get() and use(). The same applies for react-i18next, they simply called the server function with use-prefix. I'm wondering about a lazy-loading implementation for _server_ components without promises.
Got confused by the review til figured out that. But still, thanks for the videos.
Great tutorial! I was able to easily translate all the static content in my web app, but I've been struggling to find a way to translate dynamic content that comes from API responses. Is there any method or best practice for translating dynamic content fetched from an API?
Very nice video that helped me set up next-international. Idk dude keep making stuff like this
Thanks a lot! We’ll try.
Ive implemented next-internalization but my layout.js become 5MB large. Does anybody have an explanation or similiar result with this?
Thanks for posting this series! Do you have the source code for this episode? The link of the repository in the description is an empty repo.
My pleasure! and yes, I must admit I was aware... I was curious how long it would take for someone to notice. Just added everything now. Good luck!
Thanks!!!
Sure 🙌
Using the next-international library, I saw you have this on your app/[locale]/layout.tsx
export async function generateStaticParams() {
return [{ locale: "en" }, { locale: "nl" }];
}
Whenever I try running npm run build, it throws me errors.
Error: Could not find locale while pre-rendering page, make sure you called `setStaticParamsLocale` at the top of your pages
Export encountered errors on following paths:
/[locale]/page: /nl
/[locale]/page: /en
if I remove it, it generates the pages under [locale] as
ƒ (Dynamic) server-rendered on demand
I want it to be SSG which should give me the following output after I build:
● (SSG) prerendered as static HTML (uses getStaticProps)
Please help
Hi, thanks i have a question for next-international, in vscode with an extension i can select a string right clic and transform it to a locale but it will be added to a json file, not what next-international needs : // locales/en.ts
export default {
'hello': 'Hello',
'hello.world': 'Hello world!',
'welcome': 'Hello {name}!'
} as const.
Is there a way in vscode to easily and automatically add new locales from strings as expected by next-international?
What extension are you using? Happy to test it out on this end. Also, worth checking this out, as next-international does allow for JSON: next-international.vercel.app/docs/writing-locales