@devoxa/next-i18next-compress NPM

:no_entry: DEPRECATED :no_entry:

This package has been archived and is no longer maintained. While we will not provide any updates or support, the code is still available for reference. If you need this package for your project, we encourage you to fork & republish the code following the license terms.

Why & How

When using natural keys (where the key is equal to the source language), the locale files can become quite large because they include two locales at once (the source language and the translated language). In addition, the JavaScript bundle also includes the source language in full.

This package automatically compresses the keys into 6-character long hashes and replaces them in the JavaScript bundle and the locale files loaded on the server.

The results are a smaller JavaScript bundle and smaller locale files (which are embedded in the HTML on the initial load and loaded as JSON for subsequent pages). The total expected savings when using natural keys are about 50% of the gzipped locale file size.

Installation

Install the package:

yarn add --dev @devoxa/next-i18next-compress

Make sure next-i18next is setup to support unserializable plugins and update your next-i18next.config.js:

const nextI18nextCompressConfig = require('@devoxa/next-i18next-compress/config')

module.exports = {
  // Your usual `next-i18next` configuration
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'de'],
  },
  serializeConfig: false,

  // Add the `next-i18next-compress` configuration
  ...nextI18nextCompressConfig(),
}

Create or update your .babelrc:

{
  "presets": ["next/babel"],
  "plugins": ["@devoxa/next-i18next-compress/babel"]
}

You're done! The next time you run next build, your JavaScript bundle and locale files will be smaller. (Keep in mind that the compression is not active during development.)

Configuration

When configuring this package, make sure to pass the options to both the configuration in next-i18next.config.js as well as the babel plugin in .babelrc:

// next-i18next.config.js
...nextI18nextCompressConfig({ hashLength: 8 }),

// .babelrc
"plugins": [["@devoxa/next-i18next-compress/babel", { "hashLength": 8 }]]

Available configuration options:

hashLength (optional, defaults to 6): The length of the resulting compressed key. Low values in combination with large locale files may cause collisions where two keys compress to the same hash, which will throw an error during build.

Limitations

If a key includes a namespace (like ns:key), the namespace will get lost during compression. This will cause a runtime error. If you need this functionality, feel free to submit a PR!
Some syntax variants are not supported (for example calling t with a variable as the argument), which will throw an error during build.

Troubleshooting

My text shows up as a hash like 1b7396 or characters like ~~~.

This means that the translation for the uncompressed key is missing from your locale files. It is recommended to use tools like i18next-parser and i18next-test to ensure that translations exist for all keys.