Internationalization with the Next.js 13 App Router
HTML-код
- Опубликовано: 11 июн 2023
- Learn how to set up basic internationalization in the Next.js App Router!
GitHub example: github.com/anthonyshew/i18n-demo
Twitter: / anthonysheww
Discord: / discord
Portfolio: shew.dev 
Наука
BIG NOTICE: To get params in layout we need to put it inside [lang] folder. If it lays outside of the [lang] (as shown in the video), the language in html won't change and you woldn't be able to pass it to the layout components such as header and footer. Now everything seems to work)
Thanks for the video, it's trully the best way to impement internalization
Oh gosh, major oops! I might have to re-record.
BIG YES! Pinning.
it works fine for me...
Yes Header and Footer Components require this, had an issue with the ../globals.css import but once I re-ran it was all ok. Great tutorial :)
Do you have an example pls
Great stuff! it simply works and love that I don't need to change the actual path in the user's browser.
A nice follow up would be to show how one could give the user a language switcher and override this preferred lang parameter at the browser level, for instance saving the override in a cookie. The part that would be challenging is adapting this middleware to do that.
the cleanest i18n solution. thanks. more tutorials please.
Thanks mate!
I subscribed Twice, ready to support you ❤️
Thanks for sharing! Spent quite a lot of time to configure i18n in my project and get some ideas from your video. Just have one more question: how would you organize singular/plural keys inside of dictionary in this type of keys getting? :) And also how would you separate this dictionary files in case of much bigger amout of keys?
Thanks a lot for this. Do you think this type of app router pattern will work on multitenant applications, with middleware for custom domains and subdomains?
Curious to ask, is the i18n conversion of this approach server side or client side ?
Could you do a video explaining how to make the internationalization and private routes in the middleware? Because it's hard to configure both. Thanks
Thanks ! That working with static export ?
Thank you for the video.. but is that a good practice for SEO or its better each language in a separate route as /sp ??
Hey Anthony!
great video, in Next 14 docs they don't show how to change language
What would happen if you actually had the lang in the url? Would it rewrite to /en/en/some-path?
hello can you add example if im on home page : i consume only home stings,same for other pages like load translation per page only
Nice crisp video on I18n 👏 One observation though, the Root Layout does not receive params, hence lang attribute remains "en" as it is always defaultLocale. Any thoughts around it?
To get params in layout we need to put it inside [lang] folder. If it lays outside of the [lang] (as shown in the video), the language in html won't change and you woldn't be able to pass it to the layout components such as header and footer. Now everything seems to work)
You could add a custom header, like x-locale and use it in layout with headers().get(“x-locale”). Then you don’t even need the params property
Hi Mr. Anthony,
Your tutorial on using Next.js for a multi-language website has been a real lifesaver for me. I've learned a lot about using next-intl for fixed content, but I've run into a challenge with dynamic content like user-created posts and comments. I'm not sure how to add them to the locales JSON files, and I've had trouble finding helpful resources on this topic.
I would be really grateful if you could point me in the right direction and maybe even consider creating a tutorial on handling dynamic content within the locales JSON files. Your help would mean a lot to me and others facing similar challenges.
Thank you so much,
awesome! can you tell me how to toggle/switch between different locales from frontend?
any solution for SSG + App Router + i18n. since middleware not supported in static export mode
Hello, I have a question why I set the default language but it doesn't work?
What about next-i18next, works the same?
Nice, thank You.
What about switching between the languages with a dropdown menu? how to handle that ?
i think you can use this
import { useRouter } from 'next/router'
const router = useRouter()
const { pathname, asPath, query } = router
// change just the locale and maintain all other route information including href's query
router.push({ pathname, query }, asPath, { locale: nextLocale })
how can you merge with the nextAuth middleware?
how can i show locale in the url
I logged only to like, subscribe and comment this video, great! thx a lot for this! 😀👍
How would you avoid creating a massive dictionary will all the translations ? I imagine this will not be efficient for client side components
You pretty much have to create a massive dictionary if you want a lot of content. There are tools like Lokalise to manage that, but it’s not free.
What about Date Time translation?
Will it work on either client or server components?
I'm no expert but, it has to worked AFAIK.
if this didn't work and you have a src folder don't forget to put you middleware file in your src file not in root
hahahahaha un poco español, awesome tutorial Anthony!
Hi , i have a question , i want a button that change my local from /fr to /en , i could not do it , i tried to use usestate etc , but nothing happend
same here i made a dirty solution to change it, considering default lang is english
location.replace(pathname.includes("es")? "/en" + pathname.slice(3) : "/es" + pathname)
@@alexqs96 i'll try it , thank u
@@alexqs96 Hi again , i have a server component , how can get this pathname
@@nourrahim5556 the button that i used was a client component using usePathname, then imported that button component into my server component
Ask how can I make a button that changes the language between Spanish and English, good video, it helped me a lot
Is there a way to change the locale value of the sensors via code so we dont have to manually do it in the dev tools?
when a user changes desired language u should create a cookie containing it and check if there's the cookie in middleware, and if yes, than use it instead of browser stored locale
@@user-po8ni4ng7v Thanks1
@@user-po8ni4ng7vThis will only take affect after a reload any idea to work around that?
Hah, nice. RUclips recommended this video right after I made the same thing.
sobre yo better put Acerca de mi, 😊😊
in the middleware file I had to change the
```export const config = { matcher: [ '/((?!_next|api|favicon.ico).*)', ] }```
for
```export const config = { matcher: ['/((?!api|_next|.*\\..*).*)'] };```
since the images in the public folder were not working. Everything else worked just fine 😊
this is great! i was looking for. is there a any document to improve my matcher knowledge?
Absolute life saver, thanks for that!
thank you very much for your video, everything works perfectly except for not-found.tsx at the root of [lang] I can't get the params