Next.js Multi-language Support

Question

I'm developing a Next.js project for the first time. The site will support 6 languages. English, Italian, Russian, Turkish, Greek, Serbian, and Arabic. What I need to do is the following.

I want to set up a structure like:

www.domain.com/en/products
www.domain.com/it/prodotti
www.domain.com/tr/urunler

But I don't want to create separate files for each language. I want to manage everything from a single file and just have the URL change based on the selected language. The content on the page will not come from any JSON file; it will be provided via an API in the appropriate language. I just need to set up this URL structure.

I've been struggling with this for 3 days, and the resources I've found online mostly show how to do it using JSON files. I tried that, but I can't progress any further. What should I do next?

middleware.ts enter image description here

i18n.ts enter image description here

File construction is like this enter image description here

What I'm trying to achieve is essentially what's described here: https://next-intl-docs.vercel.app/docs/routing#pathnames, but I'm not sure how to implement it.

I created a config file and wrote a few things in it, but I don't know where to import it or if I need to configure something in my pages. Please help. Thank you.

I've tried quite a few things, but since I'm new to this, I haven't been able to reach a solution.

Please provide enough code so others can better understand or reproduce the problem. — Community
– Community Bot, Commented Aug 29, 2024 at 14:05
Downvoting because code is included as images. This practice is advised against. — zabop
– zabop, Commented Aug 29, 2024 at 14:29

amann · Accepted Answer · 2024-08-29 14:26:43Z

0

you should go next-intl. and you can checkout my next template on Github

you can simply watch these files

src/middleware.ts
src/i18n.ts
src/app/[locale]/layout.tsx
messages folder

and how to use you can also see on

src/app/[locale]/page.tsx

** remember you need to create page/layout.tsx under [locale] folder to get power of next-intl

edited Aug 29, 2024 at 14:26

amann

5,9305 gold badges42 silver badges50 bronze badges

answered Aug 28, 2024 at 13:58

Sirawich voungchuy

3623 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Next.js Multi-language Support

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related