feat: init

.eslintignore

@@ -0,0 +1 @@
+dist/

.eslintrc

@@ -0,0 +1,22 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "rules": {
+    "@typescript-eslint/no-var-requires": "off"
+  },
+  "env": {
+    "browser": true,
+    "es2021": true
+  }
+}

.github/workflows/ci.yml

@@ -0,0 +1,39 @@
+name: CI
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+jobs:
+  lint:
+    runs-on: ubuntu-20.04
+    steps:
+    - uses: actions/checkout@v2
+    - uses: pnpm/[email protected]
+      with:
+        version: 7
+    - name: Use Node.js 16
+      uses: actions/setup-node@v2
+      with:
+        node-version: 16
+        cache: 'pnpm'
+    - name: Install dependencies
+      run: pnpm install
+    - name: Run ESLint
+      run: pnpm lint
+  typecheck:
+    runs-on: ubuntu-20.04
+    steps:
+    - uses: actions/checkout@v2
+    - uses: pnpm/[email protected]
+      with:
+        version: 7
+    - name: Use Node.js 16
+      uses: actions/setup-node@v2
+      with:
+        node-version: 16
+        cache: 'pnpm'
+    - name: Install dependencies
+      run: pnpm install
+    - name: Run TSC
+      run: pnpm typecheck

.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+.next/
+out/
+dist/
+
+.DS_Store
+*.log*
+.eslintcache

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm lint-staged

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "arrowParens": "avoid"
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Tom Lienard
+
+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.

README.md

