MultilingualThaiNext.js

Building Thai/English Multilingual Websites with Next.js

11 May 2026 · by Yunmin Shin

Why Multilingual Matters for Bangkok Businesses

Bangkok is an international city. Hotels, restaurants, real estate agencies, hospitals, and professional services regularly serve both Thai nationals and the large expat and tourist population. A website that functions only in Thai loses international customers; one that functions only in English fails to connect with the majority of local customers.

A properly built multilingual website serves both audiences, ranks in Google for searches in both languages, and creates a professional impression that monolingual sites cannot match.

What Library Should You Use?

next-intl is the recommended internationalization library for Next.js App Router. It integrates deeply with the App Router's routing system, supports server components (most i18n libraries only support client-side translation), and handles locale detection, message formatting, and SEO correctly.

Install it:

npm install next-intl

How Do You Structure Multilingual Routing?

next-intl adds the locale as a URL prefix by default: yoursite.com/th/about for Thai and yoursite.com/en/about for English. This is the SEO-correct approach — separate URLs for each language allow Google to index both independently and serve the correct language based on user location and preference.

The file structure uses a [locale] dynamic segment in the App Router:

app/
  [locale]/
    layout.tsx
    page.tsx
    about/
      page.tsx

Configure supported locales and the default locale in i18n/routing.ts.

How Do You Manage Translation Files?

Store translations as JSON files in a messages/ directory:

messages/
  th.json
  en.json

Each file contains key-value pairs organized by page or feature:

{
  "home": {
    "hero_title": "ยินดีต้อนรับ",
    "hero_subtitle": "บริการออกแบบเว็บไซต์ในกรุงเทพฯ"
  }
}

Use the useTranslations hook in client components and getTranslations in server components to access translations:

const t = await getTranslations("home");
return <h1>{t("hero_title")}</h1>;

How Do You Handle Locale Detection?

next-intl's middleware detects the user's preferred locale from the Accept-Language header and redirects accordingly. Configure it in middleware.ts. For Bangkok-based businesses, set Thai as the default locale — users without a clear language preference will see Thai content, which is appropriate for the majority of local traffic.

What Are the SEO Requirements for Multilingual Sites?

For each page, include hreflang tags that tell search engines about the language alternatives:

<link rel="alternate" hreflang="th" href="https://site.com/th/about" />
<link rel="alternate" hreflang="en" href="https://site.com/en/about" />
<link rel="alternate" hreflang="x-default" href="https://site.com/th/about" />

next-intl handles this automatically when configured correctly. Write unique, high-quality content for each language — do not machine-translate Thai content from English and publish it without review. Thai SEO requires naturally written Thai text.