ʻŌlelo Honua with Next.js

To integrate ʻŌlelo Honua with Next.js for multilingual support, follow these steps:

1. Install ʻŌlelo Honua CLI using npx:

       
      npm install -g npx && npx --yes olelo-honua
   

2. Initialize Localization in Your Next.js Project

   Navigate to your Next.js project folder and run:

    npx olelo-honua init
    This will generate the necessary translation files and set up the directory structure.
   

3. Configure next.config.js for Internationalization

   Modify your next.config.js file to include the locales:

    module.exports = {
      i18n: {
        locales: ['en', 'es', 'fr', 'de'], // Add the languages you need
        defaultLocale: 'en',
      },
    };
   

4. Add Language Switching

   Use the next/router package to enable language switching in your components:

    import { useRouter } from 'next/router';
       
    export default function LanguageSwitcher() {
      const { locale, push, pathname } = useRouter();
       
      const changeLanguage = (lang) => {
        push(pathname, pathname, { locale: lang });
      };
       
      return (
        <div>
          <button onClick={() => changeLanguage('en')}>English</button>
          <button onClick={() => changeLanguage('es')}>Español</button>
        </div>
      );
    }
   

5. Translate Your Content

   Use the translation files generated by ʻŌlelo Honua and integrate them into your components:

    import translations from '../locales/en.json'; // Load based on current locale
       
    export default function Home() {
      return <h1>{translations.welcome}</h1>;
    }
   

6. Sync Translations

   Whenever you update content, use:

    npx olelo-honua sync
   

This ensures all translation files remain updated across your project.

Now your Next.js app is multilingual with ʻŌlelo Honua, improving accessibility and global reach! 🚀