Skip to content
← All Skills
▲

Next.js

FrontendOfficial Site ›

React framework สำหรับ web application — SSR, SSG, App Router, Server Components

What I Can Do

  • สร้าง full-stack web app ด้วย Next.js 15 App Router
  • ใช้ Server Components เพื่อลด client-side JavaScript
  • Implement SSG ด้วย generateStaticParams() สำหรับ static content
  • จัดการ data fetching ด้วย Server Actions
  • Deploy บน Vercel สำหรับ production

Commands I Use Daily

bash
# development server พร้อม turbopack
next dev --turbopack

# build production — ตรวจ type errors + optimize
next build

# start production server (หลัง build)
next start

# lint ตาม Next.js rules
next lint

# วิเคราะห์ bundle size — หา dependency ที่ใหญ่เกินไป
ANALYZE=true next build
# หรือใช้ npx @next/bundle-analyzer

Pages & Routing

Next.js ใช้ file-based routing — สร้างไฟล์ใน app/ folder แล้วได้ route อัตโนมัติ เช่น app/about/page.tsx → /about

Components

React component คือ function ที่ return JSX — เป็น building block ของ UI ทุกอย่างใน Next.js

Props

Props คือ data ที่ส่งจาก parent component ไป child component — ใช้สำหรับ customize behavior และ display ของ component

File-based Routing

  • page.tsx = route segment
  • layout.tsx = shared layout ที่ wrap children
  • loading.tsx = loading UI (Suspense boundary)
  • error.tsx = error boundary
  • not-found.tsx = 404 page
  • [slug]/page.tsx = dynamic route

Layout

Layout เป็น UI ที่ shared ระหว่าง pages ใน route segment เดียวกัน — ไม่ re-render เมื่อ navigate ระหว่าง child pages ทำให้ UI state คงอยู่

Link & Navigation

ใช้ <Link href="/about"> แทน <a> — Next.js จะ prefetch page ล่วงหน้าและ navigate แบบ client-side โดยไม่ full page reload

Static Assets

ไฟล์ใน public/ folder serve ได้โดยตรง — เช่น public/logo.png เข้าถึงที่ /logo.png ใช้ next/image สำหรับ optimized images

CSS Modules / Tailwind

  • CSS Modules — scoped CSS per component, styles.module.css
  • Tailwind CSS — utility-first CSS framework, เขียน styles ใน className โดยตรง

App Router vs Pages Router

  • App Router (recommended) — ใช้ React Server Components, layouts, nested routing, streaming
  • Pages Router (legacy) — ใช้ getServerSideProps / getStaticProps
  • App Router เป็น default ตั้งแต่ Next.js 13+

Server Components vs Client Components

  • Server Components (default) — render บน server, ไม่ส่ง JS ไป client, เข้าถึง database/filesystem ได้โดยตรง
  • Client Components — ใส่ "use client" ด้านบน, ใช้เมื่อต้องการ interactivity (useState, useEffect, onClick)
  • ใช้ Server Components ให้มากที่สุด, Client Components เฉพาะที่จำเป็น

Data Fetching (RSC)

Server Components สามารถ await data ตรงใน component body — ไม่ต้อง useEffect, ไม่ต้อง loading state ฝั่ง client

Loading / Error UI

  • loading.tsx — แสดงอัตโนมัติระหว่าง page transition (wraps ด้วย Suspense)
  • error.tsx — catch runtime errors ใน route segment (ต้องเป็น client component)
  • Nested ตาม route hierarchy

Metadata & SEO

ใช้ export const metadata หรือ generateMetadata() สำหรับ dynamic title, description, Open Graph — Next.js จัดการ <head> ให้อัตโนมัติ

API Routes / Route Handlers

app/api/*/route.ts — export functions GET, POST, PUT, DELETE สำหรับ API endpoints ใช้ NextRequest / NextResponse

Middleware

middleware.ts ที่ root — run ก่อนทุก request, ใช้สำหรับ auth check, redirect, rewrite, set headers

Streaming & Suspense

Server Components รองรับ streaming — ส่ง HTML ทีละส่วนให้ browser render ได้เลยโดยไม่ต้องรอทั้ง page ใช้ <Suspense> กำหนด boundary ของ streaming

Caching Strategies (revalidate, ISR)

  • revalidate: 60 — revalidate cached data ทุก 60 วินาที (ISR)
  • revalidatePath() / revalidateTag() — on-demand revalidation
  • cache: 'no-store' — ไม่ cache เลย (dynamic)

Parallel Routes

@folder convention — render หลาย pages พร้อมกันใน layout เดียว ใช้สำหรับ dashboard ที่มีหลาย independent sections

Intercepting Routes

(.) / (..) convention — intercept navigation เพื่อ show modal แทน full page navigation เช่น click รูปใน feed → show modal, direct URL → show full page

Server Actions

ฟังก์ชันที่ run บน server เรียกจาก client ได้โดยตรง — ใส่ "use server" แล้วใช้ใน form action หรือ event handler ไม่ต้องสร้าง API route แยก

Bundle Optimization

  • next/dynamic กับ ssr: false — lazy load heavy components
  • Analyze bundle ด้วย @next/bundle-analyzer
  • Tree shaking — import เฉพาะที่ใช้ เช่น import { Button } from "@/components/ui"
  • Route-based code splitting เกิดขึ้นอัตโนมัติ

Edge Runtime

export const runtime = 'edge' — run route handler/middleware บน edge network (Vercel Edge, Cloudflare) ได้ latency ต่ำ แต่มีข้อจำกัดเรื่อง Node.js APIs

Related Skills

  • Go — backend API ที่ Next.js เรียกใช้
  • Docker — containerize Next.js สำหรับ production
  • PostgreSQL — database สำหรับ full-stack features