Sókrates Wiki

Website Internationalization (i18n) System

2 min read

Website Internationalization (i18n) System

Summary

The Sokrates website implements a multi-language architecture using next-intl to support English (EN) and Icelandic (IS) locales. The system utilizes locale-prefixed routing, dynamic message loading via JSON files, and localized metadata for SEO.

Details

The internationalization (i18n) system was integrated into the Next.js App Router framework to allow visitors to toggle between English and Icelandic. The implementation relies on next-intl (v4.8) and follows a structured approach to separate content from logic.

Architecture and Routing

The website uses locale-prefixed routing, where all application routes are nested under a [locale] dynamic segment (e.g., src/app/[locale]/).

  • Middleware: A middleware layer (src/middleware.ts) detects the user’s preferred locale and handles redirects. By default, the root path / redirects to /en/.
  • Infrastructure: Key configuration files include src/i18n/routing.ts, src/i18n/request.ts, and src/i18n/navigation.ts. These files define the supported locales and provide locale-aware navigation components like Link, usePathname, and useRouter.

Content Management

Translations are stored in flat JSON files located in the messages/ directory:

  • messages/en.json: Contains the primary English strings.
  • messages/is.json: Contains the Icelandic translations.

The system distinguishes between Server and Client components for translation fetching:

  • Server Components: Use getTranslations() to fetch messages during server-side rendering. This is applied to components like TheBox, IntegrationJourney, CaseStudy, About, and Footer.
  • Client Components: Use the useTranslations() hook. This is used for interactive elements such as the Hero, Navbar, Pricing, and FAQ.

Key Marketing Copy and Metadata

During the i18n implementation, the project’s core marketing copy was refined. A significant update was made to the Hero subtitle and the site’s metadata description:

  • English: “Software waits for instructions. Sókrates looks for friction.”
  • Icelandic: “Hugbúnaður fær fyrirmæli. Sókrates finnur fyrirstöðu.”

The generateMetadata function in layout.tsx and individual page files ensures that <title> and <meta name="description"> tags are correctly translated for SEO and social sharing.

User Interface

A language toggle was added to both the desktop Navbar and the MobileNav components, allowing users to switch locales instantly. The html lang attribute is dynamically updated based on the active locale to support screen readers and browser-level language detection.

Data Sovereignty Framing

The i18n process also involved correcting technical descriptions regarding data privacy. The description for “The Box” was updated to clarify that while reasoning queries may leave the building via controlled infrastructure, proprietary data remains on-premises on physical, tangible hardware.

Graph View

Backlinks