Nextjs several languages

Why don't you make a constant with every locale you'll support with it's sections and corresponding URLs?

Beautify this for better understanding:

const routes = { es: { contact-us: "/contactanos", about-us: "/sobre-nosotros" }, en: { contact-us: "/contact-us", about-us: "/about-us" } }

If the user tries to access yoursite.com/contactanos, you'll know you should render the contact-us component in es (Object.keys())

You can get the locale text and proper Component to be rendered in getStaticProps or getServerSideProps if the context path belongs to the constant routes, if it doesn't, then return a 404.

You can do a catch-all-routes in page/[...slug].js and handle everything dynamically.

https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes

Watch out though, I know this decision came from above, but URL subdirectories DO NOT represent actual site hierarchy for SEO, and for Google, any URL holds equal value regardless of it's keywords, it's just an identifier. What determines site hierarchy is interlinking between pages and crawling depth.

/r/nextjs Thread