H.
SYSTEM_ONLINE

VDBC / CASE

TARGETVIETNAM DIGITAL BUSINESS COUNCIL
VERSIONv2.4.0-release
DEPLOYMENTVERCEL EDGE

[ MANIFEST ]

  • ROLEARCHITECT
  • STACKNEXT.JS / SANITY
  • TYPEPLATFORM

Architecting a multilingual digital infrastructure.

VDBC required a high-availability content delivery network capable of serving both English and Vietnamese markets. The objective was to engineer a headless solution that decoupled the content modelling (Sanity) from the presentation layer (Next.js), enabling varying teams to operate independently.

#NEXTJS_15#SANITY_V3#TYPESCRIPT

SYSTEM CONSTRAINTS

ERR-01CRITICAL
LOCALE_SYNC

Synchronizing content schema across en/vi locales without duplicating the entire database structure.

ERR-02CRITICAL
PREVIEW_SECURITY

Granting content editors real-time visual previews while keeping the draft environment strictly gated.

ERR-03CRITICAL
LATENCY

Ensuring <200ms TTFB globally, despite heavy image assets and dynamic localization logic.

INFRASTRUCTURE MAP

Flow of data from CMS to Edge

01

SANITY CMS

DATA ORIGIN
02

TRANSFORM

TYPE VALIDATION
03

NEXT.JS

BUILD & RENDER
04

EDGE CDN

DISTRIBUTION
MODULE COMPLETED

Embedded Studio Bridge

Implemented a secure tunnel for `next-sanity/draft-mode`. By verifying the `SANITY_VIEWER_TOKEN` server-side, we allow authenticated editors to bypass the static cache and view live draft content without compromising the public build.

route.ts
export const { GET } = defineEnableDraftMode({
  client: client.withConfig({
    token: process.env.SANITY_VIEWER_TOKEN,
  }),
});
TYPE_SAFE

Strict Localization

To prevent runtime i18n crashes, we engineered a rigorous mapped type system. The `TranslationKey` type is inferred directly from the source JSON, making it impossible to request a missing translation key in the UI components.

language-context.tsx
type TranslationKey = keyof (typeof en & typeof vi);

const t = (key: TranslationKey): string => {
  return translations[language][key] ?? String(key);
};