Nextjs-Translation README

📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Key Features
    • How i18n works
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Install
  • Usage
• 👥 Authors
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• 📝 License

📖 Nextjs-Translation

[Nextjs-Translation ] is a Next.js 13/14 application utilizing the app directory feature in combination with i18next to demonstrate how to add translation to your React/Next project.

🛠 Built With

Tech Stack

Client

• React.js
• Next.js
• Tailwind CSS

Key Features

• [Translation]

Key Features

This section explains how the internationalization (i18n) works in the project using i18next with Next.js:

🔧 How i18n works

Initialization:

• i18next is initialized in the project with the necessary configuration.

• The configuration includes specifying the languages supported, the default language, and the path to the translation files.

  npm install next-i18next react-i18next i18next
  
  

Translation Files:

• Translation files are stored in a specific directory, typically in the public/locales folder.

• Each language has its own folder containing JSON files with key-value pairs for translation strings.

• Example structure:

src/
  app/
    locales/
      en/
        en.json
      fr/
        fr.json

Using Translations in Components

• Components use the useTranslation hook from react-i18next to access the translation strings.
• Example usage:

import { useTranslation } from 'react-i18next';

const MyComponent = () => {
  const { t } = useTranslation();
  return <h1>{{t('Head.Home')}}</h1>;
};

The t function takes a key as an argument and returns the corresponding translation string.

Language Switching

• Language switching is typically implemented using a dropdown or buttons that call the i18n.changeLanguage method.
• Example:

 import { useTranslation } from 'react-i18next';

const LanguageSwitcher = () => {
  const { i18n } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('es')}>French</button>
    </div>
  );
};

• you can the current langue switcher component check the LanguageSwitcher.js

(back to top)

💻 Getting Started

To get a local copy up and running, follow these steps.

Prerequisites

• In order to run this project you need:

• git: A tool for managing source code

• git: JavaScript runtime for building server-side and networking applications

• Visual Studio Code: A source code editor

• Live Server: A simple web server utility for Visual Studio Code

Setup

Clone this repository to your desired folder: https://github.com/stazrouti/Nextjs-Translation.git Example commands:

  cd my-folder
https://github.com/stazrouti/Nextjs-Translation.git```

Install

Install this project with:

cd Nextjs-Translation

• Run npm install after cloning the repo

Start Project

• Run npm run dev

(back to top)

👥 Authors

👤 Author1

• GitHub: @stazrouti
• LinkedIn: salah Eddine Tazrouti

(back to top)

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like this project please give it a start and share it with your friends.

(back to top)

🙏 Acknowledgments

(back to top)

📝 License

This project is MIT licensed.

(back to top)