0.8.0

App Router

Rewrite the URL to hide the locale

You might have noticed that by default, next-international redirects and shows the locale in the URL (e.g /en/products). This is helpful for users, but you can transparently rewrite the URL to hide the locale (e.g /products).

Navigate to the middleware.ts file and set the urlMappingStrategy to rewrite (the default is redirect):

// middleware.ts
const I18nMiddleware = createI18nMiddleware(['en', 'fr'] as const, 'fr', {
    urlMappingStrategy: 'rewrite'
})

useChangeLocale with basePath

When using useChangeLocale and if you have set a basePath option inside next.config.js, you'll also need to set it here:

const changeLocale = useChangeLocale({
  basePath: '/your-base-path'
})

What's Changed

• fix(international-types): plural tags by @QuiiBz in #80
• chore: improve README by @QuiiBz in #82
• feat(next-international): useParams & rewrite strategy to hide locale from URL by @EdmundKorley in #83
• fix(international-types): plurals params with scope by @QuiiBz in #88
• fix(next-international): useChangeLocale with basePath by @QuiiBz in #90
• fix(next-international): derive plurals from fallback locale by @ArmanAryanpour in #79
• fix(next-international): plural with scopes by @QuiiBz in #91

New Contributors

• @EdmundKorley made their first contribution in #83
• @ArmanAryanpour made their first contribution in #79

Full Changelog: 0.7.0...0.8.0

0.7.0

Plurals

Plural translations work out of the box without any external dependencies, using the Intl.PluralRules API, which is supported in all browsers and Node.js.

To declare plural translations, append # followed by zero, one, two, few, many or other:

// locales/en.ts
export default {
  'cows#one': 'A cow',
  'cows#other': '{count} cows'
} as const

The correct translation will then be determined automatically using a mandatory count parameter. This works with the Pages Router, App Router in both Client and Server Components, and with scoped translations:

export default function Page() {
  const t = useI18n()

  return (
    <div>
      {/* Output: A cow */}
      <p>{t('cows', { count: 1 })}</p>
      {/* Output: 3 cows */}
      <p>{t('cows', { count: 3 })}</p>
    </div>
  )
}

What's Changed

• chore(next-international): remove peer dependencies by @QuiiBz in #76
• feat: add plurals support by @QuiiBz in #75
• feat: typesafe plural count by @QuiiBz in #78

Full Changelog: 0.6.4...0.7.0

0.6.4

What's Changed

• fix(next-international): fallbackLocale type for nested objects locales by @QuiiBz in #74

Full Changelog: 0.6.3...0.6.4

0.6.3

What's Changed

• chore: documentation fixes by @QuiiBz in #70
• chore: fix docs by @bastibuck in #71
• fix(next-international): nested objects locales with fallbackLocale by @QuiiBz in #73

New Contributors

• @bastibuck made their first contribution in #71

Full Changelog: 0.6.2...0.6.3

0.6.2

What's Changed

• fix(next-international): nested objects locales in App Router by @QuiiBz in #69

Full Changelog: 0.6.1...0.6.2

0.6.1

What's Changed

• fix(next-international): support nested objects in App Router by @QuiiBz in #66

Full Changelog: 0.6.0...0.6.1

0.6.0

Nested objects locales

You can now write locales using nested objects instead of the default dot notation. You can use the syntax you prefer without updating anything else:

// locales/en.ts
export default {
  hello: 'Hello',
  hello: {
    world: 'Hello world!',
    nested: {
      translations: 'Translations'
    }
  }
} as const

It's the equivalent of the following:

export default {
  'hello': 'Hello',
  'hello.world': 'Hello world!',
  'hello.nested.translations': 'Translations'
} as const

What's Changed

• fix(examples): tsc errors by @QuiiBz in #63
• feat: nested object scopes by @QuiiBz in #64

Full Changelog: 0.5.3...0.6.0

0.5.3

Fix the bundle that preserved JSX instead of transforming it with createElement calls

Full Changelog: 0.5.2...0.5.3

0.5.2

Breaking change

I18nProviderServer has been removed because it is now useless. You can simply remove it from your layout, see the README for the updated documentation.

What's Changed

• fix(app): React Server Components issues by @QuiiBz in #61

Full Changelog: 0.5.1...0.5.2

0.5.1

What's Changed

• fix(app-router): typesafe getCurrentLocale in Server Components by @QuiiBz in #57
• fix(next-international): include types in files by @QuiiBz in #59

Full Changelog: 0.5.0...0.5.1