nextjs i18n ai gemini archive

Echoes of Yesterday

A vintage, four-language web archive of Myanmar cultural history, with locale-aware filtering and AI-powered image analysis via Gemini.

4 locales

my · en · zh · de, pre-rendered

AI vision

Gemini structured image analysis

Fallback i18n

graceful per-field translation

[ role ] Sole engineer · T-Htwin Innovation Lab

Project specs

Tech Stack

Next.js 14 next-intl Gemini Tailwind Framer Motion TypeScript

R&D Focus

Internationalization & Cultural Archiving

Complexity

A vintage, retro-styled web archive that showcases Myanmar’s cultural history through a curated image collection — fully localized into four languages, with locale-aware filtering and an AI tool that analyzes historical photos into structured metadata.

Problem

Cultural archives need to reach a multilingual audience without fragmenting the content, and they often have incomplete metadata. The goal was a single archive that renders consistently across four locales (with graceful fallback when a translation is missing) and a way to enrich historical images with AI-generated descriptions that curators can fold back into the permanent record.

Approach

  • › First-class i18n: next-intl with a [locale] dynamic segment, middleware locale detection/redirects, sub-locale normalization ( en-US → en ), and generateStaticParams to pre-render all four locales ( my , en , zh , de ).
  • › Hybrid data model: A static historical image archive ( lib/data.ts ) stores titles, descriptions, and metadata as multi-language objects, with a centralized getLocalizedValue utility that falls back across languages per field.
  • › Locale-aware filtering: The archive resolves localized strings before matching, so Era/Category filters return consistent results regardless of the active language.
  • › AI image analysis: An ImageAnalyzer posts an image to /api/analyze-image , where server-side Gemini 1.5 Flash returns a structured JSON object that can be used to update the archive.
  • › Vintage UX: A sepia toggle, comparison sliders, and an image gallery, with reactive content re-rendering on language switch (preserving search params).

Outcome

  • › A consistent, pre-rendered experience across four languages with resilient per-field fallback.
  • › AI-assisted enrichment that turns raw historical photos into structured, curatable metadata.
  • › A cohesive vintage aesthetic with smooth localized transitions.

Stack notes

Next.js 14 App Router with next-intl for routing and translations, Google Gemini SDK for server-side image analysis, Tailwind CSS with custom vintage themes, Framer Motion for transitions, plus react-compare-slider and react-image-gallery. Lightweight client state via React hooks; comments/memories persisted in LocalStorage.