README.md

Next i18n Starter

This is a Next.js Template implementing Internationalization (i18n).

I wrote this because I found it hard to compose all the demos and docs together into what resembled a fully functioning content-centric website.

Features To Consider ✨

This template:

• relies on local MDX files. Put your long-form content in any locale. This might be a deal-breaker for you.
• doesn't choose one of the 5 i18n libraries Next shortlists. Instead, it creates its own translation API 😅. Replace it if you need something more robust.
• implements gentle TypeScript hinting to ensure consistent translation across locales. (see below)
• doesn't make any choices about your styling solution. Bikeshed away.

Translations 💬

Current locales are defined within next.config.js:

File: next.config.js

module.exports = {
  i18n: {
    locales: ["en", "es"],
    defaultLocale: "en",
  },
}

The content/ directory contains a TypeScript definition file ensuring you never miss mapping a new value.

File: content\translation.d.ts

export type Nav = {
  home: string,
  chapter1: string,
}

export type Translation = {
    nav: Nav,
    welcome: string,
  }

Adding a New Locale 🆕

1. Add the locale to next.config.js
2. Add a new locale directory under /content
3. Add translation.ts under the new locale directory, implementing the Translation type.
4. Add any long-form MDX content you wish to author.

Development Getting Started 🚀

Node environment:

File: .nvmrc

v16.14.2

Use a tool like nvm or volta to manage Node versions.

Install dependencies:

npm ci

Then, run the development server:

npm run dev

Installation options 🚧

Option one: One-click deploy to Vercel

Option two: Manual clone

1. Clone this repo: git clone [email protected]:bmuenzenmeyer/next-i18n-starter.git
2. Navigate to the directory and run npm ci
3. Run npm run dev

Prior Art 🎨

I composed some resources to get this far. Thank you to:

• ❤️ Next Netlify Starter - from which these docs are derived
• 🌐 Next i18n-routing example - for the LocaleSwitcher
• 📦 Next MDX Remote via Albert Barsegyan's demo
• 🔺 Vercel for easy and free hosting supporting Server-Side Rendering

Alternatives 🤔

• nextjs-i18n-static-page-starter - Consider this if you want Tailwind and i18next baked into your experience.