feat: 1.1.0

[QuiiBz]

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:

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:

// 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)

⚠️ 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

// 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
})

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
next-international	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 6, 2023 2:32pm