0

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]()
Shafizadeh
  • 9,960
  • 12
  • 52
  • 89

1 Answers1

0

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
|- ...
Ada
  • 427
  • 2
  • 13
  • Thanks for your answer, but still doesn't work. I guess I'm using the middleware wrongly, Should be [this file](https://nextjs.org/docs/app/building-your-application/routing/internationalization#routing-overview) in which path? under `/src/middleware.js` or `/src/app/middleware.js`? – Shafizadeh Aug 22 '23 at 12:06
  • Neither, it should be in the root directory (same as `next.config.js`). I've edited my answer to show a sample project structure. – Ada Aug 22 '23 at 15:50