Need help for folder structure for location based internationalization

[codiologist]

I've a project in next.js 15 where I've render pages for two locations Dhaka and Chittagong. The URL should be as below
example.com/en/dhaka
example.com/bn/dhaka
example.com/en/dhaka/about
example.com/en/dhaka/contact

Same for the Chittagong location also.

URL must be SEO friendly.

src/
├── app/
│ ├── [locale]/
│ │ └── [location]/

I am confused how can I define layout.tsx and page.tsx in [locale] and [location] directory. Also updte the middleware.ts file.

Please help me to solve this.

[amannn]

app/[locale]/[location] sounds reasonable to me, what is the issue you're encountering?

Maybe a quick prototype based on next-intl-bug-repro-app-router could help you to demonstrate what you have and what's not working.

[codiologist]

Thanks for response.

my project has two dependencies. first of all I've change language and second one is location. user can change language also location and content should be rendered as per user interact. I can not understand how can i define layout.tsx, page.tsx middleware.ts and other related files. I'm trying form last two days.

Here the code https://github.com/codiologist/nextjs15-next-intl

[amannn]

Your current prototype looks good to me so far! What are the concrete problems you're trying to solve?

E.g. at /en there's currently an error. You could add a redirect there e.g. to /en/dhaka. The services link currently doesn't contain the city, do you need to update it to to consider the city?

Another thing I noticed is that your city selector gets stuck when you change the city via the navigation. To fix this, you can reset the state via a key (e.g. based on usePathname in Navbar).

Seems like solvable problems to me, no? I think your general layout, middleware etc are fine.