Skip to content

[FE-40] Set up next-intl i18n — English translations, language switcher in user settings #852

Description

@mftee

Overview

The frontend is entirely in English with no i18n infrastructure. As SMALDA targets international users, the UI should be translatable. next-intl is the recommended i18n library for Next.js App Router. This issue establishes the infrastructure and adds the first translation file.

Background

Files to create/modify:

  • frontend/messages/en.json — English translation strings (all UI labels, button text, error messages)
  • frontend/i18n.ts — next-intl configuration
  • frontend/middleware.ts — extend existing middleware (FE-04) with locale detection
  • frontend/app/[locale]/layout.tsx — locale-aware root layout

Language switcher:

  • Dropdown in the user settings header (/profile or the navbar)
  • Available languages: English (en), French (fr), Spanish (es) — with placeholder fr.json and es.json showing only the key structure

Integration with backend:

  • When user changes language in the UI, call PATCH /api/users/me to save preferredLanguage
  • The backend then uses this preference for emails (BE-86)

Acceptance Criteria

  • next-intl configured and working in the App Router
  • en.json covers all UI strings on at least the login, dashboard, and document list pages
  • Placeholder fr.json and es.json created (can be copies of English initially)
  • Language switcher changes the displayed language without a full page reload
  • Language preference saved to the backend on change

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions