Next Js dynamic subpath

Question

I am currently working on a next.js app and so far so good, all has been going on fine but my client wants a feature that's quite difficult for me to implement.

SO the site is at mysite.com and routes like mysite.com/cars, mysite.com/vehicles, etc

Now my client wants to a dynamic subpath based on the visitor's country e.g. mysite.com/us/cars or mysite.com/uk/cars or mysite.com/ng/cars

I have tried the new i18n feature in next.js 10 but seems like that only works based on user's locale (language).

Is there a way I can programmatically do this or I should leave it to DevOps to deploy to subfolders?

Answer 1

You can accomplish this with dynamic routing.

https://nextjs.org/docs/routing/dynamic-routes

What you'd need to do is to adjust to have a [locale] folder in your directory structure, so your pages become:

pages/[locale]/cars or pages/[locale]/vehicles.

You can then access the active locale with

const router = useRouter();
const locale = router.query.locale;

to determine how to retrieve the content. In the event that you need to statically generate said locales, you can do that as well by placing a

getStaticPaths function in your pages

https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation

Now then, if you're going to ask how to dynamically route based on their current country i.e. redirect once they land on the top level pages, well that is a whole different game.