Merge pull request #50 from CreoWis/issue-42-add-language-support

Implement Multi Language Support with Next.js and Next-Intl Plugin

Author: atapas

README.md

@@ -36,9 +36,63 @@ Say goodbye to setup headaches and hello to consistent code quality. Elevate you
 - **Prettier Plugin Tailwindcss**: Automatic sorting of tailwind classnames using the official prettier plugin.
 - **Prettier Plugin Sort Imports**: Organize import declarations alphabetically within groups, which can help improve readability when working on larger projects.
 - **Husky**: Ensure code quality and prevent bad commits with pre-commit hooks powered by Husky.
+-  **Internationalization (i18n)**: Built-in support for multiple languages using next-intl, making it easy to create multilingual applications with locale-specific routing and translations.
+  
+## Internationalization (i18n)
+NextJsLaunchpad comes with built-in internationalization support using next-intl. This integration provides:
 
-## Getting Started
+- Route-based locale handling with `/[locale]/` directory structure
+- Easy-to-use translation hooks with `useTranslations` in server and client components.
+
+Translation files are located in:
+```bash
+content/
+  ├── en.json
+  ├── fr.json
+  └── [other-locales].json
+```  
+#### How to add a new language support:
+
+To add a new language, we have to add the language JSON file to the content directory, which is in the root directory, that is our first step.
+
+After that, we have to add the newly added language to the locales array in the navigation.ts file. Below is the content of the navigation.ts file, where we need to add the newly added language to the locales array:
+```bash
+import {defineRouting} from 'next-intl/routing';
+import {createNavigation} from 'next-intl/navigation';
+
+export const routing = defineRouting({
+  // A list of all locales that are supported
+  locales: ['en', 'fr', 'newLanguage'], // Add the new language code here
+ 
+  // Used when no locale matches
+  defaultLocale: 'en'
+});
+
+export const {Link, redirect, usePathname, useRouter, getPathname} =
+  createNavigation(routing);
+```
+#### Using Strings from Language Files
+
+To use strings from a language file in both **client and server** components, use the `useTranslations` hook.
+
+#### Steps:
 
