How to use Nextjs internationalization with a default lang?

Question

It's two days I'm reading the Nextjs internationalization doc

I want to use two langs: en, fa. I can switch between them as well, and the URLs would look like this:

https://example.com/en
https://example.com/fa

All I want to do is, defining the en one as default, so the expected result is:

https://example.com/
https://example.com/fa

Any idea how can I do that? I couldn't find anything related to that in the doc.

---

Here is the code I have:

/src/app/[lang]/page.js

// 'use client'
import { getDictionary } from './dictionaries'
import {useRouter} from "next/navigation";

// const router = useRouter();
export default async function Page({ params: { lang } }) {
    const dict = await getDictionary(lang) // en
    return (
        <>
            <button>{dict.products.cart}</button>
       </>
    ) // Add to Cart
}`

/src/app/[lang]/dictionaries.js

import 'server-only'

const dictionaries = {
    en: () => import('../dictionaries/en.json').then((module) => module.default),
    fa: () => import('../dictionaries/fa.json').then((module) => module.default),
}

export const getDictionary = async (locale) => dictionaries[locale]()

Answer 1

According to the NextJS documentation on internationalization routing it seems like you can just define the default locale in next.config.js to set a default language:

module.exports = {
  i18n: {
    locales: ['en', 'fa'],
    defaultLocale: 'en',
  },
}

This question also has a lot of information that could be useful for you.

Sample project structure:

project-root/
|-- src/
    |-- app/
    |-- ...
|-- ...
|-- middleware.js
|-- next.config.js
|- ...