@@ -0,0 +1,140 @@
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="./assets/logo-white.png">
+    <source media="(prefers-color-scheme: light)" srcset="./assets/logo-black.png" />
+    <img alt="" height="80px" src="./assets/logo-white.png">
+  </picture>
+  <br />
+  Type-safe internationalization (i18n) for Next.js
+</p>
+
+---
+
+- [Features](#features)
+- [Usage](#usage)
+- [Examples](#examples)
+  - [Change current language](#change-current-language)
+  - [Use JSON files instead of TS for locales](#use-json-files-instead-of-ts-for-locales)
+- [License](#license)
+
+## Features
+
+- **100% Type-safe**: Locales in TS or JSON, type-safe `t()`, type-safe params
+- **Small**: 1.2 KB gzipped (1.7 KB uncompressed), no dependencies
+- **Simple**: No webpack configuration, no CLI, just pure TypeScript
+- **SSR**: Load only the required locale, SSRed
+
+## Usage
+
+```bash
+pnpm install next-international
+```
+
+1. Make sure that you've followed [Next.js Internationalized Routing](https://nextjs.org/docs/advanced-features/i18n-routing), and that `strict` is set to `true` in your `tsconfig.json`
+
+2. Create `locales/index.ts` with your locales:
+
+```ts
+import { createI18n } from 'next-international'
+import type Locale from './en'
+
+export const {
+  useI18n,
+  I18nProvider,
+  getLocaleStaticProps,
+} = createI18n<typeof Locale>({
+  en: () => import('./en'),
+  fr: () => import('./fr'),
+});
+```
+
+Each locale file should export a default object (don't forget `as const`):
+
+```ts
+// locales/en.ts
+export default {
+  'hello': 'Hello',
+  'welcome': 'Hello {name}!',
+} as const
+```
+
+3. Add `getLocaleStaticProps` to your pages if you want SSR, or wrap your existing `getStaticProps`:
+
+```ts
+// pages/index.tsx
+export const getStaticProps = getLocaleStaticProps()
+
+// or with an existing `getStaticProps` function:
+export const getStaticProps = getLocaleStaticProps((ctx) => {
+  // your existing code
+  return {
+    ...
+  }
+})
+```
+
+4. Use `useI18n`:
+
+```tsx
+import { useI18n } from '../locales'
+
+function App() {
+  const t = useI18n()
+  return (
+    <div>
+      <p>{t('hello')}</p>
+      <p>{t('welcome', { name: 'John' })}</p>
+    </div>
+  )
+}
+```
+
+## Examples
+
+### Change current language
+
+Export `useChangeLocale` from `createI18n`:
+```tsx
+export const {
+  useChangeLocale,
+  ...
+} = createI18n({
+  ...
+});
+```
+
+Then use this as a hook:
+```tsx
+import { useChangeLocale } from '../locales'
+
+function App() {
+  const changeLocale = useChangeLocale()
+
+  return (
+    <button onClick={() => changeLocale('en')}>English</button>
+    <button onClick={() => changeLocale('fr')}>French</button>
+  )
+}
+```
+
+### Use JSON files instead of TS for locales
+
+Currently, this breaks the parameters type-safety, so we recommend using the TS syntax. See this issue: https://github.com/microsoft/TypeScript/issues/32063.
+
+```ts
+import { createI18n } from 'next-international'
+import type Locale from './en.json'
+
+export const {
+  useI18n,
+  I18nProvider,
+  getLocaleStaticProps,
+} = createI18n<typeof Locale>({
+  en: () => import('./en.json'),
+  fr: () => import('./fr.json'),
+});
+```
+
+## License
+
+[MIT](./LICENSE)

examples/next/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/next/locales/en.ts

@@ -0,0 +1,7 @@
+console.log('Loaded EN');
+
+export default {
+  hello: 'Hello',
+  welcome: 'Hello {name}!',
+  'about.you': 'Hello {name}! You have {age} yo',
+} as const;

examples/next/locales/fr.ts

@@ -0,0 +1,9 @@
+import { defineLocale } from '.';
+
+console.log('Loaded FR');
+
+export default defineLocale({
+  hello: 'Bonjour',
+  welcome: 'Bonjour {name}!',
+  'about.you': 'Bonjour {name}! Vous avez {age} ans',
+});

examples/next/locales/index.ts

@@ -0,0 +1,9 @@
+import { createI18n } from 'next-international';
+import type Locale from './en';
+
+export const { useI18n, I18nProvider, useChangeLocale, defineLocale, getLocaleStaticProps } = createI18n<typeof Locale>(
+  {
+    en: () => import('./en'),
+    fr: () => import('./fr'),
+  },
+);

examples/next/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/next/next.config.js

@@ -0,0 +1,13 @@
+// const withTM = require('next-transpile-modules')(['next-international']);
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+  i18n: {
+    locales: ['en', 'fr'],
+    defaultLocale: 'en',
+  },
+};
+
+module.exports = nextConfig;

examples/next/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "next-i18n",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "12.2.2",
+    "next-international": "workspace:*",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.0.4",
+    "@types/react": "^18.0.15",
+    "eslint": "8.19.0",
+    "eslint-config-next": "12.2.2",
+    "next-transpile-modules": "^9.0.0",
+    "typescript": "^4.7.4"
+  }
+}

examples/next/pages/_app.tsx

@@ -0,0 +1,12 @@
+import { AppProps } from 'next/app';
+import { I18nProvider } from '../locales';
+
+const App = ({ Component, pageProps }: AppProps) => {
+  return (
+    <I18nProvider locale={pageProps.locale}>
+      <Component {...pageProps} />
+    </I18nProvider>
+  );
+};
+
+export default App;

examples/next/pages/index.tsx

@@ -0,0 +1,36 @@
+import { GetStaticProps } from 'next';
+import { getLocaleStaticProps, useChangeLocale, useI18n } from '../locales';
+
+const Home = () => {
+  const t = useI18n();
+  const changeLocale = useChangeLocale();
+
+  return (
+    <div>
+      <p>Hello: {t('hello')}</p>
+      <p>
+        Hello:{' '}
+        {t('welcome', {
+          name: 'John',
+        })}
+      </p>
+      <p>
+        Hello:{' '}
+        {t('about.you', {
+          age: '23',
+          name: 'Doe',
+        })}
+      </p>
+      <button type="button" onClick={() => changeLocale('en')}>
+        EN
+      </button>
+      <button type="button" onClick={() => changeLocale('fr')}>
+        FR
+      </button>
+    </div>
+  );
+};
+
+export const getStaticProps: GetStaticProps = getLocaleStaticProps();
+
+export default Home;