Glossary
ศัพท์ของ Next.js เปลี่ยนไปเรื่อย ๆ ตามแต่ละเวอร์ชัน — “Router Cache” กลายเป็น “Client Cache”, middleware.ts กลายเป็น proxy.ts, caching model ที่เคยสร้างจาก segment-config exports กลายเป็น flag เดียวคือ cacheComponents เวลาอ่านบทเรียนแล้วเจอคำที่ไม่คุ้น หรือไม่แน่ใจว่ายังใช้ได้อยู่ไหม ให้กลับมาดูที่นี่ เราคง term ภาษาอังกฤษไว้ตามที่ developer ใช้จริง แล้วอธิบายความหมายเป็นภาษาไทย
| Term | ความหมาย | บทเรียน |
|---|---|---|
| action ID | compiler ของ 'use server' แทนที่ implementation จริงของ Server Action ในฝั่ง client bundle ด้วย action ID ที่เข้ารหัสไว้ บวก dispatcher ที่ POST กลับไปหา server ID นี้คือ endpoint สาธารณะจริง ๆ — ใครก็ตามที่ส่ง POST request แบบเดียวกันเรียกมันได้ ไม่ว่าจะเคยโหลด UI ของเราหรือไม่ ดังนั้นทุก action ต้อง authorize และ validate ด้วยตัวเอง | Server Actions คืออะไร |
| AGENTS.md | ไฟล์ที่ create-next-app เขียนให้ที่ root โปรเจกต์โดย default (หรือด้วย flag --agents-md) เพื่อให้ AI coding agent มีกฎที่ตรงกับเวอร์ชันปัจจุบัน ไม่ต้องพึ่ง training data ที่อาจล้าสมัย next dev จะเติม block ที่มันจัดการอยู่กลับเข้ามาเองอัตโนมัติ ดังนั้นการลบมันออกจาก diff โดยไม่แก้ต้นตอ จะแค่สร้าง uncommitted change กลับมาใหม่ | การตั้งค่าโปรเจกต์และ Toolchain |
| App Router vs. Pages Router | App Router (app/) คือ model ปัจจุบัน สร้างบน React Server Components component เป็น Server Component โดย default และ fetch ข้อมูลแบบ inline ด้วย async/await ส่วน Pages Router (pages/) คือ model เก่าที่ทุก component เป็น Client Component ทั้งหมด ป้อนข้อมูลด้วย function อย่าง getServerSideProps — ทั้งสองยังใช้ได้ แต่ feature ใหม่จะลงที่ App Router เท่านั้น | Next.js คืออะไร และ App Router |
boundary ('use client' / 'use server') | เส้นแบ่งที่ directive 'use client' หรือ 'use server' ขีดไว้ระหว่างโค้ดที่รันบน server กับโค้ดที่ถูกส่งไปที่ browser 'use client' เป็น transitive — ทุกอย่างที่ import เข้ามาใน tree ของไฟล์นั้นกลายเป็นส่วนหนึ่งของ client bundle ด้วย — ตำแหน่งของ boundary จึงเป็นตัวตัดสินว่า browser ต้องโหลด JavaScript มากแค่ไหน | Server และ Client Components |
| cacheComponents | flag ใน next.config.ts ที่มาแทน caching model แบบเดิมของ Route Segment Config (dynamic, revalidate, fetchCache, dynamicParams, runtime) ด้วย 'use cache', cacheLife และ cacheTag และยังเป็นวิธีเปิด Partial Prerendering ใน Next.js 16 ด้วย เมื่อเปิด flag นี้ segment-config export แบบเดิมจะทำให้ build พังด้วย error Route segment config "…" is not compatible with nextConfig.cacheComponents | use cache และ Cache Components |
| cacheHandler / cacheHandlers | config key สอง key ที่ใช้ตอน self-host ต่างกัน: cacheHandler (เอกพจน์) override cache แบบเก่าของ full-route/ISR ที่อยู่เบื้องหลัง revalidatePath/revalidateTag; cacheHandlers (พหูพจน์ เป็น object เพิ่มมาใน v16.0.0) ตั้งค่า backend ให้กลุ่ม directive 'use cache' — มี default กับ remote เป็นต้น | Deployment และ Self-Hosting |
| cacheLife | กำหนดว่า entry ของ 'use cache' จะสดอยู่นานแค่ไหน จะใช้ named profile (cacheLife('hours')) หรือ profile ที่ตั้งเองใน next.config.ts ก็ได้ เป็นตัวแทนของ export const revalidate แบบเดิมภายใต้ cacheComponents | use cache และ Cache Components |
| cacheTag | ติด tag ให้ entry ของ 'use cache' เพื่อให้ invalidate ได้แบบ on-demand ด้วย revalidateTag หรือ updateTag รับหลาย tag ในการเรียกครั้งเดียวได้ ดังนั้น entry เดียวมีทั้ง tag ระดับ collection และระดับ item พร้อมกันได้โดยไม่ต้องเรียกสองรอบ | use cache และ Cache Components |
| Client Cache (เดิมชื่อ Router Cache) | caching layer ตัวที่สี่: เก็บ RSC payload ของ route ที่เคยเข้าหรือถูก prefetch ไว้ในหน่วยความจำของ browser ทำให้กด back/forward แล้วเร็วทันที ตั้งแต่ v15 ค่า default ของ staleTimes.dynamic คือ 0 และถูก invalidate เมื่อ refresh หน้า, router.refresh(), มีการเขียน cookie หรือเรียก revalidateTag/revalidatePath/updateTag | สี่ Caching Layers |
| connection() | บังคับให้ prerender หยุดตรงนั้น แล้วให้ส่วนที่เหลือของ component รันเฉพาะตอน request จริงเท่านั้น ใช้กับโค้ดที่ไม่มี Dynamic API ให้เกาะ (เช่น Math.random() หรือ database driver แบบ synchronous) มันมาแทน unstable_noStore; ภายใต้ cacheComponents มักแนะนำให้ใช้ io() แทนเพราะยัง cache ได้อยู่ถ้าอยู่ใน scope ของ 'use cache' | Partial Prerendering |
| create-next-app | CLI สำหรับ scaffold โปรเจกต์ ค่า default ที่แนะนำคือ TypeScript, ESLint, Tailwind CSS, App Router และไฟล์ AGENTS.md — ทุก toggle ที่มันถาม (React Compiler, typed routes, src/, import alias) มีผลจริงที่ตรวจสอบได้กับโครงสร้างที่สร้างออกมา ไม่ใช่แค่ความต่างผิวเผิน | การตั้งค่าโปรเจกต์และ Toolchain |
| Term | ความหมาย | บทเรียน |
|---|---|---|
| DAL / verifySession() | pattern Data Access Layer ที่คอร์สนี้ใช้สำหรับ authorization: helper ชื่อ verifySession() ที่ทุก Server Action และ Route Handler ต้องเรียกก่อนแตะข้อมูล verifySession() เรียก redirect() เมื่อไม่มี session ดังนั้นห้ามอยู่ใน try/catch ที่กลืน control flow ของ redirect ใน Next.js เอง | Pattern การทำ Authentication |
| Data Cache | layer ฝั่ง server ที่อยู่ถาวร เก็บผลลัพธ์ของ fetch ข้ามหลาย request และหลาย deploy ตั้งแต่ Next.js 15 เป็นแบบ opt-in ต่อการเรียกแต่ละครั้ง (cache: 'force-cache' หรือ next: { revalidate }) — fetch เฉย ๆ ไม่เขียนอะไรลง cache นี้เลย | สี่ Caching Layers |
| Edge runtime (deprecated) | environment ที่รันเล็กกว่า มีแค่ Web API ตั้งด้วย export const runtime = 'edge' ตั้งแต่ Next.js 16 ถูก deprecate ในฐานะ route runtime แล้ว — next build ขึ้น deprecation warning และ Cache Components ปฏิเสธ export นี้ตรง ๆ — แต่ยังมีใช้ต่อใน proxy.ts | Route Segment Config และ Runtime |
| error.tsx / global-error.tsx / retry() | error.tsx คือ error boundary แบบ Client Component ที่จับ error จาก segment ที่อยู่ข้างใต้มัน — error ที่ throw ใน layout จะถูกจับโดย boundary ของ segment parent ไม่ใช่ของตัวเอง — และได้ function reset() มาไว้ลอง render ใหม่ ส่วน global-error.tsx จับ error ที่ root layout เองเป็นคน throw จึงต้อง render <html> และ <body> เองด้วย | Pages, Layouts และ Nested Routing |
| filesystem cache | cache แบบ incremental ของ Turbopack ที่เก็บลงดิสก์ เปิดโดย default ทั้งกับ next dev และ next build ทำให้ build หรือ restart รอบต่อไปใช้ผลงานเก่าซ้ำแทนที่จะ compile ใหม่ทั้งหมด | Turbopack และ Build Performance |
| forbidden() / unauthorized() | function ที่สร้างมาเฉพาะ (อยู่หลัง experimental flag ชื่อ authInterrupts) ที่ throw แล้ว render boundary forbidden.tsx หรือ unauthorized.tsx ที่ใกล้ที่สุด พร้อม HTTP status ที่ตรงกัน แทนที่จะใช้ redirect('/login') เฉย ๆ unauthorized() ใช้กับ “ยังไม่ล็อกอิน” ส่วน forbidden() ใช้กับ “ล็อกอินแล้วแต่ไม่มีสิทธิ์” | Pattern การทำ Authentication |
| Full Route Cache | layer ฝั่ง server ที่อยู่ถาวร เก็บ RSC payload ที่ render แล้วบวก HTML ของ route ที่ render แบบ static ทำให้ request ที่ตรงกันข้าม render ใหม่ได้เลย อยู่จนกว่าจะ redeploy หรือข้อมูลข้างในถูก revalidate | สี่ Caching Layers |
| generateMetadata / streaming metadata / metadataBase / htmlLimitedBots | generateMetadata คำนวณ <title>/OG tag จาก route params บน server ตั้งแต่ 15.2 ผลลัพธ์จะ stream เข้าไปใน <body> สำหรับ browser ทั่วไป (หน้าเว็บถูกส่งไปก่อนที่มันจะ resolve เสร็จ) แต่จะ block แล้ว render ลง <head> สำหรับ bot ในรายชื่อ htmlLimitedBots (default คือ Twitterbot, Slackbot, Bingbot) ที่รัน JavaScript ไม่ได้ metadataBase ตั้ง base URL ที่ metadata แบบ relative (เช่น path ของ OG image) ใช้ resolve — ถ้าไม่ตั้งไว้ URL แบบ relative อาจ resolve ไปเป็น localhost ตอน production ได้ | Metadata และ SEO |
| generateStaticParams / dynamicParams | generateStaticParams คืนรายการค่าของ dynamic segment ที่จะ prerender ตอน build export dynamicParams ควบคุมว่าค่าที่มันไม่ได้คืนมาจะเกิดอะไรขึ้น: true (default) จะ render ตอนมี request จริง, false จะคืน 404 แทน — ภายใต้ cacheComponents กรณี false นี้เขียนแทนด้วย notFound() ในตัว page | Route Segment Config และ Runtime |
| generateViewport | คู่หูของ generateMetadata เฉพาะเรื่อง viewport สำหรับค่า (เช่น themeColor หรือ width) ที่ต้องคำนวณต่อ request แทนที่จะประกาศเป็น viewport export แบบ static | Metadata และ SEO |
| hydration / hydration mismatch | hydration คือขั้นที่ React ผูก event handler กับ state เข้ากับ HTML ที่ server render มาแล้วใน browser mismatch เกิดเมื่อ HTML นั้นต่างจากผลลัพธ์ที่ client render ออกมา — สาเหตุที่พบบ่อยคือค่า Date/random, การ format locale, เช็ค typeof window, หรือ HTML ที่ nest ผิด — React 19 รายงานเป็น diff จริงที่อ่านได้ ไม่ใช่แค่ warning ทั่วไป | Static และ Dynamic Rendering |
| instrumentation.ts / onRequestError | register() ใน instrumentation.ts รันครั้งเดียวตอน server เริ่มทำงาน เป็นที่มาตรฐานสำหรับตั้งค่า telemetry; hook onRequestError รับ error ฝั่ง server ทุกตัว ส่งต่อไปยังปลายทาง logging จริงได้ — ถ้า log ลง console เฉย ๆ ตรงนั้น จะมองไม่เห็นทันทีที่ stdout ของ container ไม่ได้ถูกเก็บไปที่ไหน | Deployment และ Self-Hosting |
| intercepting route | รูปแบบ route (folder prefix (.), (..), (...)) ที่ render route ที่ match ไว้ข้างใน layout ปัจจุบัน — เช่น modal ที่ทับอยู่บน feed — แทนที่จะ navigate ไปหน้าของมันเอง ความหมายของ prefix อยู่ที่ระดับ segment ไม่ใช่ความลึกของ folder จริง ๆ และ slot ของ parallel route (@slot) ไม่นับรวมในระดับนั้น | Parallel และ Intercepting Routes |
| ISR (Incremental Static Regeneration) | การ revalidate แบบ background ตามเวลาของ route ที่ render แบบ static เปิดด้วย export const revalidate = <seconds> ภายใต้ model Route Segment Config เดิม (หรือ profile ของ cacheLife ภายใต้ cacheComponents) | Route Segment Config และ Runtime |
| Term | ความหมาย | บทเรียน |
|---|---|---|
| loading.tsx | file convention ที่ครอบ page.tsx ของ segment นั้นด้วย <Suspense> boundary โดยอัตโนมัติ พร้อม fallback UI ที่กำหนด แสดงระหว่างที่ข้อมูลของ segment กำลังโหลด ให้ granularity การ stream แบบหยาบระดับ segment; ถ้าต้องการควบคุมละเอียดกว่านั้นให้ใช้ <Suspense> เองลึกลงไปใน tree | Streaming และ Suspense |
| matcher | export config.matcher ใน proxy.ts ที่กำหนดขอบเขตว่า path ไหนบ้างที่จะรัน proxy ถ้าไม่ตั้งไว้ proxy จะรันทุก request — รวมถึง _next/static, _next/image, และ prefetch request — การเช็ค auth ที่ไม่ได้ scope ไว้จึงอาจไปบล็อก asset ของตัวเอง หรือทำงานกับลิงก์ที่ user แค่เลื่อนผ่านโดยไม่ได้ตั้งใจ | Proxy (Middleware) และ Request Lifecycle |
| next/dynamic | wrapper รอบ import() สำหรับโหลด component แบบ lazy มักใช้คู่กับ ssr: false เพื่อโหลด dependency ที่ใช้ได้เฉพาะ browser (เช่น library canvas) โดยไม่ต้องรวมมันไว้ใน server render หรือ initial bundle | Script และ Bundle Optimization |
| next experimental-analyze | ตัววิเคราะห์ bundle ที่ใช้ Turbopack เป็นฐาน รันด้วย npx next experimental-analyze เปิด UI แบบ interactive (หรือเขียนไฟล์ .next/diagnostics/analyze เมื่อใส่ --output) แสดงให้เห็นว่าใน client bundle ของแต่ละ route มีอะไรอยู่จริง — มีประโยชน์เวลาจับ boundary 'use client' ที่วางสูงเกินไป | Script และ Bundle Optimization |
| next/font | self-host ไฟล์ font ตั้งแต่ตอน build แล้ว inline CSS @font-face ให้เลย ทำให้ไม่มี request ไปหา Google Fonts (หรือที่ไหนก็ตาม) ตอน runtime และไม่มี layout shift จาก font ที่โหลดมาช้า | Image และ Font |
| next/image (sizes, remotePatterns, minimumCacheTTL) | component รูปภาพในตัวที่ resize, แปลง format, และ lazy-load ให้โดยไม่มี layout shift sizes บอก browser ว่าที่แต่ละ breakpoint ควรใช้ความกว้างเท่าไร (ถ้าตั้งผิด browser จะโหลดรูปใหญ่เกินจำเป็น); remotePatterns คือ allowlist ของ host รูปภาพภายนอก; minimumCacheTTL คือเวลาขั้นต่ำที่รูปที่ optimize แล้วถูก cache ไว้ เปลี่ยนจาก 60 วินาทีเป็น 4 ชั่วโมง (14400 วินาที) ตั้งแต่ Next.js 16 | Image และ Font |
| NEXT_PUBLIC_ | prefix ที่ทำให้ environment variable ถูกฝังเข้าไปใน client bundle ตอน build ต้อง access เป็น static literal เท่านั้น — process.env.NEXT_PUBLIC_X ห้ามใช้ process.env[key] — เพราะการแทนที่ค่านี้เป็นการแทนที่ string ตอน build ไม่ใช่การอ่านค่าตอน runtime | Environment และ Configuration |
| NextRequest / NextResponse | class ที่ต่อยอดจาก Request/Response มาตรฐาน ใช้ใน proxy.ts และ Route Handler — NextRequest เพิ่มความสะดวกอย่าง cookie helper, NextResponse เพิ่ม .redirect(), .rewrite(), และ .next() เพื่อให้ request เดินหน้าต่อโดยไม่แก้ไข (จะแนบ header ให้ Server Component ปลายทางอ่านต่อก็ได้) | Proxy (Middleware) และ Request Lifecycle |
| Node.js runtime | environment ที่ทุก route ใช้เป็น default ให้ Node API ครบทุกตัว — ต่างจาก Edge runtime ที่เล็กกว่าและมีแค่ Web API ซึ่งถูก deprecate ในฐานะ route runtime แล้วใน Next.js 16 | Route Segment Config และ Runtime |
| not-found.tsx / notFound() | notFound() throw เพื่อ render boundary not-found.tsx ที่ใกล้ที่สุดพร้อม status 404; not-found.tsx ที่ root จะจัดการ route ที่ไม่ match ที่ไหนก็ได้ในแอป ส่วนตัวที่อยู่ลึกลงไปจะจัดการเฉพาะการเรียก notFound() (หรือ dynamic segment ที่ไม่ match) ภายใน subtree ของตัวเองเท่านั้น | Pages, Layouts และ Nested Routing |
| Term | ความหมาย | บทเรียน |
|---|---|---|
| output: ‘standalone’ | ค่าตั้งใน next.config.ts ที่ทำให้ Next.js ไล่ดูว่า server ต้องใช้ไฟล์ไหนบ้างจริง ๆ แล้ว copy เข้าไปใน .next/standalone ได้ image ขนาดเล็กสำหรับ self-host ที่ไม่ต้องมี node_modules เต็ม ๆ | Deployment และ Self-Hosting |
| parallel route | slot ที่ตั้งชื่อ (folder @slot) ให้ layout เดียว render หลายหน้าที่เป็นอิสระต่อกันพร้อมกัน — เช่น @analytics กับ @team ของ dashboard slot ที่ไม่มี default.tsx คู่กันจะขึ้น 404 เมื่อ hard navigation ไปที่ไม่ match มัน และ slot ไม่ใช่ URL segment ด้วยตัวมันเอง | Parallel และ Intercepting Routes |
| PPR (Partial Prerendering) / static shell | รวม static shell กับ dynamic hole ไว้ใน route เดียว: ทุกอย่างที่อยู่นอก <Suspense> boundary (หรือ scope ของ 'use cache') จะ prerender ครั้งเดียวตอน build ส่วน hole แต่ละอันจะ stream เข้ามาตอน request จริง เปิดใช้ด้วย flag เดียวกับ 'use cache' คือ cacheComponents: true — flag เก่าอย่าง ppr/experimental_ppr ถูกเอาออกไปแล้ว | Partial Prerendering |
| proxy (proxy.ts เดิมชื่อ middleware) | ชื่อใหม่ของ middleware.ts ใน Next.js 16 — โค้ดที่รันก่อน request จะเสร็จ บนทุก route ที่ match รันบน Node.js runtime เสมอ (ตั้งค่าไม่ได้ — export runtime จาก proxy.ts คือ build error) และยังรันตอน <Link> prefetch ด้วย ไม่ใช่แค่ตอน navigate จริง | Proxy (Middleware) และ Request Lifecycle |
| React Compiler | compiler แบบ opt-in (reactCompiler: true) ที่ memoize component ให้อัตโนมัติ ลดการเขียน useMemo/useCallback เองส่วนใหญ่ ใน Next.js 16.3 ยังไม่ได้ bundle มาให้ — ต้องติดตั้ง babel-plugin-react-compiler เอง ไม่งั้น build จะพังด้วย error “Failed to resolve package” ที่ชัดเจน | การตั้งค่าโปรเจกต์และ Toolchain |
| React.cache() | ห่อการอ่านข้อมูลที่ไม่ใช่ fetch (เช่น database query) ให้ได้ per-request dedupe แบบเดียวกับที่ fetch ได้อัตโนมัติ มันเทียบ argument แบบเดียวกับ Object.is ไม่ใช่ deep-equal ดังนั้น object ที่สร้างใหม่ทุกครั้งจะทำให้ dedupe ไม่ทำงาน | Fetch ใน Server Components |
| redirect() / NEXT_REDIRECT | redirect() (และ permanentRedirect()) ทำงานโดย throw error พิเศษชื่อ NEXT_REDIRECT ที่ boundary ของ Next.js เองจะจับไว้ — หมายความว่า try/catch ที่ครอบมันไว้จะกลืน redirect เงียบ ๆ แทนที่จะปล่อยให้ navigate ไป | Linking และ Navigation |
| Request Memoization | caching layer ตัวแรก: ภายใน render pass เดียว การเรียก fetch (หรือ React.cache()) ที่เหมือนกันจะถูก dedupe อัตโนมัติ ทำให้ network เห็นแค่ request เดียวไม่ว่าจะมีกี่ component เรียก มันอยู่แค่ใน request/render รอบนั้นเท่านั้น ไม่ถูกแชร์กับการเรียกจาก Route Handler | สี่ Caching Layers |
| request-time (dynamic) API | function ที่รู้ผลได้ก็ต่อเมื่อมี request จริงเข้ามาแล้ว — เช่น cookies(), headers(), searchParams, หรือ connection() — การใช้มันบังคับให้ segment นั้น render แบบ dynamic แทนที่จะ prerender ครั้งเดียวตอน build | Static และ Dynamic Rendering |
| revalidatePath() | invalidate cache ตาม route path แทนที่จะตาม tag — เช่น revalidatePath('/', 'layout') ตั้งใจให้ผลกระทบกว้าง เคลียร์ทุกอย่างที่ cache ไว้ภายใต้ layout นั้นไม่ว่าจะมี tag อะไรติดอยู่ | Revalidation และ Cache Invalidation |
| revalidateTag(tag, profile) | ทำให้ทุก entry ใน Data Cache ที่มี tag นั้นกลายเป็น stale เพื่อให้ request ถัดไป fetch ใหม่ ใน Next.js 16 argument ตัวที่สอง profile — เป็น profile ของ cacheLife เช่น 'max' — เป็นของบังคับ รูปแบบเก่าที่ใส่ argument เดียวถูก deprecate และตอนนี้กลายเป็น TypeScript error | Revalidation และ Cache Invalidation |
| route group | folder แบบ (name) ที่จัดกลุ่ม route หรือแยก subtree ให้มี root layout ของตัวเอง โดยไม่เพิ่ม segment ใน URL route group สองกลุ่มจะไม่แชร์ layout กัน และการมี root layout มากกว่าหนึ่งอันทำให้การ navigate ข้ามกลุ่มเป็น full page reload ไม่ใช่ client-side transition | Dynamic Segments และ Route Groups |
| Route Handler | ไฟล์ route.ts ที่กำหนด handler ของ request สำหรับ URL หนึ่ง — GET, POST ฯลฯ — มักใช้ทำ API สาธารณะจริง, webhook, หรือ endpoint สำหรับ revalidate แบบ on-demand ที่มี secret คุ้มกัน เพราะมันอยู่นอก React component tree และนอก scope ของ request memoization ของตัวเอง | Revalidation และ Cache Invalidation |
| route segment config | model แบบเดิมของ caching/runtime ต่อ segment — export อย่าง dynamic, revalidate, fetchCache, dynamicParams, และ runtime ทุกตัวจะทำให้ build พังทันทีที่ตั้ง cacheComponents: true ด้วย error Route segment config "…" is not compatible with nextConfig.cacheComponents (มี preferredRegion กับ maxDuration เป็นสองข้อยกเว้น) | Route Segment Config และ Runtime |
| RSC (React Server Component) | component ที่ render บน server และไม่ส่งโค้ดของตัวเองไปที่ browser เลย — ใน App Router ทุก component เป็นแบบนี้โดย default จนกว่าจะมีไฟล์ (หรือ ancestor ใน import chain) ประกาศ 'use client' | Server และ Client Components |
| RSC payload / Flight | ข้อมูลที่ serialize จาก Server Component tree ที่ render แล้ว ซึ่ง server ส่งให้ client — ภายในเป็น streaming format ที่ docs และบทเรียน Server Actions ของคอร์สนี้เรียกว่า Flight stream นี่คือสิ่งที่ Client Cache เก็บไว้จริง ๆ ต่อ route และเป็นสิ่งที่ response ของ Server Action พกไปด้วยพร้อมกับ return value เมื่อมันสั่ง revalidate ทันที | Server และ Client Components |
| Term | ความหมาย | บทเรียน |
|---|---|---|
| segment | folder หนึ่งใน app/ แทนหนึ่ง segment ของ URL path; special file ข้างในนั้น (page.tsx, layout.tsx, loading.tsx ฯลฯ) กำหนดพฤติกรรมของ segment นั้น | Pages, Layouts และ Nested Routing |
| Server Action / Server Function | function ที่ทำเครื่องหมาย 'use server' (แบบ inline หรือทั้งไฟล์) ที่รันบน server เท่านั้น แต่เรียกตรงจาก Client Component หรือ <form action={...}> ได้เลย compiler จะแทนที่มันในฝั่ง client bundle ด้วย reference ไปหา action ID ของมัน ไม่ใช่ตัวโค้ดจริง | Server Actions คืออะไร |
| server-only / client-only | package ที่เปลี่ยนการ import ข้าม boundary โดยไม่ตั้งใจให้กลายเป็น build-time error แทนที่จะรั่วตอน runtime แบบเงียบ ๆ — import server-only เข้าไปใน Client Component (หรือ client-only เข้าไปใน Server Component) จะทำให้ next build พังพร้อม message ที่ชัดเจน | Server และ Client Components |
| slot | @folder ที่ตั้งชื่อไว้ ส่งเป็น prop เข้าไปให้ parent layout ภายใต้ Parallel Routes มันไม่ใช่ URL segment ด้วยตัวเอง และต้องมี default.tsx ของตัวเองเพื่อไม่ให้ 404 ตอน hard navigation ที่ไม่ได้ match มันตรง ๆ | Parallel และ Intercepting Routes |
| streaming | ส่ง response ไปให้ browser ทีละส่วนตามที่มันพร้อม แทนที่จะรอให้ทั้งหน้า render เสร็จก่อน ต้องการให้ response ไม่ถูก buffer ตลอดทาง — reverse proxy ที่อยู่ด้านหน้า (เช่น nginx) ต้องตั้ง proxy_buffering off ไม่งั้น streaming จะกลายเป็นการ flush ก้อนใหญ่ก้อนเดียว | Streaming และ Suspense |
| Suspense boundary | <Suspense fallback={...}> ที่ครอบส่วนของ tree ที่หยุดรอได้ (เช่น await ใน Server Component แบบ async หรือ Promise ที่ส่งเข้า use()) ทำให้ส่วนนั้น stream เข้ามาเมื่อพร้อม ในขณะที่ส่วนที่เหลือของหน้า render ได้ทันที การครอบทั้งหน้าที่มี await เยอะ ๆ ด้วย <Suspense> แค่ตัวเดียวไม่ได้ประโยชน์อะไรเลย — แค่ทำให้ทุกอย่างช้าลงเพราะรอ boundary เดียวกัน | Streaming และ Suspense |
| Turbopack | bundler แบบ incremental ที่เขียนด้วย Rust ซึ่งตอนนี้เป็น default ของทั้ง next dev และ next build (ใส่ --webpack เพื่อกลับไปใช้ bundler ตัวเก่า) ออกแบบมาให้ cold start และ HMR เร็วขึ้น มี filesystem cache ที่เปิดโดย default หนุนอยู่ | Turbopack และ Build Performance |
| unstable_rethrow() | throw error ที่เป็น control-flow ภายในของ Next.js เอง (จาก redirect(), notFound() และอื่น ๆ) ที่ถูก try/catch รอบนอกจับไว้โดยไม่ได้ตั้งใจจะกลืนมัน ให้กลับไปที่ boundary ของ Next.js จัดการตามปกติ | Linking และ Navigation |
| updateTag() | ทำให้ cache entry หมดอายุทันที แทนที่จะแค่ทำเครื่องหมาย stale แล้วรีเฟรชเบื้องหลัง — เหมาะกับตอนที่ user ต้องเห็นผลของการเขียนของตัวเองใน request ถัดไปทันที ต่างจาก revalidateTag/revalidatePath ตรงที่ใช้ได้เฉพาะใน Server Action เท่านั้น | Revalidation และ Cache Invalidation |
| ’use cache’ (+ private / remote) | directive ที่ cache ค่าที่ return ของ function หรือ component ภายใต้ cacheComponents: true แทนที่ cache key ที่ต้องเขียนเองด้วย cacheLife และ cacheTag ที่ประกาศติดกับ logic ที่มันอธิบายเลย 'use cache: private' scope entry ต่อ user แทนที่จะแชร์กัน; 'use cache: remote' เก็บไว้ใน remote handler ที่ตั้งค่าไว้ แทนที่จะเป็น in-memory handler แบบ default | use cache และ Cache Components |
| use() | API ของ React ที่แกะ Promise (หรือ Context) ออกมาระหว่าง render ส่ง Promise จาก Server Component ลงไปให้ Client Component แล้วแกะด้วย use() — อยู่ใน <Suspense> boundary — ทำให้ static shell stream ออกไปก่อนที่ข้อมูลช้า ๆ จะมาถึง เพราะ render function ของ Client Component เองเป็น async ไม่ได้ | Server และ Client Components |
| useActionState | ห่อ Server Action ไว้ให้ component ได้ state ล่าสุดที่ return กลับมา, form action ให้ผูก, และ flag pending signature ของ action ที่ถูกห่อคือ (previousState, formData) — ต่างจาก action เฉย ๆ ที่เป็น (formData) — สลับ shape กันเฉย ๆ เป็น TypeScript error จริง ไม่ใช่แค่เรื่อง style | Forms และ Progressive Enhancement |
| useFormStatus | อ่านสถานะ pending ของการ submit <form> ที่เป็น parent ใกล้ที่สุด ใช้ได้เฉพาะตอนเรียกจาก component ที่เป็น child ของ <form> เท่านั้น — ถ้าเรียกใน component เดียวกับที่ render form จะได้ pending: false เสมอ | Forms และ Progressive Enhancement |
| useOptimistic | แสดงผลลัพธ์ที่คาดว่าจะเกิดขึ้นทันที ก่อนที่ response ของ Server Action จะมาถึง แล้ว reconcile อีกทีเมื่อข้อมูลจริงมาถึง ถ้า action throw แทนที่จะ resolve React จะทิ้งค่า optimistic ที่ค้างอยู่ แล้ว UI จะกลับไปเป็นสถานะล่าสุดที่ยืนยันแล้ว | Forms และ Progressive Enhancement |