hello_en
') 65 | // cy.request('/de/auto-static') 66 | // .its('body') 67 | // .should('include', 'hello_de
') 68 | }) 69 | }) 70 | -------------------------------------------------------------------------------- /cypress/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "types": ["cypress", "@types/testing-library__cypress"] 6 | }, 7 | "include": ["**/*.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /docs/v8-migration.md: -------------------------------------------------------------------------------- 1 | # Migration Guide v7 to v8 2 | 3 | Please read the [full documentation](https://github.com/i18next/next-i18next/blob/master/README.md), before migrating from previous versions to v8. 4 | 5 | This is a guide which will cover most use cases to migrate from v7 to v8. 6 | We advise migrating as soon as possible, as new versions of NextJs won't be compatible with the v7 of this package `next-i18next`. 7 | 8 | ## What is new? 9 | 10 | This package, `next-i18next`, has changed a lot because it now is _not_ providing internationalised routing anymore, as [NextJs has first class support for it.](https://nextjs.org/docs/advanced-features/i18n-routing) 11 | 12 | Before the translation functionality was initialised on a global level, in `_app.js`. Now, you must use a new method, called `serverSideTranslations` on _each_ page in your `pages` directory. 13 | 14 | The object `i18n` which was imported directly from `i18n.js` in `next-i18next@<8` suppored only client-side-rendering. Now in the v8 the `i18n` object also supports server-side rendering. So you can use the `i18n.language` for server-side rendered elements. 15 | 16 | ## What is the same? 17 | 18 | 1. `appWithTranslation` still wraps the App in `_app.js` 19 | 2. `withTranslation` works the same way 20 | 3. `useTranslation` works the same way 21 | 4. The [translation content structure](https://github.com/i18next/next-i18next/blob/master/README.md#2-translation-content) remains the same 22 | 23 | ## What is different? 24 | 25 | 1. `getInitialProps` is not supported anymore, using `serverSideTranslations` is mandatory for all pages. 26 | If you require `getInitialProps` keep using the last `7.x` version. 27 | 28 | ## Step By Step Migration Guide 29 | 30 | 1. Remove `i18n.js` and add `next-i18next.config.js` as described in [the docs](https://github.com/i18next/next-i18next#3-project-setup) to your `next.config.js` file 31 | 2. Replace `import { appWithTranslation } from 'i18n'` with `import { appWithTranslation } from 'next-i18next'` 32 | 3. Replace all instances of `import { withTranslation } from 'i18n` to `import { withTranslation } from 'next-i18next'` 33 | 4. Replace all instances of `import { useTranslation } from 'i18n` to `import { useTranslation } from 'next-i18next'` 34 | 5. Add to `getServerSideProps` or `getStaticProps` in the return as props`...(await serverSideTranslations(locale, [
15 | next-i18next
16 |
17 |
18 | {heading}
19 | 20 | 21 | 22 | 23 | ) 24 | -------------------------------------------------------------------------------- /examples/auto-static-optimize/next-env.d.ts: -------------------------------------------------------------------------------- 1 | ///
40 |
93 |
41 | 
55 |
56 |
57 | 42 | {t('blog.appDir.question')} 43 |
44 |
45 |
55 |
56 |
58 | 
73 |
74 |
75 | 59 | {t('blog.optimized.question')} 60 |
61 |
62 |
73 |
74 |
76 | .jpg)
90 |
91 |
92 | 77 | {t('blog.ssg.question')} 78 |
79 |
80 |
90 |
91 | 94 |
95 |
96 |
97 |
98 | {/* alternative language change without using Link component
99 |
102 | */}
103 | {/* alternative language change without using Link component, but this will change language only on client side
104 | */}
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
16 | next-i18next
17 |
18 |
19 | {heading}
20 | 21 | 22 | 23 | 24 | ) 25 | -------------------------------------------------------------------------------- /examples/simple/next-env.d.ts: -------------------------------------------------------------------------------- 1 | ///
40 |
92 |
41 | 
55 |
56 |
57 |
58 | 42 | {t('blog.appDir.question')} 43 |
44 |
45 |
55 |
56 |
59 |
74 |
75 |
76 | 60 | {t('blog.optimized.question')} 61 |
62 |
63 |
74 |
75 |
77 |
89 |
90 |
91 | {t('blog.ssg.question')}
78 |
79 |
89 |
90 | 93 |
94 |
95 |
96 |
97 | {/* alternative language change without using Link component
98 |
101 | */}
102 | {/* alternative language change without using Link component, but this will change language only on client side
103 | */}
106 |
107 |
108 |
109 |
110 |
9 | next-language-detector example
10 |
11 |
12 | {heading}
13 | 17 | 18 | 19 | 20 | ) 21 | -------------------------------------------------------------------------------- /examples/ssg/components/LanguageSwitchLink.js: -------------------------------------------------------------------------------- 1 | import languageDetector from '../lib/languageDetector' 2 | import { useRouter } from 'next/router' 3 | import Link from 'next/link' 4 | 5 | const LanguageSwitchLink = ({ locale, ...rest }) => { 6 | const router = useRouter() 7 | 8 | let href = rest.href || router.asPath 9 | let pName = router.pathname 10 | Object.keys(router.query).forEach(k => { 11 | if (k === 'locale') { 12 | pName = pName.replace(`[${k}]`, locale) 13 | return 14 | } 15 | pName = pName.replace(`[${k}]`, router.query[k]) 16 | }) 17 | if (locale) { 18 | href = rest.href ? `/${locale}${rest.href}` : pName 19 | } 20 | if (href.indexOf(`/${locale}`) < 0) { 21 | href = `/${locale}${href}` 22 | } 23 | 24 | return ( 25 | 26 | 32 | 33 | ) 34 | } 35 | 36 | export default LanguageSwitchLink 37 | -------------------------------------------------------------------------------- /examples/ssg/components/Link.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Link from 'next/link' 3 | import { useRouter } from 'next/router' 4 | 5 | const LinkComponent = ({ 6 | children, 7 | skipLocaleHandling, 8 | ...rest 9 | }) => { 10 | const router = useRouter() 11 | const locale = rest.locale || router.query.locale || '' 12 | 13 | let href = rest.href || router.asPath 14 | if (href.indexOf('http') === 0) skipLocaleHandling = true 15 | if (locale && !skipLocaleHandling) { 16 | href = href 17 | ? `/${locale}${href}` 18 | : router.pathname.replace('[locale]', locale) 19 | } 20 | 21 | return ( 22 | <> 23 | 24 | {children} 25 | 26 | 27 | ) 28 | } 29 | 30 | export default LinkComponent 31 | -------------------------------------------------------------------------------- /examples/ssg/lib/getStatic.js: -------------------------------------------------------------------------------- 1 | import { serverSideTranslations } from 'next-i18next/serverSideTranslations' 2 | import i18nextConfig from '../next-i18next.config' 3 | 4 | export const getI18nPaths = () => 5 | i18nextConfig.i18n.locales.map(lng => ({ 6 | params: { 7 | locale: lng, 8 | }, 9 | })) 10 | 11 | export const getStaticPaths = () => ({ 12 | fallback: false, 13 | paths: getI18nPaths(), 14 | }) 15 | 16 | export const getI18nProps = async (ctx, ns = ['common']) => { 17 | const locale = ctx?.params?.locale || i18nextConfig.i18n.defaultLocale 18 | let props = { 19 | ...(await serverSideTranslations(locale, ns)), 20 | } 21 | return props 22 | } 23 | 24 | export const makeStaticProps = 25 | (ns = []) => 26 | async ctx => ({ 27 | props: await getI18nProps(ctx, ns), 28 | }) 29 | -------------------------------------------------------------------------------- /examples/ssg/lib/languageDetector.js: -------------------------------------------------------------------------------- 1 | import languageDetector from 'next-language-detector' 2 | import i18nextConfig from '../next-i18next.config' 3 | 4 | export default languageDetector({ 5 | fallbackLng: i18nextConfig.i18n.defaultLocale, 6 | supportedLngs: i18nextConfig.i18n.locales, 7 | }) 8 | -------------------------------------------------------------------------------- /examples/ssg/lib/redirect.js: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react' 2 | import { useRouter } from 'next/router' 3 | import languageDetector from './languageDetector' 4 | 5 | export const useRedirect = to => { 6 | const router = useRouter() 7 | to = to || router.asPath 8 | 9 | // language detection 10 | useEffect(() => { 11 | const detectedLng = languageDetector.detect() 12 | if ( 13 | to.startsWith('/' + detectedLng) && 14 | router.route === '/404' 15 | ) { 16 | // prevent endless loop 17 | router.replace('/' + detectedLng + router.route) 18 | return 19 | } 20 | 21 | languageDetector.cache(detectedLng) 22 | router.replace('/' + detectedLng + to) 23 | }) 24 | 25 | return <> 26 | } 27 | 28 | export const Redirect = () => { 29 | useRedirect() 30 | return <> 31 | } 32 | 33 | // eslint-disable-next-line react/display-name 34 | export const getRedirect = to => () => { 35 | useRedirect(to) 36 | return <> 37 | } 38 | -------------------------------------------------------------------------------- /examples/ssg/next-i18next.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | debug: process.env.NODE_ENV === 'development', 3 | i18n: { 4 | defaultLocale: 'en', 5 | locales: ['en', 'de', 'it'], 6 | }, 7 | } 8 | -------------------------------------------------------------------------------- /examples/ssg/next.config.js: -------------------------------------------------------------------------------- 1 | // const { i18n } = require('./next-i18next.config') 2 | 3 | module.exports = { 4 | output: 'export', 5 | // i18n, 6 | trailingSlash: true, 7 | } 8 | -------------------------------------------------------------------------------- /examples/ssg/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "next-i18next-example-ssg", 3 | "version": "13.0.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "404": "cp out/404/index.html out/404.html", 7 | "dev": "next dev", 8 | "build": "next build", 9 | "postbuild": "npm run 404", 10 | "server": "next start", 11 | "start": "npm run dev", 12 | "lint": "next lint", 13 | "test": "npm run lint", 14 | "serve": "http-server out -p 8080", 15 | "downloadLocales": "locize download --project-id=0842ada9-1d1d-4d48-ab27-08f6a132f558 --ver=latest --clean=true --path=./public/locales", 16 | "clean": "rimraf .next out" 17 | }, 18 | "dependencies": { 19 | "i18next": "24.2.2", 20 | "next": "15.1.6", 21 | "next-i18next": "^15.4.2", 22 | "next-language-detector": "^1.1.0", 23 | "react": "^19.0.0", 24 | "react-dom": "^19.0.0", 25 | "react-i18next": "^15.4.0" 26 | }, 27 | "devDependencies": { 28 | "eslint-config-next": "15.1.6", 29 | "http-server": "14.1.1", 30 | "locize-cli": "8.4.0", 31 | "rimraf": "^6.0.1" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /examples/ssg/pages/404.js: -------------------------------------------------------------------------------- 1 | import { Redirect } from '../lib/redirect' 2 | export default Redirect 3 | -------------------------------------------------------------------------------- /examples/ssg/pages/[locale]/404.js: -------------------------------------------------------------------------------- 1 | import { useTranslation } from 'next-i18next' 2 | import { getStaticPaths, makeStaticProps } from '../../lib/getStatic' 3 | 4 | import { Header } from '../../components/Header' 5 | import { Footer } from '../../components/Footer' 6 | 7 | import Link from '../../components/Link' 8 | 9 | const Homepage = () => { 10 | const { t } = useTranslation(['404', 'common', 'footer']) 11 | 12 | return ( 13 | <> 14 |
17 |
18 |
19 |
20 |
21 |
17 |
18 |
19 |
20 |
21 | {someOtherData}
23 |Hello world
, {
35 | i18n: {
36 | defaultLocale: 'en',
37 | locales: ['en', 'de'],
38 | },
39 | })
40 |
41 | const createProps = (
42 | locale = 'en',
43 | router: PartialHello world
,
90 | {
91 | configOverride: 'custom-value',
92 | i18n: {
93 | defaultLocale: 'en',
94 | locales: ['en', 'de'],
95 | },
96 | } as any
97 | )
98 | const customProps = {
99 | ...createProps(),
100 | pageProps: {
101 | _nextI18Next: {
102 | initialLocale: 'en',
103 | },
104 | } as any,
105 | } as any
106 | render(Hello world
,
116 | {
117 | i18n: {
118 | defaultLocale: 'en',
119 | locales: ['en', 'de'],
120 | },
121 | resources: {
122 | en: {
123 | xyz: {
124 | custom: 'resources',
125 | },
126 | },
127 | },
128 | } as any
129 | )
130 | render(Hello world
145 | ))
146 | const customProps = {
147 | ...createProps(),
148 | pageProps: {
149 | _nextI18Next: {
150 | initialLocale: 'en',
151 | userConfig: null,
152 | },
153 | } as any,
154 | } as any
155 | expect(() =>
156 | render(Hello world
,
165 | {} as any
166 | )
167 | const customProps = {
168 | ...createProps(),
169 | pageProps: {
170 | _nextI18Next: {
171 | initialLocale: 'en',
172 | userConfig: {},
173 | },
174 | } as any,
175 | } as any
176 | expect(() =>
177 | render(Hello world
,
184 | { i18n: {} as any }
185 | )
186 | const customProps = {
187 | ...createProps(),
188 | pageProps: {
189 | _nextI18Next: {
190 | initialLocale: 'en',
191 | userConfig: { i18n: {} },
192 | },
193 | } as any,
194 | } as any
195 | expect(() =>
196 | render(Hello world
205 | ))
206 | const customProps = {
207 | ...createProps(),
208 | pageProps: {
209 | _nextI18Next: {
210 | initialLocale: 'en',
211 | userConfig: {
212 | i18n: {
213 | defaultLocale: 'fr',
214 | },
215 | },
216 | },
217 | } as any,
218 | } as any
219 |
220 | customProps.router = {
221 | ...customProps.router,
222 | locale: undefined,
223 | }
224 |
225 | render(Hello world
234 | ))
235 | const customProps = {
236 | ...createProps(),
237 |
238 | pageProps: {
239 | _nextI18Next: {
240 | initialLocale: undefined,
241 | userConfig: {
242 | i18n: {
243 | defaultLocale: 'fr',
244 | },
245 | },
246 | },
247 | } as any,
248 | } as any
249 |
250 | customProps.router = {
251 | ...customProps.router,
252 | locale: undefined,
253 | }
254 |
255 | render(language is: {lng}
,
304 | {
305 | i18n: {
306 | defaultLocale: 'en',
307 | locales: ['en', 'de'],
308 | },
309 | }
310 | )
311 |
312 | const { rerender } = render(Hello world
38 | }
39 |
40 | const DummyApp = appWithTranslation(MyApp)
41 |
42 | const props = {
43 | pageProps: {
44 | _nextI18Next: {
45 | initialLocale: 'en',
46 | userConfig: {
47 | i18n: {
48 | defaultLocale: 'en',
49 | locales: ['en', 'fr'],
50 | },
51 | },
52 | },
53 | } as any,
54 | router: {
55 | locale: 'en',
56 | route: '/',
57 | },
58 | } as any
59 |
60 | const renderComponent = () => renderToString(Hello world
)
20 |
21 | const props = {
22 | pageProps: {
23 | _nextI18Next: {
24 | initialLocale: 'en-US',
25 | userConfig: {
26 | i18n: {
27 | defaultLocale: 'en',
28 | locales: ['en', 'fr'],
29 | },
30 | },
31 | },
32 | } as SSRConfig,
33 | router: {
34 | locale: 'en',
35 | },
36 | } as any
37 |
38 | const renderDummyComponent = () =>
39 | renderToString(