next-international 1.1.0 includes new features and improvements for the App Router. Upgrade now by installing the latest version:
pnpm install next-international@latest
🎉 New features
Plurals with #zero works with { count: 0 } (App & Pages Router)
Preserve search params (App Router)
rewriteDefault strategy redirects to hide the default locale (App Router)
⚠️ Breaking changes
Support Static Rendering in nested Client Components (App Router)
Plurals with #zero works with { count: 0 } (App & Pages Router)
Previously, plurals using #zero only worked with { count: 0 } for some languages, because of how the Intl.PluralRules API works. We extended it to make it available on any language, so this example now works as expected:
By default, next-international doesn't preserve search params when changing the locale. This is because useSearchParams() will opt-out the page from Static Rendering if you don't wrap the component in a Suspense boundary.
If you want to preserve search params, you can manually use the preserveSearchParams option inside useChangeLocale:
Then, don't forget to wrap the component in a Suspense boundary to avoid opting out the entire page from Static Rendering:
// Client or Server Component
import { ChangeLocaleButton } from './change-locale-button'
export default function Page() {
return (
<Suspense>
<ChangeLocaleButton />
</Suspense>
)
}
rewriteDefault strategy redirects to hide default locale (App Router)
The rewriteDefault strategy used to only show the locale segment in the URL when not using the default locale now redirects and hides the default locale to avoid having the same page twice.
Default locale: en
Before
After
/ → /
/ → /
/en → /en
/en → /
/fr → /fr
/fr → /fr
Support Static Rendering in nested Client Components (App Router)
⚠️ BREAKING (App Router)
We had an issue that would show the keys instead of the translation when statically rendering a page that had Client Components. The correct translation would only be set during hydration.
The fallbackLocale prop has been moved from I18nProviderClient to createI18nClient, to match createI18nServer:
See changes
Before
```tsx
// app/[locale]/client/layout.tsx
'use client'
import en from '../../locales/en'
export default function Layout({ children }: { children: ReactElement }) {
return (
{children}
)
}
// locales/client.ts
import en from './en'
export const {
...
} = createI18nClient({
...
})
```
After:
```tsx
// app/[locale]/client/layout.tsx
'use client'
export default function Layout({ children, params: { locale } }: { children: ReactElement, params: { locale: string } }) {
return (
{children}
)
}
// locales/client.ts
import en from './en'
export const {
...
} = createI18nClient({
...
}, {
fallbackLocale: en
})
```
Closes #210 Closes #209 Closes #208 Closes #200
next-international 1.1.0 includes new features and improvements for the App Router. Upgrade now by installing the latest version:
#zero
works with{ count: 0 }
(App & Pages Router)rewriteDefault
strategy redirects to hide the default locale (App Router)Plurals with
#zero
works with{ count: 0 }
(App & Pages Router)Previously, plurals using
#zero
only worked with{ count: 0 }
for some languages, because of how theIntl.PluralRules
API works. We extended it to make it available on any language, so this example now works as expected:Preserve search params (App Router)
By default, next-international doesn't preserve search params when changing the locale. This is because
useSearchParams()
will opt-out the page from Static Rendering if you don't wrap the component in aSuspense
boundary.If you want to preserve search params, you can manually use the
preserveSearchParams
option insideuseChangeLocale
:Then, don't forget to wrap the component in a
Suspense
boundary to avoid opting out the entire page from Static Rendering:rewriteDefault
strategy redirects to hide default locale (App Router)The
rewriteDefault
strategy used to only show the locale segment in the URL when not using the default locale now redirects and hides the default locale to avoid having the same page twice.Default locale:
en
/
→/
/
→/
/en
→/en
/en
→/
/fr
→/fr
/fr
→/fr
Support Static Rendering in nested Client Components (App Router)
⚠️ BREAKING (App Router)
We had an issue that would show the keys instead of the translation when statically rendering a page that had Client Components. The correct translation would only be set during hydration.
The
fallbackLocale
prop has been moved fromI18nProviderClient
tocreateI18nClient
, to matchcreateI18nServer
:See changes
Before ```tsx // app/[locale]/client/layout.tsx 'use client' import en from '../../locales/en' export default function Layout({ children }: { children: ReactElement }) { return (
{children}
)
}
// locales/client.ts
import en from './en'
export const {
...
} = createI18nClient({
...
})
```
After:
```tsx
// app/[locale]/client/layout.tsx
'use client'
export default function Layout({ children, params: { locale } }: { children: ReactElement, params: { locale: string } }) {
return (
{children}
)
}
// locales/client.ts
import en from './en'
export const {
...
} = createI18nClient({
...
}, {
fallbackLocale: en
})
```