Skip to content

README.md

Latest commit

 

History

History
219 lines (174 loc) · 8.01 KB

README.md

File metadata and controls

219 lines (174 loc) · 8.01 KB

Thai Next.js Starter 🇹🇭

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

Next.js Tailwind CSS TypeScript License: MIT

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 (แนะนำ)

Deploy with 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

Author

Cher — Full-Stack Developer & Founder of CherCode

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

License

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

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