1.1.0
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)
- Plurals with
⚠️ 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:
// locales/en.ts
export default {
'cows#zero': 'No cows',
'cows#one': 'A cow',
'cows#other': '{count} cows'
} as const
t('cows', { count: 0 }) // No cows
t('cows', { count: 1 }) // A cow
t('cows', { count: 3 }) // 3 cows
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 a Suspense
boundary.
If you want to preserve search params, you can manually use the preserveSearchParams
option inside useChangeLocale
:
// Client Component
'use client'
import { useChangeLocale } from '../../locales/client'
export function ChangeLocaleButton() {
const changeLocale = useChangeLocale({ preserveSearchParams: true })
...
}
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)
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
// app/[locale]/client/layout.tsx
'use client'
import en from '../../locales/en'
export default function Layout({ children }: { children: ReactElement }) {
return (
<I18nProviderClient fallbackLocale={en}>
{children}
</I18nProviderClient>
)
}
// locales/client.ts
import en from './en'
export const {
...
} = createI18nClient({
...
})
After:
// app/[locale]/client/layout.tsx
'use client'
export default function Layout({ children, params: { locale } }: { children: ReactElement, params: { locale: string } }) {
return (
<I18nProviderClient locale={locale}>
{children}
</I18nProviderClient>
)
}
// locales/client.ts
import en from './en'
export const {
...
} = createI18nClient({
...
}, {
fallbackLocale: en
})
What's Changed
- chore: update sponsors by @QuiiBz in #176
- chore: update sponsors url by @QuiiBz in #177
- chore: add sherif to lint monorepo by @QuiiBz in #185
- ci: update sherif by @QuiiBz in #203
- chore(docs): add
'use client'
annotation by @medyahyejoud in #215 - ci: fix sherif by @QuiiBz in #218
- feat: 1.1.0 by @QuiiBz in #205
New Contributors
- @medyahyejoud made their first contribution in #215
Full Changelog: 1.0.1...1.1.0