{"_id":"@arunesh90/next-i18next","name":"@arunesh90/next-i18next","dist-tags":{"latest":"7.0.2"},"versions":{"7.0.2":{"name":"@arunesh90/next-i18next","version":"7.0.2","repository":{"type":"git","url":"git+ssh://git@github.com/arunesh90/next-i18next.git"},"author":{"name":"Arunesh","email":"hello@arunesh.me"},"funding":{"type":"github","url":"https://github.com/sponsors/isaachinman"},"main":"dist/commonjs/index.js","types":"./types.d.ts","license":"MIT","engines":{"node":">=10"},"description":"The easiest way to translate your NextJs apps.","keywords":["react","i18next","nextjs","next","translation","localisation","localization","locale"],"scripts":{"check-types":"tsc","lint":"eslint types.d.ts src/**/* examples __tests__/**/*","lint:fix":"eslint types.d.ts src/**/* examples __tests__/**/* --fix","clean":"rm -rf examples/simple/.next && rm -rf dist && mkdir dist","build:es":"BABEL_ENV=es babel src --extensions '.ts,.tsx' --out-dir dist/es --copy-files","build:cjs":"BABEL_ENV=cjs babel src --extensions '.ts,.tsx' --out-dir dist/commonjs --copy-files","build":"yarn clean && yarn build:cjs && yarn build:es","build:examples/simple":"yarn --cwd examples/simple && yarn --cwd examples/simple build","heroku-postbuild":"yarn build && yarn build:examples/simple","prepublishOnly":"yarn build","run-example":"yarn build && cd examples/simple && yarn && yarn dev","run-example:prod":"yarn --cwd examples/simple start","test":"yarn check-types && yarn clean && yarn build:cjs && yarn build:examples/simple && ./scripts/setup-e2e.sh && bundlesize && NODE_ENV=test jest --maxWorkers=1 --silent","contributors:check":"all-contributors check","contributors:add":"all-contributors add","contributors:generate":"all-contributors generate"},"husky":{"hooks":{"pre-commit":"yarn lint && yarn test"}},"bundlesize":[{"path":"./examples/simple/.next/static/chunks/commons*.js","maxSize":"67 kB"},{"path":"./examples/simple/.next/static/chunks/main*.js","maxSize":"7 kB"},{"path":"./examples/simple/.next/static/chunks/webpack*.js","maxSize":"760 B"}],"devDependencies":{"@babel/cli":"^7.10.4","@babel/core":"^7.10.4","@babel/plugin-proposal-class-properties":"^7.10.4","@babel/plugin-transform-runtime":"^7.10.4","@babel/preset-env":"^7.10.4","@babel/preset-react":"^7.10.4","@babel/preset-typescript":"^7.10.4","@types/jest":"^24.0.16","@types/jest-environment-puppeteer":"^4.0.0","@types/react":"^16.8.4","@types/react-dom":"^16.8.2","@typescript-eslint/eslint-plugin":"^1.13.0","@typescript-eslint/parser":"^1.13.0","all-contributors-cli":"^6.0.0","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.1.0","babel-plugin-add-module-exports":"^1.0.0","babel-plugin-transform-async-to-generator":"^6.24.1","bundlesize":"^0.18.0","enzyme":"^3.8.0","enzyme-adapter-react-16":"^1.7.1","eslint":"^6.1.0","eslint-plugin-import":"^2.17.1","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.14.3","husky":"^3.0.0","jest":"^24.1.0","jest-puppeteer":"^4.0.0","jsdom":"^15.0.0","jsdom-global":"^3.0.2","next":"^9.0.1","puppeteer":"^1.11.0","react":"^16.12.0","react-dom":"^16.12.0","typescript":"^3.5.3"},"dependencies":{"@types/express":"^4.16.1","core-js":"^3","hoist-non-react-statics":"^3.2.0","i18next":"^19.6.3","i18next-browser-languagedetector":"^5.0.0","i18next-fs-backend":"^1.0.7","i18next-http-backend":"^1.0.17","i18next-http-middleware":"^3.0.2","path-match":"^1.2.4","prop-types":"^15.6.2","react-i18next":"^11.7.3","url":"^0.11.0"},"peerDependencies":{"next":">= 9.5.0","react":">= 16.8.0"},"gitHead":"137e9832dbc5eecf6238708853ab4971a1209bde","bugs":{"url":"https://github.com/arunesh90/next-i18next/issues"},"homepage":"https://github.com/arunesh90/next-i18next#readme","_id":"@arunesh90/next-i18next@7.0.2","_nodeVersion":"14.19.1","_npmVersion":"6.14.16","dist":{"integrity":"sha512-JVsXmFYoPHCkoowsPPjptYL5FFO6RwOjkRHfoG9HMb/75lJco3BV1IxK7RnPfyqYt3e6RasiBDeP3V0UFSnmdg==","shasum":"7396aac229ad067e02550b70b4edef4aa18c068a","tarball":"https://registry.npmjs.org/@arunesh90/next-i18next/-/next-i18next-7.0.2.tgz","fileCount":68,"unpackedSize":112149,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrqQwysJ1pun2a0cpkjFXyVHSEOAaBvzjbpTFSKyrZdAIgAXM0DARJhAiTMNYfkxVtvFxpqh+sSAWdwNmBQr7TdbI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJijqwyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrvqA//eXHFt4OdZhwae29RKsCCGo5d4+wYhiaijo40rtLtEWUlELBl\r\n/FjsFpGiiZkkYgfc0ievTskh68oYYuNXwhIJvug9z29yQ1GsQmS7eme6xOZp\r\n76V8x5KfAWL4RRCZRiOQSnZ7m3h80L4ClePl0JdaLolmoxUZJB1Qtt69i1zQ\r\nNqdES9wIkPh6B6sPlMJfJ7x5/9FXNB8zNMeCSLcBuykP8zz8reh06qm08MYV\r\nDQBYmridafhfbVwChyD2Y3HmW0+vo/qyfouq21K6ElrGYCYuU7365sLKxuft\r\nNPIunHoy0DJ9qdyhPZkZzpV0yvfsR/vrStz5RCotS6A6aVB5Uo5sGtZ7NcPK\r\nD3qaYM1btDVGrfTAXB8rfjlioJozuLbkga5xjIVB+zKXuhOIYGPVVyfrTXws\r\nm5+6EKFAYfugVAaot8lIRDpYZBlZ/nV948jK4Ycy5E5uVw4pEBm0uO8+1sf/\r\n/O07l39KtiFDEE/Mpuz6ytOR7eAw1PER1sk4qvxRNz0t7chV7eW8M71Xn2v+\r\nwmQpCsm9u00jQ01z/RoEexM9qvGOUW4u5/OOL4vBkcQJ/DJ1amr2E2hCMgaD\r\n+b/IpjGT4MmO4xAqHkUhRH905+z2oe0O+prQemZWjGh+7L7jYTvZSBNQhFPu\r\nei9XGAfpAWLiWxpRr7VYdvA65PonSCBJmP8=\r\n=hxRS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"arunesh90","email":"arunesh90@outlook.com"},"directories":{},"maintainers":[{"name":"arunesh90","email":"arunesh90@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-i18next_7.0.2_1653517362111_0.3723581776794347"},"_hasShrinkwrap":false}},"time":{"created":"2022-05-25T22:22:42.050Z","7.0.2":"2022-05-25T22:22:42.281Z","modified":"2022-05-25T22:22:42.429Z"},"maintainers":[{"name":"arunesh90","email":"arunesh90@outlook.com"}],"description":"The easiest way to translate your NextJs apps.","homepage":"https://github.com/arunesh90/next-i18next#readme","keywords":["react","i18next","nextjs","next","translation","localisation","localization","locale"],"repository":{"type":"git","url":"git+ssh://git@github.com/arunesh90/next-i18next.git"},"author":{"name":"Arunesh","email":"hello@arunesh.me"},"bugs":{"url":"https://github.com/arunesh90/next-i18next/issues"},"license":"MIT","readme":"# next-i18next\n[![npm version](https://badge.fury.io/js/next-i18next.svg)](https://badge.fury.io/js/next-i18next)\n[![CircleCI](https://circleci.com/gh/isaachinman/next-i18next.svg?style=shield)](https://circleci.com/gh/isaachinman/next-i18next)\n[![Package Quality](https://npm.packagequality.com/shield/next-i18next.svg)](https://packagequality.com/#?package=next-i18next)\n\n**The easiest way to translate your NextJs apps.**\n\nIf you are using next-i18next in production, please consider [sponsoring the package](https://github.com/sponsors/isaachinman) with any amount you think appropriate.\n\n## What is this?\n\n`next-i18next` is a plugin for [Next.js](https://nextjs.org/) projects that allows you to get translations up and running quickly and easily, while fully supporting SSR, multiple [namespaces](https://www.i18next.com/principles/namespaces) with codesplitting, etc.\n\nWhile `next-i18next` uses [i18next](https://www.i18next.com/) and [react-i18next](https://github.com/i18next/react-i18next) under the hood, users of `next-i18next` simply need to include their translation content as JSON files and don't have to worry about much else.\n\nA live demo is [available here](http://next-i18next.com/). This demo app is the [simple example](./examples/simple/) - nothing more, nothing less.\n\n## Setup\n\n### 1. Installation\n\n```jsx\nyarn add next-i18next\n```\n\nYou need to also have `react` and `next` installed.\n\n### 2. Translation content\n\nBy default, `next-i18next` expects your translations to be organised as such:\n```\n.\n└── public\n └── static\n └── locales\n ├── en\n | └── common.json\n └── de\n └── common.json\n```\n\nThis structure can also be seen in the [simple example](./examples/simple).\n\nIf you want to structure your translations/namespaces in a custom way, you will need to pass modified `localePath` and `localeStructure` values into the initialisation config.\n\n### 3. Project setup\n\nThe default export of `next-i18next` is a class constructor, into which you pass your config options. The resulting class has all the methods you will need to translate your app:\n\n```jsx\nconst NextI18Next = require('next-i18next').default\nconst { localeSubpaths } = require('next/config').default().publicRuntimeConfig\nconst path = require('path')\n\nmodule.exports = new NextI18Next({\n otherLanguages: ['de'],\n localeSubpaths,\n localePath: path.resolve('./public/static/locales')\n})\n```\n\nNote that `localePath` is required, and must be an absolute path.\n\n[A full list of options can be seen here](#options).\n\nIt's recommended to export this `NextI18Next` instance from a single file in your project, where you can continually import it from to use the class methods as needed. You can see this approach in the [examples/simple/i18n.js](./examples/simple/i18n.js) file.\n\nAfter creating and exporting your `NextI18Next` instance, you need to take the following steps to get things working:\n\n1. Create an `_app.js` file inside your `pages` directory, and wrap it with the `NextI18Next.appWithTranslation` higher order component (HOC). You can see this approach in the [examples/simple/pages/_app.js](./examples/simple/pages/_app.js).\nYour app component must either extend `App` if it's a class component or define a `getInitialProps` if it's a functional component [(explanation here)](https://github.com/isaachinman/next-i18next/issues/615#issuecomment-575578375).\n2. Create a `next.config.js` file inside your root directory if you want to use locale subpaths. You can see this approach in the [examples/simple/next.config.js](./examples/simple/next.config.js) (Next.js 9.5+ required).\n\nNote: You can pass `shallowRender: true` into config options to avoid triggering getInitialProps when `changeLanguage` method is invoked.\n\nThat's it! Your app is ready to go. You can now use the `NextI18Next.withTranslation` HOC to make your components or pages translatable, based on namespaces:\n\n```jsx\n// This is our initialised `NextI18Next` instance\nimport { withTranslation } from '../i18n'\n\nconst Footer = ({ t }) => (\n \n)\n\nexport default withTranslation('footer')(Footer)\n```\n\n### 4. Declaring namespace dependencies\n\nThe `withTranslation` HOC is responsible for passing the `t` function to your component. It enables all the translation functionality provided by `i18next`. Further, it asserts your component gets re-rendered on language change or changes to the translation catalog itself (loaded translations). More info can be found [here](https://react.i18next.com/latest/withtranslation-hoc).\n\nBy default, `next-i18next` will send _all your namespaces_ down to the client on each initial request. This can be an appropriate approach for smaller apps with less content, but a lot of apps will benefit from splitting namespaces based on route.\n\nTo do that, you need to return a `namespacesRequired` array via `getInitialProps` on your page-level component. You can see this approach in [examples/simple/pages/index.js](./examples/simple/pages/index.js).\n\nNote: `withTranslation` provides namespaces to the component that it wraps. However, `namespacesRequired` provides the total available namespaces to the entire React tree and belongs on the page level. Both are required (although you can use `Trans` instead of `withTranslation` if desired).\n\n### 5. Locale subpaths\n\nOne of the main features of this package, besides translation itself, are locale subpaths. It's easiest to explain by example:\n\n```\nmyapp.com ---> Homepage in default lang\nmyapp.com/de ---> Homepage in German\n```\n\nThis functionality is not enabled by default, and must be passed as an option into the `NextI18Next` constructor as a config option:\n\n```jsx\nnew NextI18Next({\n localeSubpaths: {\n de: 'de'\n }\n})\n```\n\nThe `localeSubpaths` object must also be passed into `next.config.js`, via the `nextI18NextRewrites` util, which you can import from `next-i18next/rewrites`.\n\nThe `localeSubpaths` option is a key/value mapping, where keys are the locale itself (case sensitive) and values are the subpath without slashes.\n\nNow, all your page routes will be duplicated across all your locale subpaths. Here's an example:\n\n```jsx\n----- Config -----\nnew NextI18Next({\n localeSubpaths: {\n fr: 'fr',\n de: 'german',\n en: 'eng',\n }\n})\n\n----- Output -----\nmyapp.com/fr\nmyapp.com/german\nmyapp.com/eng\n```\n\nWhen using the localeSubpaths option, our middleware will redirect as needed in the wrapped `getInitialProps` one level above your `_app`, so none of your code will be called.\n\nThe main \"gotcha\" with locale subpaths is routing. We want to be able to route to \"naked\" routes, and not have to worry about the locale subpath part of the route:\n\n```jsx\n\n```\n\nWith this link, we would expect someone whose language is set to French to automatically be directed to `/fr/some-page`.\n\nTo do that, we must import `Link` from your `NextI18Next` instance, **not next/router**:\n\n```jsx\n// This is our initialised `NextI18Next` instance\nimport { Link } from '../i18n'\n\nconst SomeLink = () => (\n \n This will magically prepend locale subpaths\n \n)\n```\n\nWe can also navigate imperatively with locale subpaths by importing `Router` from your `NextI18Next` instance. The exported Router shares the same API as the native Next Router. The push, replace, and prefetch functions will automatically prepend locale subpaths.\n\n```jsx\n// This is our initialised `NextI18Next` instance\nimport { Router } from '../i18n'\n\nconst SomeButton = () => (\n Router.push('/some-page')}\n >\n This will magically prepend locale subpaths\n \n)\n```\n\n## Accessing the Current Language\n\nIn many cases, you'll need to know the currently active language. Most of the time, to accomplish this, you should use the `withTranslation` HOC, which will pass an `i18n` prop to the wrapped component and further asserts your component will get re-rendered on language change or changes to the translation catalog itself (loaded translations). More info can be found [here](https://react.i18next.com/latest/withtranslation-hoc).\n\nIf for some reason you need to access the current language and `withTranslation` doesn't suit your needs, you can use the `I18nContext`:\n\n```jsx\nimport { I18nContext } from 'next-i18next'\n\nconst { i18n: { language } } = useContext(I18nContext)\n```\n\n## Options\n\n| Key | Default value |\n| ------------- | ------------- |\n| `browserLanguageDetection` | `true` |\n| `defaultNS` | `'common'` |\n| `defaultLanguage` | `'en'` |\n| `ignoreRoutes` | `['/_next/', '/static/', '/public/', '/api/']` |\n| `otherLanguages` (required) | `[]` |\n| `localeExtension` | `'json'` |\n| `localePath` (required) | `'/public/static/locales'` |\n| `localeStructure` | `'{{lng}}/{{ns}}'` |\n| `localeSubpaths` | `{}` |\n| `serverLanguageDetection` | `true` |\n| `strictMode` | `true` |\n| `use` (for plugins) | `[]` |\n| `customDetectors` | `[]` |\n| `shallowRender` | `false` |\n\n_This table contains options which are specific to next-i18next. All other [i18next options](https://www.i18next.com/overview/configuration-options) can be passed in as well._\n\n## Notes\n\n- [`next export` is not supported.](https://github.com/isaachinman/next-i18next/issues/780)\n- [To add a `lang` attribute to your top-level html DOM node, you must create a `_document.js` file.](https://github.com/isaachinman/next-i18next/issues/20#issuecomment-443461652)\n- [Localising `next/head` requires special consideration due to NextJs internals](https://github.com/isaachinman/next-i18next/issues/251#issuecomment-479421852).\n- [How to use multiple namespaces in the same component](https://github.com/isaachinman/next-i18next/issues/762#issuecomment-661348457)\n\n## Usage with TypeScript\n\n`next-i18next` is written in TypeScript and has full support for it. Refer to the usage guide [here](./TYPESCRIPT.md).\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n\n\n
\"Rob
Rob Capellini
💻 ⚠️		\"Alexander
Alexander Kachkaev
📢 💬 🤔 💻 ⚠️		\"Mathias
Mathias Wøbbe
💻 🤔 ⚠️		\"Lucas
Lucas Feliciano
🤔 👀		\"Ryan
Ryan Leung
💻		\"Nathan
Nathan Friemel
💻 📖 💡 🤔
\n\n\nThis project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!\n\n## Supported by BrowserStack\nThanks to [BrowserStack](https://browserstack.com/) for their support of this open-source project.\n\n\n","readmeFilename":"README.md"}