A multi-language Next.js application demonstrating internationalization (i18n) capabilities with support for 6 Indian languages.

🌐 Live Demo: https://next-internationalization.netlify.app/

• Multi-language Support: Supports 6 Indian languages

  • English (en_US)
  • Gujarati (guj_IN)
  • Hindi (hindi_IN)
  • Marathi (marathi_IN)
  • Punjabi (pun_IN)
  • Telugu (telgu_IN)

• Dynamic Language Switching: Real-time language switching with persistent storage

• Server-Side Rendering: Optimized for SEO with SSR support

• Modern UI: Clean and responsive design

• Translation Management: Organized JSON-based translation files

• Framework: Next.js 13.3.4
• Internationalization:
  • ni18n - Next.js i18n library
  • react-i18next - React i18n framework
  • i18next - Core i18n library
• Styling: CSS Modules
• Deployment: Netlify

next-internationalization/
├── components/
│   └── header.js          # Language switcher component
├── pages/
│   ├── _app.js           # App wrapper with i18n setup
│   ├── index.js          # Home page with translations
│   └── api/
├── public/
│   └── locales/          # Translation files
│       ├── en_US/
│       ├── guj_IN/
│       ├── hindi_IN/
│       ├── marathi_IN/
│       ├── pun_IN/
│       └── telgu_IN/
├── ni18n.config.js       # i18n configuration
├── next.config.js        # Next.js configuration
└── package.json

• Node.js 16+
• npm or yarn

1. Clone the repository

   git clone <repository-url>
   cd next-internationalization

2. Install dependencies

   npm install
   # or
   yarn install

3. Run the development server

   npm run dev
   # or
   yarn dev

4. Open your browser Navigate to http://localhost:3000

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

1. Create translation directory

   mkdir public/locales/[language_code]

2. Add translation file Create public/locales/[language_code]/translation.json

3. Update configuration Add the language code to ni18n.config.js:

   const supportedLngs = [
     "en_US",
     "guj_IN",
     "hindi_IN",
     "marathi_IN",
     "pun_IN",
     "telgu_IN",
     "new_lang",
   ];

4. Add language button Update the languages array in components/header.js

Translation files are organized in JSON format with nested keys:

{
  "commonproperties": {
    "text1": "Only JPG/JPEG/JFIF/PNG format allowed",
    "text2": "Image should be less than 3 MB"
  },
  "toastmessages": {
    "toast1": "Removed as member",
    "toast2": "You are no longer team member"
  }
}

1. Connect your repository to Netlify
2. Set build settings:
   • Build command: npm run build
   • Publish directory: .next
3. Deploy automatically on git push

No environment variables required for basic functionality.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

This project is licensed under the MIT License.

• Built with Next.js
• Internationalization powered by ni18n
• Deployed on Netlify

Live Demo: https://next-internationalization.netlify.app/