next-i18next-static-site 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Marcel Zurreck
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,100 @@
+<div align="center">
+  <h1>next-i18next-static-site</h1>
+  <p>i18next solution for static sites build with Next.js (static HTML export / <code>next export</code>).</p>
+</div>
+
+## i18next solution for Next.js
+
+This package brings you `react-i18next` and `i18next` to your static sites build with the `next export` future from Next.js.
+
+- 🗲 Translation is already rendered (SSG), client will receive the final translated site.
+- 🚀 Automatic browser language detection.
+- 🍪 Cookie stores the client language.
+- 🔥 Hot reload works also when you update your locale (translation) files.
+
+## Installation
+
+```
+npm install --save next-i18next-static-site
+```
+
+## Configuration
+
+You have to add a few environment variables to your `next.config.js`.
+
+## Usage
+
+Set the supported languages and the namespaces in your `next.config.js`:
+
+```js
+publicRuntimeConfig: {
+  i18n: {
+    languages: ["en", "de"],
+    defaultLanguage: "en",
+    namespaces: ["common", "meta", "error"],
+    defaultNamespace: "common",
+  },
+}
+```
+
+Add your locales like that:
+
+```
+📦project
+ ┣ 📂locales
+ ┃ ┣ 📂de
+ ┃ ┃ ┣ 📜common.json
+ ┃ ┗ 📂en
+ ┃ ┃ ┣ 📜common.json
+```
+
+> The locales folder structure could be changed, just update the locales loader to match your custom structure
+
+Finally implement the locales loader and the `I18nProvider` like this in your `_app.js`:
+
+```js
+import {
+  I18nProvider,
+  languages,
+  defaultLanguage,
+  namespaces,
+  defaultNamespace,
+} from "next-i18next-static-site";
+
+// Load all locales, required for next-i18next-static-site
+export const locales = {};
+languages.map((language) => {
+  locales[language] = {};
+
+  namespaces.map((namespace) => {
+    locales[language][namespace] = require("./../locales/" +
+      language +
+      "/" +
+      namespace +
+      ".json");
+  });
+});
+
+const App = function ({ Component, pageProps }) {
+  // i18n options
+  const i18n = {
+    languages,
+    defaultLanguage,
+    namespaces,
+    defaultNamespace,
+    locales,
+  };
+
+  return (
+    <I18nProvider i18n={i18n}>
+      <Component {...pageProps} />
+    </I18nProvider>
+  );
+};
+
+export default App;
+```
+
+Now you are able to use `useTranslation`, `withTranslation`, `Translation` and `Trans` directly from `react-i18next` or from `next-i18next-static-site`.
+
+> The [example Next.js site](https://github.com/xairoo/next-i18next-static-site/tree/main/apps/web-ts) provides a `Link` and `LinkText` (used for `Trans`) component and als a custom `404` page.

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import { i18n } from 'i18next';
+export { Trans, Translation, useTranslation, withTranslation } from 'react-i18next';
+
+declare const languages: string[];
+declare const defaultLanguage: string;
+declare const namespaces: string[];
+declare const defaultNamespace: string;
+declare const defaultNamespace2: string;
+declare const cookieName: string;
+declare const i18nextInstance: (language: string, locales: object) => i18n;
+declare const I18nProvider: (props: any) => any;
+declare function getAllLanguageSlugs(): {
+    params: {
+        lang: string;
+    };
+}[];
+declare function getLanguage(lang: string): string;
+
+export { I18nProvider, cookieName, defaultLanguage, defaultNamespace, defaultNamespace2, getAllLanguageSlugs, getLanguage, i18nextInstance, languages, namespaces };

package/dist/index.js

@@ -0,0 +1,169 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  I18nProvider: () => I18nProvider,
+  Trans: () => import_react_i18next.Trans,
+  Translation: () => import_react_i18next.Translation,
+  cookieName: () => cookieName,
+  defaultLanguage: () => defaultLanguage,
+  defaultNamespace: () => defaultNamespace,
+  defaultNamespace2: () => defaultNamespace2,
+  getAllLanguageSlugs: () => getAllLanguageSlugs,
+  getLanguage: () => getLanguage,
+  i18nextInstance: () => i18nextInstance,
+  languages: () => languages,
+  namespaces: () => namespaces,
+  useTranslation: () => import_react_i18next.useTranslation,
+  withTranslation: () => import_react_i18next.withTranslation
+});
+module.exports = __toCommonJS(src_exports);
+var import_config = __toESM(require("next/config"));
+var import_router = require("next/router");
+var import_react = require("react");
+var import_js_cookie = __toESM(require("js-cookie"));
+var import_i18next = __toESM(require("i18next"));
+var import_react_i18next = require("react-i18next");
+var { publicRuntimeConfig } = (0, import_config.default)();
+var defaultConfig = {
+  allowHydration: true,
+  languages: ["en"],
+  defaultLanguage: "en",
+  namespaces: ["common"],
+  defaultNamespace: "common",
+  cookieName: "lang",
+  cookieOptions: { expires: 365, path: "/" }
+};
+var config = {
+  ...defaultConfig,
+  languages: publicRuntimeConfig.i18n.languages,
+  defaultLanguage: publicRuntimeConfig.i18n.defaultLanguage,
+  namespaces: publicRuntimeConfig.i18n.namespaces,
+  defaultNamespace: publicRuntimeConfig.i18n.defaultNamespace
+};
+var languages = config.languages;
+var defaultLanguage = config.defaultLanguage;
+var namespaces = config.namespaces;
+var defaultNamespace = config.defaultNamespace;
+var defaultNamespace2 = config.defaultNamespace;
+var cookieName = config.cookieName;
+var createI18nextInstance = (locales, language) => {
+  const plugins = [
+    import_react_i18next.initReactI18next
+  ];
+  const i18nInstance = import_i18next.default;
+  plugins.map((plugin) => i18nInstance.use(plugin));
+  i18nInstance.init({
+    resources: locales,
+    cleanCode: true,
+    lng: language,
+    supportedLngs: config.languages,
+    fallbackLng: language ? language : config.defaultLanguage,
+    ns: config.namespaces,
+    defaultNS: config.defaultNamespace,
+    interpolation: {
+      escapeValue: false
+    },
+    react: {
+      useSuspense: false
+    },
+    load: "languageOnly"
+  });
+  return i18nInstance;
+};
+var globalI18nextInstance = null;
+var i18nextInstance = (language, locales) => {
+  if (!globalI18nextInstance) {
+    globalI18nextInstance = createI18nextInstance(locales, language);
+    return globalI18nextInstance;
+  } else {
+    globalI18nextInstance.changeLanguage(language);
+    return globalI18nextInstance;
+  }
+};
+var loaded = false;
+var I18nProvider = (props) => {
+  var _a;
+  const [hydration, setHydration] = (0, import_react.useState)(false);
+  const options = { ...config, ...props.i18n };
+  if (!((_a = props.i18n) == null ? void 0 : _a.locales)) {
+    throw new Error("locales object was not passed into I18nProvider");
+  }
+  const router = (0, import_router.useRouter)();
+  const { asPath, query } = router;
+  const slug = asPath.split("/")[1];
+  const langSlug = config.languages.includes(slug) && slug;
+  const language = (query.lang || langSlug || config.defaultLanguage).toString();
+  const pathLocale = (query.lang || langSlug).toString();
+  if (pathLocale && pathLocale !== "false") {
+    import_js_cookie.default.set(config.cookieName, pathLocale, config.cookieOptions);
+  }
+  if (!loaded) {
+    i18nextInstance(language, props.i18n.locales);
+  }
+  const { i18n: i18n2 } = (0, import_react_i18next.useTranslation)();
+  (0, import_react.useEffect)(() => {
+    i18n2.services.resourceStore.data = props.i18n.locales;
+    i18n2.changeLanguage(language);
+  }, [props.i18n.locales]);
+  (0, import_react.useEffect)(() => {
+    loaded = true;
+    i18n2.changeLanguage(language);
+  }, [language]);
+  (0, import_react.useEffect)(() => {
+    const hasWindow = typeof window !== "undefined";
+    if (hasWindow && options.allowHydration) {
+      setHydration(true);
+    }
+  }, []);
+  return hydration ? props.children : null;
+};
+function getAllLanguageSlugs() {
+  return config.languages.map((lang) => {
+    return { params: { lang } };
+  });
+}
+function getLanguage(lang) {
+  return config.languages.includes(lang) ? lang : config.defaultLanguage;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  I18nProvider,
+  Trans,
+  Translation,
+  cookieName,
+  defaultLanguage,
+  defaultNamespace,
+  defaultNamespace2,
+  getAllLanguageSlugs,
+  getLanguage,
+  i18nextInstance,
+  languages,
+  namespaces,
+  useTranslation,
+  withTranslation
+});

