The Challenge

LPK Kodama Hikari needed a maintainable website that connects program information with student applications across 2 languages. The documented content scope includes 10 starting pages, 21 FAQs, and 6 team records, alongside tuition, requirements, and preparation guidance. Without shared content models, repeated information would be harder to maintain consistently as pages and translations expand. Registration also needed to capture consent, validate applicant details, and keep personal records outside publicly readable collections. The business requirement was a coherent route from discovery to staff follow-up. Existing traffic, application volume, and a measured baseline for administrative effort were not supplied, so these content counts describe implementation scale rather than audience size.

Constraints & Scale

The implementation had to support 2 content locales while preserving existing records and protecting registration data. Japanese fields use Indonesian fallback, which keeps incomplete translations visible but can produce mixed-language pages. Deployment depends on PostgreSQL and S3-compatible storage; the database pool is configured for a maximum of 10 connections. Schema changes use versioned migrations with automatic schema push disabled. The release guidance specifies 1 application replica and disables rolling updates for migration-bearing releases because concurrent migrations are not coordinated by an advisory lock. Payment processing is outside scope, and email notifications require optional provider configuration. Timeline, budget, and team size are not documented.

System Architecture

Next.js 16.2.10 and React 19.2.3 serve the public website alongside Payload CMS 3.86.0 in one application. PostgreSQL stores pages, shared settings, users, and private registration records; S3-compatible MinIO storage serves public media. The CMS config defines 8 collections and 3 globals, separating editorial content from applicant data and internal rate counters. Eight reusable block types drive page composition. The next-intl routing layer serves Indonesian at the root and Japanese under /ja. Developer-maintained dictionaries translate interface text, while Payload localizes editorial fields. A Server Action validates registration input with Zod before storing an application and returning its reference. Optional Resend notifications run after persistence, so notification failure does not invalidate the saved application. A 3-stage Dockerfile packages Next.js standalone output for Node.js 22. Startup connects to Payload, applies production migrations, and performs a localized CMS read before health checks can succeed. Locale-aware metadata, sitemap alternates, and configurable indexing controls support search readiness.

Key Tradeoffs

We chose an embedded Payload CMS over a separate CMS service because one application can share content types, authentication, and rendering logic. The cost is coupling website and CMS releases. We chose field-level Indonesian fallback over requiring complete Japanese translations because 2-language publishing can proceed incrementally; editors must still review mixed-language pages. We chose startup migration gating over migrations triggered by the first visitor because schema readiness must precede traffic. The operational cost is a documented 1-replica release strategy with downtime for schema changes. A useful lesson emerged from fallback rendering: an outdated application can return HTTP 200 with default content despite a schema mismatch, so startup verifies a real localized database read.

Measurable Results

The page CMS expansion increased documented public-page coverage from 8 to 10 pages and introduced 8 reusable editorial block types. Recorded verification expanded from 40 to 50 route-and-viewport checks across 5 widths, with no reported overflow or browser exceptions in that run. Another 24 CMS checks covered desktop and mobile editing workflows. A synthetic registration verified the 3-step intake journey and one-record-only behavior under duplicate attempts. These September 2026 results demonstrate delivered publishing and intake capabilities; production enrollment uplift, traffic growth, and administrative time savings were not measured.

Case Study

LPK Kodama Hikari Bilingual Website

2026

LPK Kodama Hikari brings 2 languages, editable program information, and 3-step student registration together in one training website.

LPK Kodama Hikari Bilingual Website screenshot 1

LPK Kodama Hikari Bilingual Website screenshot 2

LPK Kodama Hikari Bilingual Website screenshot 3

01/03

Tech Stack

Payload CMS

S3-compatible Storage

Key Features

01Explore training information in 2 languages with page-preserving switching
02Complete student registration through 3 validated steps and receive a reference
03Compare 3 program interests before submitting an application
04Find answers across 21 supplied FAQ topics using search
05Compose pages with 8 reusable section types and draft previews
06Manage shared program details through 1 integrated administration workspace
07Review student applications in 1 authenticated registration inbox
08Discover content through 2 locale routes with localized search metadata

Project Details

We built a bilingual training website for LPK Kodama Hikari in Demak, Indonesia, combining institution-managed content and 3-step student registration in one application. Indonesian and Japanese visitors can explore the institution, training programs, preparation guides, and contact information through 2 locale routes. The implementation gives prospective students a clear path from learning about a program to submitting their details and receiving a registration reference. It also gives staff an authenticated workspace for reviewing applications and maintaining published information. Our implementation covers the public website, CMS content models, registration workflow, localization, and deployment configuration. The page CMS expansion established 10 published starting pages, supported by 21 FAQ entries and 6 team records documented in project verification. Editors can assemble pages from 8 reusable section types and manage shared program details without repeating the same information across separate page templates. This scope addresses a training institution's practical publishing needs; production traffic, enrollment conversion, delivery budget, and team size are not documented in the repository. We combined Next.js 16.2.10, React 19.2.3, and Payload CMS 3.86.0 in a single application backed by PostgreSQL and S3-compatible media storage. Interface translations and editorial translations use separate layers, while shared slugs preserve page identity when visitors switch languages. One substantial engineering challenge was introducing localization without discarding existing content: the documented migration moves 307 columns into 83 locale tables. Explicit data-copy steps supplement generated schema changes, and a rehearsal workflow checks migration behavior inside a transaction that is rolled back. Recorded verification demonstrates functional delivery across 50 public route-and-viewport combinations and 24 CMS interface checks during the page CMS expansion. Those checks covered responsive layouts, page metadata, image rendering, editor controls, and browser errors. A synthetic application also verified validation, consent, persistence, confirmation, and duplicate-submit protection before its test records were removed. These are implementation and verification outcomes rather than measured enrollment gains. They establish a practical foundation for staff-managed publishing and student intake, with final-domain launch settings and production operations remaining deployment responsibilities.

#education#bilingual#nextjs#payload-cms#student-registration

Explore our 2-language training website approach, or discuss your institution's CMS and student registration needs.

Next Step

Start Your Digital Transformation

Professional websites & apps to boost leads and sales. We handle everything.

Consult Now

More Projects6 projects

View Case Study

MAREHA Modest Fashion E-commerce

2026

MAREHA brings modest fashion shopping into one branded storefront, with 2 variant dimensions, guest checkout, promotions, and order tracking.

Live Demo View Case Study

View Case Study

Custom Stiker Motorcycle Decal Store

2026

Custom Stiker brings motorcycle decal shopping, checkout, and order tracking into 1 branded storefront backed by a shared commerce platform.

Live Demo View Case Study

View Case Study

Bilingual Manufacturing Website with Custom CMS

2026

Replaced a stagnant brochure site with a bilingual Next.js CMS for a Karawang packaging plant shipping 150M+ pcs a year, at under IDR 15M total build cost.

Live Demo View Case Study