https://github.com/devgioele/next-fluent

The most natural-sounding way to translate your Next.js apps
https://github.com/devgioele/next-fluent

fluent i18n i18next l10n locale localisation localization next nextjs react translation

Last synced: about 1 month ago
JSON representation

The most natural-sounding way to translate your Next.js apps

• Host: GitHub
• URL: https://github.com/devgioele/next-fluent
• Owner: devgioele
• Created: 2023-01-08T11:15:55.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-28T07:30:54.000Z (almost 2 years ago)
• Last Synced: 2024-08-11T09:47:52.323Z (3 months ago)
• Topics: fluent, i18n, i18next, l10n, locale, localisation, localization, next, nextjs, react, translation
• Language: TypeScript
• Homepage:
• Size: 102 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# next-fluent

The most natural-sounding way to translate your Next.js apps.

Like [next-i18next](https://github.com/i18next/next-i18next),

but using [Fluent](https://projectfluent.org/),

the successor of [i18next](https://www.i18next.com/).

# WIP 🚧

This is a WIP and there are currently two main obstacles that I don't know how to solve:

- The first load JS is about 175 kB, which is unacceptably big

- The SSG example does not work

## Setup

*Coming soon...*

## Caveats

There are some non-obvious prohibited usages due to current limitations of [@fluent/react](https://github.com/projectfluent/fluent.js/tree/master/fluent-react).

When using the `elems` attribute of the `Localized` element, thus using the React overlays mechanism,

pay attention to the following:

- `Localized` must have one child element

- The identifiers used in the `elems` record cannot be numbers or HTML elements

## How it works

Makes a bridge between [@fluent/react](https://github.com/projectfluent/fluent.js/tree/master/fluent-react)

and [Next.js](https://nextjs.org/) using [internationalized routing](https://nextjs.org/docs/advanced-features/i18n-routing).

Uses [cheerio](https://cheerio.js.org/) for the SSR of localized components

using [React Overlays](https://github.com/projectfluent/fluent.js/wiki/React-Overlays).