{"id":28545113,"url":"https://github.com/moxystudio/next-intl","last_synced_at":"2025-07-07T02:30:41.185Z","repository":{"id":36326404,"uuid":"221750199","full_name":"moxystudio/next-intl","owner":"moxystudio","description":"Library to integrate react-intl with Next.js.","archived":false,"fork":false,"pushed_at":"2023-10-13T01:07:51.000Z","size":1738,"stargazers_count":37,"open_issues_count":3,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-05T07:38:21.901Z","etag":null,"topics":["i18n","intl","l10n","nextjs","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/moxystudio.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2019-11-14T17:19:11.000Z","updated_at":"2025-03-28T18:55:13.000Z","dependencies_parsed_at":"2024-06-18T22:37:40.387Z","dependency_job_id":"727d52c8-b0dc-424a-b478-649a7ea53c4c","html_url":"https://github.com/moxystudio/next-intl","commit_stats":{"total_commits":87,"total_committers":10,"mean_commits":8.7,"dds":0.1724137931034483,"last_synced_commit":"8eb287f2faab024b6152fb54f753cc79338b9dea"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"purl":"pkg:github/moxystudio/next-intl","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moxystudio%2Fnext-intl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moxystudio%2Fnext-intl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moxystudio%2Fnext-intl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moxystudio%2Fnext-intl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/moxystudio","download_url":"https://codeload.github.com/moxystudio/next-intl/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moxystudio%2Fnext-intl/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264001806,"owners_count":23542325,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["i18n","intl","l10n","nextjs","react"],"created_at":"2025-06-09T23:06:37.011Z","updated_at":"2025-07-07T02:30:41.179Z","avatar_url":"https://github.com/moxystudio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# next-intl\n\n[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Build Status][build-status-image]][build-status-url] [![Coverage Status][codecov-image]][codecov-url] [![Dependency status][david-dm-image]][david-dm-url] [![Dev Dependency status][david-dm-dev-image]][david-dm-dev-url]\n\n[npm-url]:https://npmjs.org/package/@moxy/next-intl\n[downloads-image]:https://img.shields.io/npm/dm/@moxy/next-intl.svg\n[npm-image]:https://img.shields.io/npm/v/@moxy/next-intl.svg\n[build-status-url]:https://github.com/moxystudio/next-intl/actions\n[build-status-image]:https://img.shields.io/github/workflow/status/moxystudio/next-intl/Node%20CI/master\n[codecov-url]:https://codecov.io/gh/moxystudio/next-intl\n[codecov-image]:https://img.shields.io/codecov/c/github/moxystudio/next-intl/master.svg\n[david-dm-url]:https://david-dm.org/moxystudio/next-intl\n[david-dm-image]:https://img.shields.io/david/moxystudio/next-intl.svg\n[david-dm-dev-url]:https://david-dm.org/moxystudio/next-intl?type=dev\n[david-dm-dev-image]:https://img.shields.io/david/dev/moxystudio/next-intl.svg\n\nLibrary to integrate [`react-intl`](https://www.npmjs.com/package/react-intl) with Next.js.\n\n## Installation\n\n```sh\n$ npm install --save @moxy/next-intl react-intl\n```\n\n\u003e ℹ️ If you are running Node.js `\u003c 13.1.0`, you must also install `full-icu` and start node with [`--icu-data-dir=node_modules/full-icu`](https://github.com/zeit/next.js/blob/5e6f79117fae59ec3a6a3260808f611862c53f0a/examples/with-react-intl/package.json#L5) or use `NODE_ICU_DATA=node_modules/full-icu`.\n\n## Setup\n\n### 1. Configure `next.config.js`\n\nPlease configure `i18n` as explained in the official Next.js [docs](https://nextjs.org/docs/advanced-features/i18n-routing#getting-started).\n\n```js\n// next.config.js\nmodule.exports = {\n    i18n: {\n        locales: ['en', 'pt'],\n        defaultLocale: 'en',\n    },\n};\n```\n\n### 2. Create a root folder named `intl` to hold translation files:\n\n```\nintl/\n    en.json\n    pt.json\n```\n\nThe `intl/en.json` file contains the messages for the `en` locale, like so:\n\n```json\n{\n    \"hello\": \"Hello World\"\n}\n```\n\n### 3. Wrap your app with `withIntlApp()` in `pages/_app.js`:\n\n```js\n// pages/_app.js\nimport React from 'react';\nimport App from 'next/app';\nimport { withIntlApp } from '@moxy/next-intl';\n\n// The example below dynamically downloads translations from your JSON files,\n// but you may load them from external sources, such as a CMS.\n// Please note that the result will be cached on the client-side,\n// to avoid fetching translations on every page change.\nconst loadLocale = async (locale) =\u003e {\n    const module = await import(/* webpackChunkName: \"intl-messages\" */ `../intl/${locale}.json`);\n\n    return module.default;\n};\n\nexport default withIntlApp(loadLocale)(App);\n```\n\nHere's an example if you have a custom app:\n\n```js\nimport React from 'react';\nimport { withIntlApp } from '@moxy/next-intl';\nimport Layout from '../components/layout';\n\nconst MyApp = ({ Component, pageProps }) =\u003e (\n    \u003cLayout\u003e\n        \u003cComponent { ...pageProps } /\u003e\n    \u003c/Layout\u003e\n);\n\nconst loadLocale = async (locale) =\u003e {\n    const module = await import(/* webpackChunkName: \"intl-messages\" */ `../intl/${locale}.json`);\n\n    return module.default;\n};\n\nexport default withIntlApp(loadLocale)(MyApp);\n```\n\n### 4. Use `getIntlProps()` in your pages.\n\n```js\n// pages/index.js\nimport React from 'react';\nimport { getIntlProps } from '@moxy/next-intl';\n\nconst Home = () =\u003e (\n    \u003cmain\u003e\n        \u003cFormattedMessage id=\"hello\" /\u003e\n    \u003c/main\u003e\n);\n\nexport const getStaticProps = async ({ locale }) =\u003e ({\n    props: await getIntlProps(locale),\n});\n\nexport default Home;\n```\n\nIf you already are using `getStaticProps` for something else:\n\n```js\nexport const getServerSideProps = async ({ locale }) =\u003e {\n    const [foo, localeProps] = await Promise.all([\n        fetchFoo(),\n        getIntlProps(locale);\n    ]);\n\n    return {\n        foo,\n        ...localeProps,\n    };\n};\n```\n\n\u003e ℹ️ If you are using `getServerSideProps()`, then it works the same as the examples that use `getStaticProps()`.\n\n## FAQ\n\n### How can I use this `getIntlProps()` in my page's `getInitialProps()`?\n\n```js\n// pages/index.js\nimport React from 'react';\nimport { getIntlProps } from '@moxy/next-intl';\nimport { FormattedMessage } from 'react-intl';\n\nconst Home = () =\u003e (\n    \u003cmain\u003e\n        \u003cFormattedMessage id=\"hello\" /\u003e\n    \u003c/main\u003e\n);\n\nHome.getInitialProps = async ({ locale }) =\u003e ({\n    ...await getIntlProps(locale),\n});\n\nexport default Home;\n```\n\nHowever, the `locale` parameter will be undefined in the `getInitialProps()` function above because Next.js doesn't pass it as of now, but there's an [open pull-request](https://github.com/vercel/next.js/pull/21930) to resolve it.\n\nTo circumvent this, you must override `pages/_app.js` like so:\n\n```js\n// pages/_app.js\nimport App from 'next/app';\n\nconst MyApp = (props) =\u003e \u003cApp { ...props } /\u003e;\n\nMyApp.getInitialProps = async (appCtx) =\u003e {\n    appCtx.ctx.locale = appCtx.router.locale;\n    appCtx.ctx.locales = appCtx.router.locales;\n    appCtx.ctx.defaultLocale = appCtx.router.defaultLocale;\n\n    const appProps = await App.getInitialProps(appCtx);\n\n    return appProps;\n};\n\nexport default MyApp;\n```\n\n\u003e ⚠️ Please note that adding `getInitialProps()` to your App will disable Automatic Static Optimization in pages without Static Generation.\n\n### How do I avoid repeating `getIntlProps()` in all my pages?\n\nYou can use `getIntlProps()` once in your `pages/_app.js`, like so:\n\n```js\n// pages/_app.js\nimport App from 'next/app';\n\nconst MyApp = (props) =\u003e \u003cApp { ...props } /\u003e;\n\nMyApp.getInitialProps = async (appCtx) =\u003e {\n    const [intlProps, appProps] = await Promise.all([\n        getIntlProps(appCtx.router.locale),\n        App.getInitialProps(appCtx),\n    ]);\n\n    return {\n        ...intlProps,\n        ...appProps,\n    };\n};\n\nexport default MyApp;\n```\n\n\u003e ⚠️ Please note that adding `getInitialProps()` to your App will disable Automatic Static Optimization in pages without Static Generation.\n\n### How do I load `intl` polyfills?\n\nIn previous versions of this library, all polyfills were automatically downloaded. This is no longer the case. However, you may load any polyfills and locale data inside the `loadLocale()` function.\n\nHere's an example that loads the [`@formatjs/intl-pluralrules`](https://formatjs.io/docs/polyfills/intl-pluralrules/) polyfill.\n\n```js\n// _app.js\nimport { shouldPolyfill as shouldPolyfillPluralRules } from '@formatjs/intl-pluralrules/should-polyfill';\n\n// ...\n\nconst loadLocale = async (locale) =\u003e {\n    if (shouldPolyfillPluralRules()) {\n        await import(/* webpackChunkName: \"intl-pluralrules\" */ '@formatjs/intl-pluralrules/polyfill');\n    }\n\n    if (Intl.PluralRules.polyfilled) {\n        switch (locale) {\n        case 'pt':\n            await import(/* webpackChunkName: \"intl-pluralrules-pt\" */ '@formatjs/intl-pluralrules/locale-data/pt')\n            break;\n        default:\n            await import(/* webpackChunkName: \"intl-pluralrules-en\" */ '@formatjs/intl-pluralrules/locale-data/en')\n            break\n        }\n    }\n\n    const module = await import(/* webpackChunkName: \"intl-messages\" */ `../intl/${locale}.json`);\n\n    return module.default;\n};\n\nexport default withIntlApp(loadLocale)(App);\n```\n\n## Tests\n\n```sh\n$ npm t\n$ npm t -- --watch  # To run watch mode\n```\n\n## License\n\nReleased under the [MIT License](https://opensource.org/licenses/mit-license.php).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoxystudio%2Fnext-intl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoxystudio%2Fnext-intl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoxystudio%2Fnext-intl/lists"}