package/dist/index.mjs

@@ -0,0 +1,131 @@
+// src/index.tsx
+import getConfig from "next/config";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import Cookies from "js-cookie";
+import i18next from "i18next";
+import {
+  initReactI18next,
+  useTranslation,
+  withTranslation,
+  Translation,
+  Trans
+} from "react-i18next";
+var { publicRuntimeConfig } = getConfig();
+var defaultConfig = {
+  allowHydration: true,
+  languages: ["en"],
+  defaultLanguage: "en",
+  namespaces: ["common"],
+  defaultNamespace: "common",
+  cookieName: "lang",
+  cookieOptions: { expires: 365, path: "/" }
+};
+var config = {
+  ...defaultConfig,
+  languages: publicRuntimeConfig.i18n.languages,
+  defaultLanguage: publicRuntimeConfig.i18n.defaultLanguage,
+  namespaces: publicRuntimeConfig.i18n.namespaces,
+  defaultNamespace: publicRuntimeConfig.i18n.defaultNamespace
+};
+var languages = config.languages;
+var defaultLanguage = config.defaultLanguage;
+var namespaces = config.namespaces;
+var defaultNamespace = config.defaultNamespace;
+var defaultNamespace2 = config.defaultNamespace;
+var cookieName = config.cookieName;
+var createI18nextInstance = (locales, language) => {
+  const plugins = [
+    initReactI18next
+  ];
+  const i18nInstance = i18next;
+  plugins.map((plugin) => i18nInstance.use(plugin));
+  i18nInstance.init({
+    resources: locales,
+    cleanCode: true,
+    lng: language,
+    supportedLngs: config.languages,
+    fallbackLng: language ? language : config.defaultLanguage,
+    ns: config.namespaces,
+    defaultNS: config.defaultNamespace,
+    interpolation: {
+      escapeValue: false
+    },
+    react: {
+      useSuspense: false
+    },
+    load: "languageOnly"
+  });
+  return i18nInstance;
+};
+var globalI18nextInstance = null;
+var i18nextInstance = (language, locales) => {
+  if (!globalI18nextInstance) {
+    globalI18nextInstance = createI18nextInstance(locales, language);
+    return globalI18nextInstance;
+  } else {
+    globalI18nextInstance.changeLanguage(language);
+    return globalI18nextInstance;
+  }
+};
+var loaded = false;
+var I18nProvider = (props) => {
+  var _a;
+  const [hydration, setHydration] = useState(false);
+  const options = { ...config, ...props.i18n };
+  if (!((_a = props.i18n) == null ? void 0 : _a.locales)) {
+    throw new Error("locales object was not passed into I18nProvider");
+  }
+  const router = useRouter();
+  const { asPath, query } = router;
+  const slug = asPath.split("/")[1];
+  const langSlug = config.languages.includes(slug) && slug;
+  const language = (query.lang || langSlug || config.defaultLanguage).toString();
+  const pathLocale = (query.lang || langSlug).toString();
+  if (pathLocale && pathLocale !== "false") {
+    Cookies.set(config.cookieName, pathLocale, config.cookieOptions);
+  }
+  if (!loaded) {
+    i18nextInstance(language, props.i18n.locales);
+  }
+  const { i18n: i18n2 } = useTranslation();
+  useEffect(() => {
+    i18n2.services.resourceStore.data = props.i18n.locales;
+    i18n2.changeLanguage(language);
+  }, [props.i18n.locales]);
+  useEffect(() => {
+    loaded = true;
+    i18n2.changeLanguage(language);
+  }, [language]);
+  useEffect(() => {
+    const hasWindow = typeof window !== "undefined";
+    if (hasWindow && options.allowHydration) {
+      setHydration(true);
+    }
+  }, []);
+  return hydration ? props.children : null;
+};
+function getAllLanguageSlugs() {
+  return config.languages.map((lang) => {
+    return { params: { lang } };
+  });
+}
+function getLanguage(lang) {
+  return config.languages.includes(lang) ? lang : config.defaultLanguage;
+}
+export {
+  I18nProvider,
+  Trans,
+  Translation,
+  cookieName,
+  defaultLanguage,
+  defaultNamespace,
+  defaultNamespace2,
+  getAllLanguageSlugs,
+  getLanguage,
+  i18nextInstance,
+  languages,
+  namespaces,
+  useTranslation,
+  withTranslation
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "next-i18next-static-site",
+  "version": "0.2.1",
+  "description": "i18next solution for static sites build with Next.js (static HTML export / next export)",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "license": "MIT",
+  "files": [
+    "dist/**"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/Xairoo/next-i18next-static-site.git"
+  },
+  "author": "Marcel Zurreck <marcel.zurreck@gmail.com> (https://marcel.zurreck.com)",
+  "keywords": [
+    "nextjs",
+    "authentication",
+    "jwt",
+    "static-site"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && mkdir dist && tsup src/index.tsx --format esm,cjs --dts --external react",
+    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts",
+    "lint": "TIMING=1 eslint \"**/*.ts*\"",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.37",
+    "@types/react-dom": "^17.0.11",
+    "eslint": "^7.32.0",
+    "eslint-config-custom": "*",
+    "tsconfig": "*",
+    "typescript": "^4.5.2"
+  },
+  "dependencies": {
+    "@types/js-cookie": "^3.0.2",
+    "i18next": "^21.10.0",
+    "js-cookie": "^3.0.1",
+    "react": "^18.2.0",
+    "next": "^13.0.0",
+    "react-i18next": "^11.18.6",
+    "tsup": "^6.3.0"
+  },
+  "bugs": {
+    "url": "https://github.com/Xairoo/next-i18next-static-site/issues"
+  },
+  "homepage": "https://github.com/Xairoo/next-i18next-static-site#readme"
+}