+1. **Import `useTranslations`:**
+
+   ```javascript
+   import { useTranslations } from 'next-intl';
+   ```
+2. **Initialize useTranslations with a section:**
+   ```javascript
+   const t = useTranslations('Home');
+   ```
+3. **Fetch and use translations:**
+
+   ```javascript
+   <h1>{t('welcomeMessage')}</h1>
+   ```
+   
+## Getting Started
 > Usage
 
 ```bash

content/en.json

@@ -0,0 +1,49 @@
+{
+  "Home": {
+    "title": "NextJS Launchpad",
+    "description": "We created a boilerplate with essential tools and best practices so you can focus on building your NextJS project.",
+    "edit_prompt": "Edit",
+    "edit_file": "app/page.tsx",
+    "edit_to_start": "to start",
+    "tech_stack": {
+      "nextjs": {
+        "name": "Next JS",
+        "description": "Utilize the power of Next.js for server-rendered React applications"
+      },
+      "typescript": {
+        "name": "TypeScript",
+        "description": "Enhance your development experience with TypeScript's static typing"
+      },
+      "tailwindcss": {
+        "name": "Tailwind CSS",
+        "description": "Rapidly build custom designs with Tailwind CSS's utility-first approach"
+      },
+      "eslint": {
+        "name": "ESLint",
+        "description": "Enforce code quality standards and catch errors early with ESLint"
+      },
+      "prettier": {
+        "name": "Prettier",
+        "description": "Keep your codebase clean and consistent with automatic code formatting using Prettier."
+      },
+      "prettier_plugin_tailwindcss": {
+        "name": "Prettier Plugin Tailwindcss",
+        "description": "Automatic sorting of tailwind classnames using the official prettier plugin"
+      },
+      "prettier_plugin_sort_imports": {
+        "name": "Prettier Plugin Sort Imports",
+        "description": "Sort imports alphabetically for better readability, especially in larger projects"
+      },
+      "husky": {
+        "name": "Husky",
+        "description": "Ensure code quality and prevent bad commits with pre-commit hooks powered by Husky"
+      }
+    },
+    "footer_text": "An Open Source initiative from CreoWis Technologies."
+  },
+  "NotFound": {
+    "404": "404",
+    "dosen't_exist_text": "Oops! The page you're looking for doesn't exist.",
+    "go_to_home": "Go back to Home"
+  }
+}

content/fr.json

@@ -0,0 +1,49 @@
+{
+  "Home": {
+    "title": "NextJS Launchpad",
+    "description": "Nous avons créé un modèle avec les outils essentiels et les meilleures pratiques pour que vous puissiez vous concentrer sur le développement de votre projet NextJS.",
+    "edit_prompt": "Modifier",
+    "edit_file": "app/page.tsx",
+    "edit_to_start": "pour commencer",
+    "tech_stack": {
+      "nextjs": {
+        "name": "Next JS",
+        "description": "Exploitez la puissance de Next.js pour des applications React rendues côté serveur"
+      },
+      "typescript": {
+        "name": "TypeScript",
+        "description": "Améliorez votre expérience de développement grâce au typage statique de TypeScript"
+      },
+      "tailwindcss": {
+        "name": "Tailwind CSS",
+        "description": "Créez rapidement des designs personnalisés avec l'approche utilitaire de Tailwind CSS"
+      },
+      "eslint": {
+        "name": "ESLint",
+        "description": "Appliquez des normes de qualité de code et détectez les erreurs tôt avec ESLint"
+      },
+      "prettier": {
+        "name": "Prettier",
+        "description": "Gardez votre code propre et cohérent avec le formatage automatique de Prettier"
+      },
+      "prettier_plugin_tailwindcss": {
+        "name": "Plugin Prettier Tailwindcss",
+        "description": "Tri automatique des classes Tailwind avec le plugin officiel Prettier"
+      },
+      "prettier_plugin_sort_imports": {
+        "name": "Plugin Prettier Tri des Imports",
+        "description": "Triez les imports par ordre alphabétique pour une meilleure lisibilité, en particulier dans les grands projets"
+      },
+      "husky": {
+        "name": "Husky",
+        "description": "Assurez la qualité du code et empêchez les mauvais commits avec les hooks pré-commit de Husky"
+      }
+    },
+    "footer_text": "Une initiative Open Source de CreoWis Technologies."
+  },
+  "NotFound": {
+    "404": "404",
+    "dosent_exist_text": "Oups! La page que vous cherchez n'existe pas.",
+    "go_to_home": "Retour à l'accueil"
+  }
+}

next.config.mjs

@@ -1,8 +1,12 @@
 /** @type {import('next').NextConfig} */
+import createNextIntlPlugin from 'next-intl/plugin';
+
+const withNextIntl = createNextIntlPlugin();
+
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
   productionBrowserSourceMaps: true,
 };
 
-export default nextConfig;
+export default withNextIntl(nextConfig);

package-lock.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "next": "15.1.4",
+    "next-intl": "^3.26.3",
     "react": "19.0.0",
     "react-dom": "19.0.0"
   },

package.json

@@ -0,0 +1,22 @@
+import React from 'react';
+import Link from 'next/link';
+import { useTranslations } from 'next-intl';
+
+const NotFound = () => {
+  const t = useTranslations('NotFound');
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center bg-gray-100 text-gray-800">
+      <h1 className="mb-4 text-6xl font-bold">{t('404')} </h1>
+      <p className="mb-4 text-xl"> {t(`dosen't_exist_text`)} </p>
+      <Link
+        href="/"
+        className="mt-4 rounded-lg bg-blue-700 px-6 py-3 text-white transition duration-300 hover:bg-blue-800"
+      >
+        {t('go_to_home')}
+      </Link>
+    </div>
+  );
+};
+
+export default NotFound;