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.tsexportconsti18n={defaultLocale: "th",locales: ["th","en"],}asconst;

Dictionary pattern:

// ใน componentexportdefaultfunctionPage({ 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.tsximport{Noto_Sans,Noto_Sans_Thai}from"next/font/google";constnotoSans=Noto_Sans({subsets: ["latin"],variable: "--font-noto"});constnotoSansThai=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.tsexportfunctiongeneratePageMetadata({ 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.tsxconstorgSchema={"@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<CookieConsentmessage="เว็บไซต์นี้ใช้คุกกี้เพื่อพัฒนาประสบการณ์การใช้งาน"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 — รับทำเว็บไซต์สำหรับธุรกิจไทย