{"id":21605909,"url":"https://github.com/pyaesone-khant/nextjs-localization","last_synced_at":"2026-05-17T13:03:40.418Z","repository":{"id":238441381,"uuid":"762741176","full_name":"Pyaesone-Khant/nextjs-localization","owner":"Pyaesone-Khant","description":"Implementing localization in Next Js using i18next.","archived":false,"fork":false,"pushed_at":"2025-12-24T04:44:58.000Z","size":127,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-25T18:18:20.103Z","etag":null,"topics":["i18next","localization","nextjs"],"latest_commit_sha":null,"homepage":"https://nextjs-localization-xi.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Pyaesone-Khant.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-24T15:06:54.000Z","updated_at":"2025-12-24T04:45:02.000Z","dependencies_parsed_at":"2025-01-21T05:20:11.620Z","dependency_job_id":"5b815840-ada9-45ef-81e7-3b5bab8a6613","html_url":"https://github.com/Pyaesone-Khant/nextjs-localization","commit_stats":null,"previous_names":["pyaesone-khant/nextjs-localization"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Pyaesone-Khant/nextjs-localization","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pyaesone-Khant%2Fnextjs-localization","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pyaesone-Khant%2Fnextjs-localization/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pyaesone-Khant%2Fnextjs-localization/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pyaesone-Khant%2Fnextjs-localization/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Pyaesone-Khant","download_url":"https://codeload.github.com/Pyaesone-Khant/nextjs-localization/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pyaesone-Khant%2Fnextjs-localization/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33139590,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T09:28:26.183Z","status":"ssl_error","status_checked_at":"2026-05-17T09:27:52.702Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["i18next","localization","nextjs"],"created_at":"2024-11-24T20:18:11.939Z","updated_at":"2026-05-17T13:03:40.391Z","avatar_url":"https://github.com/Pyaesone-Khant.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Localization in Next.js using next-intl(i18n)\n\nThis project demonstrates how to implement localization in a Next.js project using next-intl package.\n\n\n## Getting Started\n\nFirst, install the necessary packages:\n\n```bash\nnpm install\n```\n\nRun the project \u0026 the app will start at [http://localhost:3000](http://localhost:3000) :\n\n```bash\nnpm run dev\n```\n\n# Brief Explanation of how I implemented localization in Next JS \n\n## Setting Up i18next, middleware \u0026 navigation\n\nCreate a new file named `i18n.js`, `middleware.js` \u0026 `navigation.js` in the `src` directory, at the same level as `app` directory which is also located in `src` directory: \n\n```js\n// i18n.js\nimport {notFound} from 'next/navigation';\nimport {getRequestConfig} from 'next-intl/server';\nimport {locales} from \"@/navigation\";\n\nexport default getRequestConfig(async ({locale}) =\u003e {\n    // Validate that the incoming `locale` parameter is valid\n    if (!locales.includes(locale)) notFound();\n\n    return {\n        messages: (await import(`../messages/${locale}.json`)).default\n    };\n});\n\n// middleware.js\nimport createMiddleware from 'next-intl/middleware';\nimport {locales, localePrefix} from \"@/navigation\";\nexport default createMiddleware({\n    locales,\n    localePrefix,\n    defaultLocale: 'en'\n});\n\nexport const config = {\n    matcher: ['/', '/(mm|en|jp|kr)/:path*']\n};\n\n//navigation.js\nimport {createSharedPathnamesNavigation} from \"next-intl/navigation\";\n\nexport const locales = [\"en\", \"mm\", \"jp\", \"kr\"];\nexport const localePrefix = \"always\";\n\nexport const {Link, usePathname, useRouter, redirect} = createSharedPathnamesNavigation({locales, localePrefix})\n\n```\n\n## Accessing locale \u0026 translation files\n\nCreate a dynamic route named `locale` in the `app` directory, the folder structure will be seen as `src/app/[locale]`. Create a `layout.js` in that `locale` directory, and get `locale` from params \u0026 applied both `locale` param \u0026 `messages` folder which contain translation files in `layout.js` as below: \n\n```js\n// app/[locale]/layout.js\n\nimport { Inter } from \"next/font/google\";\nimport {NextIntlClientProvider, useMessages} from \"next-intl\";\n\nconst inter = Inter({ subsets: [\"latin\"] });\n\nexport default function RootLayout({ children, params: {locale} }) {\n  const messages = useMessages();\n  return (\n    \u003chtml lang={locale}\u003e\n      \u003cbody className={inter.className}\u003e\n      \u003cNextIntlClientProvider locale={locale} messages={messages}\u003e\n        {children}\n      \u003c/NextIntlClientProvider\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  );\n}\n```\n\n## Using i18next in pages\n\nImport \u0026 use the `useTranslations` from `next-intl` by passing the key of the translation file `json` as the arguemnt shown in the code below. For a better explanation, `Index` is one of the key from your translation file \u0026 the keys like `title`, `desc` \u0026 `intro` are the children of the key `Index` and each child keys stored the translated text as value.\n\n```js\n// app/[locale]/page.js\n\nimport {useTranslations} from \"next-intl\";\n\nexport default function Home() {\n      const t = useTranslations(\"Index\")\n\n    return (\n        \u003csection\u003e\n            \u003ch2\u003e{t(\"title\")}\u003c/h2\u003e\n            \u003cp\u003e {t(\"desc\")} \u003c/p\u003e\n            \u003cp\u003e {t(\"intro\")} \u003c/p\u003e\n        \u003c/section\u003e\n    );\n}\n\n```\n\n## Adding Translation Files\n\nFirst create a directory named `messages` at the same level as src directory. And then, add your translation files as `filename.json` into the `messages` directory. You can separate each translation by using nested obj in the translation file. For example, `messages/en.json` could be:\n\n```json\n{\n  \"Index\": {\n    \"title\": \"Hello!\",\n    \"desc\": \"Welcome to the NextJS Internationalization Example!\",\n    \"intro\": \"Welcome to the next-intl docs! In this guide you will learn how to set up internationalization (i18n) in your Next.js app. With Next.js 13, the App Router along with support for React Server Components was introduced and announced as stable with version 13.4. Following the lead of Next.js, next-intl also recommends this paradigm since it increases both simplicity as well as flexibility when it comes to i18n.\"\n  },\n\"NotFound\": {\n    \"title\": \"404\",\n    \"desc\": \"Oops! It seems that the page you are looking for does not exist.\"\n  },\n  \"Navigation\": {\n    \"home\": \"Home\",\n    \"about\": \"About\",\n    \"contact\": \"Contact\"\n  },\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpyaesone-khant%2Fnextjs-localization","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpyaesone-khant%2Fnextjs-localization","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpyaesone-khant%2Fnextjs-localization/lists"}