บทความ
เรื่องราว ความรู้ และประสบการณ์จากการสร้างเว็บไซต์และ Web Application
BlogNext.js & FrontendNext.js คืออะไร สอน Next.js เบื้องต้น 2026
Next.js คือเฟรมเวิร์ก React สำหรับสร้างเว็บแบบ full-stack บทความนี้สอน Next.js 16 ตั้งแต่ติดตั้ง สร้างหน้า ดึงข้อมูลบนเซิร์ฟเวอร์ ตั้งค่า SEO จนนำขึ้นเว็บจริง
Kittipong C.
ทีมงาน KittiStack
October 21, 2026·7 min read
Next.js คืออะไร สอน Next.js เบื้องต้นฉบับ 2026 ตั้งแต่ติดตั้งจนขึ้นเว็บจริง
Next.js คืออะไร ตอบสั้น ๆ คือเฟรมเวิร์กสำหรับสร้างเว็บแบบ full-stack ด้วย React เราเขียนหน้าตาเว็บด้วย React Component เหมือนเดิม ส่วน Next.js เติมสิ่งที่ React ไม่มีให้ ได้แก่ ระบบหน้าและ URL การ render บนเซิร์ฟเวอร์ การย่อรูป การตั้งค่า SEO และการเขียน API ในโปรเจกต์เดียวกัน เครื่องมืออย่าง bundler และ compiler ก็ตั้งค่าให้เองอัตโนมัติ
บทความนี้สอนจาก Next.js 16 ซึ่งเป็นเวอร์ชันปัจจุบัน (เวอร์ชันย่อยล่าสุดคือ 16.4 ออกเมื่อ 6 ตุลาคม 2026) บทความสอน Next.js ภาษาไทยหลายชิ้นยังใช้โฟลเดอร์ pages/ แบบเก่า ถ้าเพิ่งเริ่ม ให้เรียนแบบ App Router ตามบทความนี้ได้เลย
Next.js คืออะไร ต่างจาก React ยังไง
React คือไลบรารีสำหรับสร้างหน้าจอ (UI) อย่างเดียว ถ้าจะทำเว็บทั้งเว็บด้วย React ต้องหาเครื่องมือมาต่อเอง เช่น ระบบ routing ตัว build และเซิร์ฟเวอร์ Next.js รวมสิ่งเหล่านี้ไว้ให้ และวางวิธีทำที่เป็นมาตรฐานไว้แล้ว
#Next.js#React#App Router#สอนเขียนเว็บ
React อย่างเดียว
ระบบหน้าและ URL | ต้องติดตั้งไลบรารี routing เพิ่ม | สร้างโฟลเดอร์ = ได้หน้าใหม่ |
ที่ที่หน้าเว็บถูกสร้าง | ส่วนใหญ่สร้างในเบราว์เซอร์ | สร้างบนเซิร์ฟเวอร์ได้ เบราว์เซอร์ได้ HTML ที่มีเนื้อหาพร้อม |
SEO | Google เห็นหน้าว่างก่อนถ้า JavaScript ยังไม่ทำงาน | ตั้ง title, description และ Open Graph ได้ทุกหน้า |
API หลังบ้าน | ต้องทำเซิร์ฟเวอร์แยก | เขียน Route Handler หรือ Server Action ในโปรเจกต์เดียวกัน |
รูปภาพและฟอนต์ | จัดการเอง | มี next/image และ next/font ย่อและโหลดให้อัตโนมัติ |
พูดง่าย ๆ คือ React เป็นอิฐ ส่วน Next.js เป็นบ้านสำเร็จรูปที่ใช้อิฐ React สร้าง
ก่อนเริ่ม ต้องรู้อะไรบ้าง
เอกสาร Next.js แนะนำให้คุ้นกับ HTML, CSS, JavaScript และ React ก่อน ถ้ายังไม่เคยเขียน React ให้เรียนเรื่อง Component, props และ useState ให้เข้าใจก่อน จะเรียน Next.js ได้เร็วกว่ามาก
ด้านเครื่องมือ ต้องมี Node.js เวอร์ชัน 20.9 ขึ้นไป เช็กได้ด้วย node -v ถ้าใช้ TypeScript ต้องเป็นเวอร์ชัน 5.1.0 ขึ้นไป และควรมีโปรแกรมแก้โค้ดอย่าง VS Code
สอน Next.js: สร้างโปรเจกต์แรกใน 7 ขั้นตอน
ขั้นที่ 1: สร้างโปรเจกต์
npx create-next-app@latest my-app --yes
cd my-app
npm run dev
--yes คือใช้ค่าแนะนำทั้งหมด ได้ TypeScript, Tailwind CSS และ App Router มาพร้อม ถ้าไม่ใส่ จะมีคำถามให้เลือกทีละข้อ รวมถึงคำถามว่าจะใส่ไฟล์ AGENTS.md ไหม ไฟล์นี้ช่วยให้ AI ช่วยเขียนโค้ด เช่น Claude Code หรือ Cursor เขียนโค้ด Next.js ตามเวอร์ชันล่าสุด ถ้าใช้เครื่องมือเหล่านี้แนะนำให้ตอบ Yes
เปิดเบราว์เซอร์ไปที่ http://localhost:3000 จะเห็นหน้าเริ่มต้นของ Next.js ตั้งแต่ Next.js 16 คำสั่ง next dev ใช้ Turbopack เป็นค่าเริ่มต้น จึงเริ่มได้เร็วกว่าเวอร์ชันเก่ามาก
ขั้นที่ 2: รู้จักโครงสร้างโฟลเดอร์
my-app/
├── app/
│ ├── layout.tsx ← โครงหน้าที่ทุกหน้าใช้ร่วมกัน เช่น <html>, เมนู, footer
│ ├── page.tsx ← หน้าแรก (URL: /)
│ └── globals.css ← CSS ทั้งเว็บ
├── public/ ← ไฟล์ที่เปิดได้ตรง ๆ เช่น รูป, favicon
└── package.json
ไฟล์ที่ต้องจำมีแค่สองตัว layout.tsx คือกรอบที่ห่อทุกหน้า ส่วน page.tsx คือเนื้อหาของหน้านั้น
ขั้นที่ 3: สร้างหน้าใหม่ด้วยโฟลเดอร์
ใน App Router ชื่อโฟลเดอร์คือ URL สร้างไฟล์ app/about/page.tsx แล้วจะได้หน้า /about ทันที
// app/about/page.tsx
import Link from 'next/link'
export default function AboutPage() {
return (
<main>
<h1>เกี่ยวกับเรา</h1>
<Link href="/">กลับหน้าแรก</Link>
</main>
)
}
ใช้ <Link> แทน <a> สำหรับลิงก์ภายในเว็บ Next.js จะโหลดหน้าปลายทางล่วงหน้าและเปลี่ยนหน้าโดยไม่รีเฟรชทั้งเว็บ
ขั้นที่ 4: ดึงข้อมูลบนเซิร์ฟเวอร์
Component ใน App Router เป็น Server Component โดยค่าเริ่มต้น ทำงานบนเซิร์ฟเวอร์ จึงเขียนเป็น async แล้ว await ข้อมูลได้ตรง ๆ ไม่ต้องใช้ useEffect
// app/posts/page.tsx
type Post = { id: number; title: string }
export default async function PostsPage() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
const posts: Post[] = await res.json()
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
เบราว์เซอร์จะได้ HTML ที่มีรายการบทความอยู่แล้ว Google อ่านเนื้อหาได้ทันที และผู้ใช้ไม่ต้องรอ JavaScript โหลดก่อนจึงเห็นข้อมูล
ขั้นที่ 5: เพิ่มปุ่มกดด้วย Client Component
อะไรที่ต้องตอบสนองการกดหรือการพิมพ์ของผู้ใช้ เช่น useState, onClick ต้องอยู่ใน Client Component โดยใส่ 'use client' ไว้บรรทัดแรกของไฟล์
// app/components/LikeButton.tsx
'use client'
import { useState } from 'react'
export default function LikeButton() {
const [likes, setLikes] = useState(0)
return <button onClick={() => setLikes(likes + 1)}>ถูกใจ {likes}</button>
}
แล้วนำไปใช้ในหน้าที่เป็น Server Component ได้ตามปกติ เช่น <LikeButton /> ใน app/posts/page.tsx เนื้อหาหลักยัง render บนเซิร์ฟเวอร์ มีแค่ปุ่มที่ส่ง JavaScript ไปเบราว์เซอร์
ส่งออกตัวแปร metadata จากไฟล์ page.tsx หรือ layout.tsx Next.js จะสร้างแท็ก <title> และ <meta> ให้เอง
// app/about/page.tsx (เพิ่มไว้บนสุดของไฟล์)
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'เกี่ยวกับเรา | My App',
description: 'รู้จักทีมงานและบริการของเรา',
}
หน้าที่ข้อมูลเปลี่ยนตามเนื้อหา เช่น หน้าบทความแต่ละชิ้น ใช้ฟังก์ชัน generateMetadata แทน เพื่อให้ title และ description เปลี่ยนตามบทความ
ขั้นที่ 7: Build และนำขึ้นเว็บจริง
npm run build # สร้างเวอร์ชันสำหรับใช้งานจริง
npm run start # ทดลองรันเวอร์ชันนั้นในเครื่อง
ตั้งแต่ Next.js 16 คำสั่ง next build ไม่รัน linter ให้อัตโนมัติแล้ว ถ้าต้องการตรวจโค้ด ให้รัน ESLint หรือ Biome แยกเอง
การนำขึ้นเว็บทำได้หลายทาง ทางที่ง่ายที่สุดคือ Vercel ซึ่งเป็นผู้พัฒนา Next.js แต่ไม่บังคับ รันบนเซิร์ฟเวอร์ Node.js ของตัวเอง หรือใช้ผู้ให้บริการอื่นที่รองรับก็ได้ ข้อควรรู้คือ แพ็กเกจฟรีของ Vercel ใช้ได้เฉพาะงานส่วนตัว ถ้าเป็นเว็บธุรกิจ อ่านรายละเอียดค่าใช้จ่ายได้ในNext.js vs WordPress ทำเว็บบริษัทแบบไหนดี
Server Component vs Client Component ใช้อันไหนเมื่อไหร่
นี่คือเรื่องที่มือใหม่สับสนมากที่สุด หลักง่าย ๆ คือ ใช้ Server Component เป็นค่าเริ่มต้น แล้วค่อยแยกเฉพาะส่วนที่ต้องโต้ตอบออกมาเป็น Client Component
ข้อผิดพลาดที่มือใหม่เจอบ่อย
ใส่ 'use client' ไว้บนสุดของทุกหน้า ทำแล้วโค้ดใช้ได้เหมือน React ปกติ แต่เนื้อหาจะไปโหลดในเบราว์เซอร์แทน ถ้าข้อมูลถูกดึงใน useEffect อีกชั้น HTML ที่ Google ได้รับอาจไม่มีเนื้อหาเลย ซึ่งเท่ากับทิ้งข้อดีหลักของ Next.js เช็กได้ด้วยการคลิกขวา "ดูซอร์สของหน้า" แล้วค้นหาข้อความในหน้า ถ้าไม่เจอ แปลว่ามีปัญหานี้
เรียนจากบทความเก่าที่ใช้ pages/ Pages Router ยังใช้งานได้และยังได้รับการดูแล แต่เป็นระบบเดิม ฟีเจอร์ใหม่อย่าง Server Components มีเฉพาะใน App Router บทความที่ใช้ getServerSideProps หรือ pages/index.js คือแบบเก่า
ไม่อัปเดตเวอร์ชัน Next.js ออกอัปเดตความปลอดภัยค่อนข้างบ่อย แค่เดือนกันยายนถึงตุลาคม 2026 ก็มีประกาศ 3 ครั้ง เว็บที่ขึ้นใช้งานจริงควรติดตามประกาศเหล่านี้และอัปเดตเป็นระยะ
เข้าใจผิดเรื่อง cache ค่าเริ่มต้นของการ cache ข้อมูลเปลี่ยนไปหลายรอบในแต่ละเวอร์ชัน ถ้าข้อมูลบนเว็บไม่อัปเดตหรืออัปเดตบ่อยเกินไป ให้อ่านเอกสารเรื่อง Caching ของเวอร์ชันที่ใช้อยู่ อย่าอ้างจากบทความของเวอร์ชันอื่น
เรียน Next.js ต่อยังไง
- 1.ทำตาม 7 ขั้นตอนข้างบนให้ครบจนรันได้
- 2.ลองสร้างเว็บจริงขนาดเล็ก เช่น พอร์ตโฟลิโอหรือบล็อกส่วนตัว พร้อม metadata ทุกหน้า
- 3.เรียนหน้า Dynamic Route เช่น
app/blog/[slug]/page.tsx สำหรับหน้าบทความที่มีหลายชิ้น - 4.ต่อฐานข้อมูลและระบบล็อกอิน เช่น Supabase ฐานข้อมูลที่ใช้คู่กับ Next.js
- 5.เรียน Server Actions สำหรับส่งฟอร์มโดยไม่ต้องเขียน API แยก
- 6.ทำคอร์ส Next.js Foundations ของทีม Next.js ที่สอนผ่านการสร้างแดชบอร์ดจริง
คำถามที่พบบ่อย
ฟรี Next.js เป็นซอฟต์แวร์โอเพนซอร์ส ใช้ทำเว็บส่วนตัวและเชิงพาณิชย์ได้โดยไม่เสียค่าใช้จ่าย ส่วนที่อาจมีค่าใช้จ่ายคือโฮสติ้งที่ใช้วางเว็บ
ควรเรียนพื้นฐานก่อน อย่างน้อยเรื่อง Component, props, JSX และ useState เพราะทุกหน้าใน Next.js คือ React Component ถ้าข้ามไปเลย จะแยกไม่ออกว่าปัญหามาจาก React หรือ Next.js
โปรเจกต์ใหม่ใช้ App Router ซึ่งเป็นค่าเริ่มต้นของ create-next-app และรองรับฟีเจอร์ใหม่ทั้งหมด Pages Router เหมาะกับการดูแลโปรเจกต์เก่าที่ใช้อยู่แล้ว
ไม่ใช่ รันบนเซิร์ฟเวอร์ Node.js ได้ทุกที่ และตั้งแต่ Next.js 16.2 มี Adapter API แบบ stable ที่ช่วยให้ผู้ให้บริการอื่นรองรับ Next.js ได้ดีขึ้น
เหมาะกับเว็บที่ต้องการทั้ง SEO และความโต้ตอบ เช่น เว็บบริษัท ร้านค้าออนไลน์ บล็อก แดชบอร์ด และเว็บแอป ถ้าเป็นเว็บเนื้อหาล้วนที่ทีมต้องแก้เองบ่อยและไม่มีนักพัฒนา CMS อย่าง WordPress อาจเหมาะกว่า
สรุป
Next.js คือ React ที่มาพร้อมทุกอย่างที่เว็บจริงต้องใช้ เริ่มต้นได้ในคำสั่งเดียว จุดสำคัญที่สุดที่ควรจำคือ ให้ Server Component ทำงานเป็นหลัก และใช้ 'use client' เฉพาะส่วนที่ผู้ใช้ต้องกดหรือพิมพ์ เว็บจะเร็วและ Google อ่านเนื้อหาได้ครบ
