https://github.com/mstgnz/nexti8n
NextJS Internationalization Starter
https://github.com/mstgnz/nexti8n
i8n localization nextjs starter-kit
Last synced: about 1 month ago
JSON representation
NextJS Internationalization Starter
- Host: GitHub
- URL: https://github.com/mstgnz/nexti8n
- Owner: mstgnz
- License: mit
- Created: 2025-04-09T17:12:09.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-09T17:13:18.000Z (about 1 year ago)
- Last Synced: 2025-09-26T22:33:51.565Z (9 months ago)
- Topics: i8n, localization, nextjs, starter-kit
- Language: TypeScript
- Homepage:
- Size: 67.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Nexti8n - Next.js Internationalization Starter
A lightweight, flexible, and easy-to-use internationalization (i18n) starter kit for Next.js applications. This project provides a complete solution for building multilingual websites with Next.js 15+ App Router.
## Features
- 🌐 **Middleware-based routing**: Automatically routes users based on their language preference
- 🔄 **Seamless URL localization**: Clean URLs with language prefixes (`/en/about`, `/tr/hakkimizda`)
- 📝 **JSON-based translations**: Simple management of translations in JSON files
- 🧩 **TypeScript support**: Full type safety for your translations
- 🖥️ **Server and Client components**: Works with both React Server Components and Client Components
- 🔀 **Language switcher**: Easy-to-implement language switching component
- 🎯 **SEO friendly**: Proper language tags and metadata for search engines
- 🚀 **Zero dependencies**: No additional i18n libraries required
## Demo
The demo showcases a simple multilingual website with multiple pages and navigation that automatically adjusts based on the selected language.
## Getting Started
### Installation
```bash
# Clone the repository
git clone https://github.com/yourusername/nexti8n.git
# Navigate to the project
cd nexti8n
# Install dependencies
npm install
# Run the development server
npm run dev
```
### Project Structure
```
/
├── app/ # Next.js App Router
│ ├── [locale]/ # Dynamic route for localized pages
│ │ ├── about/ # Localized About page
│ │ ├── contact/ # Localized Contact page
│ │ ├── login/ # Localized Login page
│ │ └── ... # Other localized pages
│ └── layout.tsx # Root layout
├── context/ # React context for locale management
├── lib/ # Utility functions
│ └── i18n.ts # i18n helper functions
├── locales/ # Translation files
│ ├── en.json # English translations
│ └── tr.json # Turkish translations
├── middleware.ts # Next.js middleware for handling localization
└── ...
```
### How It Works
1. **Middleware**: Handles language detection and routing
2. **JSON Files**: Store translations for different languages
3. **Context API**: Manages the current locale
4. **Helper Functions**: Provide utilities for translation and URL generation
### Adding a New Language
1. Create a new JSON file in the `locales` folder (e.g., `fr.json`)
2. Add the language code to the `locales` array in `middleware.ts`
3. Fill in the translations in your new JSON file
### Adding Translations
The translation files follow this structure:
```json
{
"routes": {
"home": "",
"about": "about",
"contact": "contact",
"not-found": "404",
"login": "login",
"register": "register",
"forgot-password": "forgot-password",
"account": {
"logout": "account/logout",
"profile": "account/profile"
}
},
"common": {
"home": "Home",
"about": "About",
"contact": "Contact"
}
}
```
## Usage
### Translating Content
```tsx
// Import the helper function
import { getMessages } from "@/lib/i18n";
// In your component
export default function Page({ params: { locale } }) {
const messages = getMessages(locale);
return (
{messages.common.home}
);
}
```
### Creating Localized Links
```tsx
import Link from "next/link";
import { getLocalizedPath } from "@/lib/i18n";
export default function Navigation({ locale }) {
return (
About
);
}
```
## Customization
### Changing the Default Language
Edit the `defaultLocale` variable in `middleware.ts`:
```ts
// Default locale
export const defaultLocale = "en";
```
### Customizing Routes
Edit the route definitions in the respective locale files:
```json
// locales/en.json
{
"routes": {
"blog": "blog",
"products": "products"
}
}
// locales/fr.json
{
"routes": {
"blog": "blog",
"products": "produits"
}
}
```
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is licensed under the MIT License - see the LICENSE file for details.