Thai Next.js Starter 🇹🇭

Next.js starter template สำหรับเว็บไซต์ไทย — i18n TH/EN, ฟอนต์ไทย, SEO, PDPA Cookie Consent พร้อมใช้งาน

Features

• Next.js 16 App Router + Turbopack
• ภาษาไทย/อังกฤษ — i18n routing (/th, /en) พร้อม dictionary system
• Noto Sans Thai — Google Font ที่ดีที่สุดสำหรับเว็บไทย, auto-optimized ผ่าน next/font
• Tailwind CSS v4 — utility-first styling
• TypeScript — type-safe ทั้งโปรเจกต์
• SEO Ready — metadata, Open Graph, hreflang, sitemap, robots.txt
• PDPA Cookie Consent — banner + privacy policy template
• Schema Markup — Organization, WebSite, BreadcrumbList JSON-LD
• Dark Mode — class-based toggle
• Lighthouse 90+ — optimized ตั้งแต่แรก

Quick Start

# Clone
git clone https://github.com/chercode-dev/thai-nextjs-starter.git my-website
cd my-website

# Install
bun install  # หรือ npm install

# Dev
bun dev      # http://localhost:3000

Project Structure

src/
├── app/
│   ├── [lang]/           # i18n routing (th/en)
│   │   ├── page.tsx      # Homepage
│   │   └── layout.tsx    # Root layout with font + metadata
│   ├── sitemap.ts        # Auto-generated sitemap
│   └── robots.ts         # robots.txt
├── components/
│   ├── Header.tsx        # Navigation with language switcher
│   ├── Footer.tsx        # Footer with contact info
│   └── CookieConsent.tsx # PDPA cookie banner
├── dictionaries/
│   ├── th.json           # ภาษาไทย
│   └── en.json           # English
├── lib/
│   ├── i18n.ts           # Locale config
│   ├── getDictionary.ts  # Dictionary loader
│   └── seo.ts            # SEO metadata helper
└── styles/
    └── globals.css        # Tailwind + custom tokens

i18n (ภาษาไทย/อังกฤษ)

URL routing:

• chercode.com/ → ภาษาไทย (default)
• chercode.com/en/ → English

// src/lib/i18n.ts
export const i18n = {
  defaultLocale: "th",
  locales: ["th", "en"],
} as const;

Dictionary pattern:

// ใน component
export default function Page({ dict }: { dict: Dictionary }) {
  return <h1>{dict.hero.title}</h1>;
}

ฟอนต์ภาษาไทย

ใช้ Noto Sans Thai + Noto Sans ผ่าน next/font — auto-optimized, zero layout shift:

// src/app/[lang]/layout.tsx
import { Noto_Sans, Noto_Sans_Thai } from "next/font/google";

const notoSans = Noto_Sans({ subsets: ["latin"], variable: "--font-noto" });
const notoSansThai = Noto_Sans_Thai({ subsets: ["thai"], variable: "--font-noto" });

เปลี่ยนฟอนต์ได้ง่าย — แนะนำ:

ฟอนต์	สไตล์	เหมาะกับ
Noto Sans Thai	Neutral, มาตรฐาน	ทุกประเภท (default)
IBM Plex Sans Thai	Professional	Corporate, Fintech
Sarabun	อ่านง่าย	ราชการ, Content-heavy
Prompt	ทันสมัย	Startup, Creative
Kanit	โดดเด่น, หนา	Heading เท่านั้น

อ่านเพิ่มเติม: เลือกฟอนต์สำหรับเว็บไซต์ไทย

SEO

Metadata

// src/lib/seo.ts
export function generatePageMetadata({ title, description, path, lang }) {
  return {
    title: `${title} | MySite`,
    description,
    alternates: {
      canonical: buildUrl(lang, path),
      languages: { th: buildUrl("th", path), en: buildUrl("en", path) },
    },
    openGraph: { /* ... */ },
  };
}

Schema Markup (JSON-LD)

// Organization schema - อยู่ใน layout.tsx
const orgSchema = {
  "@context": "https://schema.org",
  "@type": "Organization",
  name: "Your Company",
  url: "https://yoursite.com",
  logo: "https://yoursite.com/logo.png",
  telephone: "+66XXXXXXXXX",
};

Sitemap & robots.txt

• src/app/sitemap.ts — auto-generate จาก route structure
• src/app/robots.ts — allow Googlebot, GPTBot, ClaudeBot

PDPA Cookie Consent

// src/components/CookieConsent.tsx
// พร้อมใช้ — แสดง banner ครั้งแรก, จำ consent ใน localStorage
<CookieConsent
  message="เว็บไซต์นี้ใช้คุกกี้เพื่อพัฒนาประสบการณ์การใช้งาน"
  acceptLabel="ยอมรับ"
  privacyUrl="/privacy"
/>

Customize

1. แก้ชื่อเว็บ: src/lib/seo.ts → SITE_NAME, SITE_URL
2. แก้เนื้อหา: src/dictionaries/th.json, en.json
3. แก้สี: src/styles/globals.css → CSS variables
4. แก้ฟอนต์: src/app/[lang]/layout.tsx → เปลี่ยน import
5. เพิ่มหน้า: สร้าง folder ใน src/app/[lang]/your-page/

Deploy

Vercel (แนะนำ)

Other

bun run build  # Build
bun start      # Production server

Performance

Metric	Target	How
Lighthouse Performance	90+	SSG + Image Optimization + Font Optimization
LCP	< 2.5s	next/font preload + fetchpriority="high" on hero
INP	< 200ms	Server Components by default, minimal client JS
CLS	< 0.1	Font size-adjust + Image width/height

Tech Stack

Tool	Version	Purpose
Next.js	16	Framework
React	19	UI Library
TypeScript	5	Type Safety
Tailwind CSS	4	Styling
Bun	1.3+	Package Manager & Runtime

Related Resources

• SEO Checklist สำหรับเว็บไซต์ไทย
• 25 ฟอนต์ไทยฟรี 2026
• เลือกฟอนต์สำหรับเว็บไซต์ไทย
• 30 เครื่องมือฟรีสำหรับทำเว็บไซต์
• Next.js vs WordPress
• ทำเว็บไซต์ราคาเท่าไหร่ 2026

Author

Cher — Full-Stack Developer & Founder of CherCode

รับทำเว็บไซต์ AI และ Automation สำหรับธุรกิจไทย

• chercode.com
• เว็บไซต์คลินิก
• เว็บไซต์ร้านอาหาร
• AI Chatbot
• n8n Automation

License

MIT License — ใช้ได้ฟรีทั้งส่วนตัวและเชิงพาณิชย์

---

สร้างด้วย ❤️ โดย CherCode — รับทำเว็บไซต์สำหรับธุรกิจไทย