I am currently working on a website using Next.js 14, with the aim of exporting it as a static site for distribution via a CDN (Cloudflare Pages). My site requires internationalization (i18n) support for multiple languages. I have set up a folder structure for language support, which looks like this:
- [language]
-- layout.tsx // generateStaticParams with possible languages
-- page.tsx
-- ...
This setup allows me to access pages with language prefixes in the URL, such as /en/example
and /de/example
.
However, I want to implement a default language (e.g., English) that is accessible at the root path without a language prefix (/example
). Importantly, I do not wish to redirect users to a URL with the language prefix for SEO purposes. Nor can I use the rewrite function because I’m using static export.
Here are my specific requirements:
- Access the default language pages directly via the root path (e.g.,
/example
for English). - Avoid redirects to language-prefixed URLs (e.g., not redirecting
/example
to/en/example
). - Maintain the ability to access other languages with their respective prefixes (e.g.,
/de/example
for German).
I am looking for guidance on:
How to realise this with Next.js 14 to serve the default language pages at the root path without a language prefix. Ensuring that this setup is compatible with the static export feature of Next.js.
Any insights, code snippets, or references to relevant documentation would be greatly appreciated.
2
Answers
If I understand your question, Nextjs is a file routing system every
page.js/ts
orroute.js/ts
files are standing for a page in the web app. So, if you going with the structure you provided in you question, you will need to structure your folders and files this way and to avoid duplicate in your code.The other approach you can follow is to manage the language by state managements like
Redux
orZustand
and translate/fetch the data the current language in the state, this way you do not need to createabout
pages files.additionally you can configure you next.config.js this way:
I have in one of my repo that shows default english lang on root just like
www.example.com
will serve english lang by default no need to addwww.example.com/en
to checkout eng lang page but for other pages the prefix will handle all the things,www.example.com/de
will serve german lang page and so on. I have used react-i18n and next-i18n packages to acheive this functionality,I hope this link will help you
i18n in Next js v14