Add Next.js Localization Framework

[DennisAlund]

Description

Implement localization support for the Tanam web application using the Next.js localization framework. The localization should use two-letter language locales as a prefix to URLs and should initially support English (en) and Indonesian (in).

Requirements

1. Locale Prefix for URLs

   • URLs should include the locale as a prefix.
   • Example:
     • English: https://example.com/en/some/path
     • Indonesian: https://example.com/in/some/path

2. Supported Locales

   • English (default)
   • Indonesian

3. Translation of Sidebar Navigation

   • Replace all presentation strings in the sidebar navigation with localized strings.

4. URL-Based Language Change

   • Confirm that the language change works for the sidebar menu by changing the URL:
     • http://localhost:3000/en should display the sidebar menu in English.
     • http://localhost:3000/in should display the sidebar menu in Indonesian.

Steps to Implement

1. Install Next.js Internationalized Routing

   • Follow the Next.js i18n documentation to install and configure internationalized routing.

2. Configure next.config.js
   Add the supported locales and set the default locale from

   1. Try to resolve/guess from request headers
   2. Fallback to default en

3. Create Locale Files
   Create JSON files for English and Indonesian translations.

4. Test the Implementation

   • Run the development server and navigate to the following URLs to ensure that the sidebar menu displays the correct language:
     • http://localhost:3000/en
     • http://localhost:3000/in

Additional Notes

• Ensure to add more translations as needed for other parts of the application.
• Consider adding a language switcher to the UI for user convenience.

References

• Next.js i18n Routing
• Next.js GitHub Example with i18n