IT General
Nextjs 14 App Router Guide
Nextjs 14 App Router Guide คืออะไร / ทำไมถึงสำคัญ
น้องๆ เคยเจอปัญหาเว็บโหลดช้าไหม? หรืออยากทำเว็บที่มันดูทันสมัย ใช้งานง่าย แต่ไม่รู้จะเริ่มยังไง? Next.js 14 App Router นี่แหละคือคำตอบ! สมัยผมทำร้านเน็ต SiamCafe.net เมื่อก่อนนะ เว็บไซต์มันก็ไม่ได้ซับซ้อนอะไรมาก แต่เดี๋ยวนี้ user expectation มันสูงขึ้นเยอะ ใครๆ ก็อยากได้เว็บที่เร็ว แรง และสวยงาม
App Router ใน Next.js 14 เนี่ย มันเหมือนเป็นการยกเครื่องใหม่หมดเลยนะพี่ว่า มันช่วยให้นักพัฒนาอย่างเราๆ สร้างเว็บที่ responsive, dynamic, และ scale ได้ง่ายขึ้นเยอะมากๆ ที่สำคัญคือมันเน้นเรื่อง performance เป็นหลัก ช่วยให้เว็บโหลดเร็วขึ้นมาก ทำให้ user experience ดีขึ้น ใครๆ ก็ชอบ
ทำไมถึงสำคัญน่ะเหรอ? ลองนึกภาพตามนะ สมัยผมเปิดร้านเน็ตใหม่ๆ ใครที่เข้าเว็บเราได้เร็วกว่า ก็มีโอกาสที่ลูกค้าจะใช้บริการเรามากกว่า ถูกไหม? App Router ก็เหมือนกัน ถ้าเว็บเราโหลดเร็วกว่าคู่แข่ง User ก็จะชอบเว็บเรามากกว่า โอกาสที่เค้าจะกลับมาใช้บริการเราอีกก็สูงขึ้นด้วย
พื้นฐานที่ต้องรู้
รู้จัก Server Components & Client Components
อันนี้สำคัญมาก! Server Components คือ components ที่ render ฝั่ง Server ทำให้เราดึงข้อมูลจากฐานข้อมูลได้โดยตรง ไม่ต้องกลัวเรื่อง API keys หลุดไปฝั่ง Client (สมัยผมทำเว็บแรกๆ นี่พลาดเรื่องนี้บ่อยมาก) ส่วน Client Components คือ components ที่ render ฝั่ง Client เหมาะสำหรับพวก interaction ต่างๆ เช่น ปุ่มกด หรือ form
// Server Component
async function getData() {
const res = await fetch('https://api.example.com/data', { cache: 'no-store' });
return res.json();
}
export default async function Page() {
const data = await getData();
return <div>{JSON.stringify(data)}</div>;
}
// Client Component
'use client';
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Routing และ Layouts
App Router ใช้ระบบ File-based routing ซึ่งง่ายและสะดวกมาก แค่สร้าง folder ใน directory app แล้วใส่ไฟล์ page.js เข้าไป Next.js ก็จะสร้าง route ให้เราอัตโนมัติ ส่วน Layouts ก็คือ components ที่ใช้ห่อหุ้ม pages ต่างๆ ช่วยให้เราสร้าง UI ที่ consistent ได้ง่ายขึ้น
// app/layout.js
export default function RootLayout({ children }) {
return (
<html>
<body>
<nav>
<a href="/">Home</a> | <a href="/about">About</a>
</nav>
<main>{children}</main>
<footer>© SiamCafe.net</footer>
</body>
</html>
);
}
// app/page.js
export default function Home() {
return <h1>Hello, Next.js!</h1>;
}
// app/about/page.js
export default function About() {
return <h1>About Us</h1>;
}
วิธีใช้งาน / เริ่มต้นยังไง
เริ่มต้นง่ายมากๆ แค่มี Node.js ติดตั้งอยู่ในเครื่องก็พอแล้ว แล้วก็ใช้คำสั่ง create-next-app ในการสร้าง project ใหม่
npx create-next-app@latest my-app --example "https://github.com/vercel/next-learn/tree/main/app-dir/starter-example"
cd my-app
npm run dev
แค่นี้เราก็จะได้ project Next.js 14 ที่ใช้ App Router แล้ว ทีนี้ก็ลองเข้าไปดูโครงสร้าง directory app แล้วเริ่มสร้าง pages และ components ของเราได้เลย
ขั้นตอนปฏิบัติจริง
สร้าง Blog Listing Page
สมมติว่าเราอยากสร้างหน้าสำหรับแสดงรายการ blog posts เราก็สร้าง folder blog ใน directory app แล้วสร้างไฟล์ page.js ข้างใน
// app/blog/page.js
async function getPosts() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts', { cache: 'no-store' });
return res.json();
}
export default async function Blog() {
const posts = await getPosts();
return (
<div>
<h1>Blog Posts</h1>
<ul>
{posts.map(post => (
<li key={post.id}>
<a href={`/blog/${post.id}`}>{post.title}</a>
</li>
))}
</ul>
</div>
);
}
โค้ดนี้จะดึงข้อมูล posts จาก API แล้วแสดงเป็นรายการ links ไปยังแต่ละ post ทีนี้เราก็ต้องสร้าง dynamic route สำหรับแต่ละ post ด้วย
สร้าง Dynamic Route สำหรับ Blog Posts
ในการสร้าง dynamic route เราสร้าง folder [id] (โดยที่ id คือ parameter ที่เราจะใช้) ใน directory app/blog แล้วสร้างไฟล์ page.js ข้างใน
// app/blog/[id]/page.js
async function getPost(id) {
const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, { cache: 'no-store' });
return res.json();
}
export default async function Post({ params }) {
const post = await getPost(params.id);
return (
<div>
<h1>{post.title}</h1>
<p>{post.body}</p>
</div>
);
}
โค้ดนี้จะดึงข้อมูล post จาก API โดยใช้ id ที่ได้จาก params แล้วแสดง title และ body ของ post นั้นๆ ลองเข้าไปดู SiamCafe Blog เพื่อดูตัวอย่างการใช้งานจริงได้เลย
Data Fetching Strategies
เรื่อง data fetching นี่สำคัญมากๆ ใน App Router เรามี options ให้เลือกหลายแบบ เช่น cache: 'force-cache' สำหรับ cache ข้อมูล หรือ cache: 'no-store' สำหรับ disable cache
// ตัวอย่างการใช้ cache strategies
async function getData() {
const res = await fetch('https://api.example.com/data', {
cache: 'force-cache' // หรือ 'no-store'
});
return res.json();
}
การเลือก strategy ที่เหมาะสมจะช่วยให้เว็บเราเร็วขึ้น และลดภาระของ server ได้เยอะมากๆ
เปรียบเทียบกับทางเลือกอื่น
สมัยก่อนที่ยังไม่มี Next.js หรือ framework อื่นๆ เวลาทำเว็บนี่เหนื่อยมาก ต้องจัดการเรื่อง routing, bundling, optimization เองหมด แต่เดี๋ยวนี้มี frameworks ให้เลือกใช้เยอะแยะ แต่ละ framework ก็มีข้อดีข้อเสียต่างกัน
| Framework | ข้อดี | ข้อเสีย |
|---|---|---|
| Next.js (App Router) | Server Components, File-based routing, Data Fetching options, Performance Optimization | Learning curve สูง, อาจต้อง migrate จาก Pages Router |
| Create React App (CRA) | เริ่มต้นง่าย, Community ใหญ่ | ขาด Server-side rendering, Performance อาจไม่ดีเท่า Next.js |
| Gatsby | เน้น static site generation, Performance ดี | Dynamic content management ยาก, Build time นาน |
| Remix | เน้น web standards, Progressive enhancement | Community ยังไม่ใหญ่เท่า Next.js, Learning curve อาจสูง |
จากตารางจะเห็นว่า Next.js (App Router) มีข้อดีหลายอย่าง โดยเฉพาะเรื่อง performance และ data fetching แต่ก็ต้องแลกมาด้วย learning curve ที่สูงขึ้น น้องๆ ลองศึกษาดู SiamCafe Blog เพิ่มเติมได้นะ แล้วเลือก framework ที่เหมาะกับ project ของตัวเอง
🎬 วิดีโอแนะนำ
ดูวิดีโอเพิ่มเติมเกี่ยวกับNextjs 14 App Router Guide:
Best Practices / เคล็ดลับจากประสบการณ์
เอาล่ะน้องๆ หลังจากที่เราพอจะคลำทางใน Next.js 14 App Router กันได้แล้ว คราวนี้มาดู Best Practices หรือเคล็ดลับที่พี่บอมสั่งสมมาจากการทำร้านเน็ตยุคบุกเบิก จนมาถึงงาน dev ทุกวันนี้กันดีกว่า บอกเลยว่าเอาไปใช้ได้จริงแน่นอน
สมัยก่อนตอนทำร้านเน็ต สิ่งที่สำคัญที่สุดคือ "ความเร็ว" เพราะลูกค้าจ่ายเงินเป็นชั่วโมง ใครโหลดเร็วกว่า เล่นเกมลื่นกว่า ลูกค้าติดตรึม! หลักการเดียวกันเลยกับการพัฒนาเว็บ Next.js ก็เหมือนกัน ต้องทำให้เร็ว ทำให้ user experience ดีที่สุด
3-4 เทคนิคที่ใช้ได้จริง
1. รูปภาพ สำคัญกว่าที่คิด
อย่ามองข้ามเรื่องรูปภาพเด็ดขาด! สมัยก่อนเน็ตช้า รูปใหญ่ๆ นี่รอโหลดกันรากงอก พี่เลยต้อง optimize รูปทุกรูปให้เล็กที่สุดเท่าที่จะทำได้ โดยที่คุณภาพยังโอเคอยู่
ใน Next.js เราใช้ next/image component ได้เลย มันช่วย lazy load รูป, optimize ขนาด และ convert เป็น format ที่เหมาะสมกับ browser ให้เราอัตโนมัติ โค้ดประมาณนี้:
import Image from 'next/image'
function MyComponent() {
return (
<Image
src="/my-image.jpg"
alt="My Image"
width={500}
height={300}
/>
)
}
2. Caching is King
Caching คือพระราชา! สมัยร้านเน็ต พี่ใช้ Proxy Server เพื่อ cache ไฟล์เกม, ไฟล์ update ต่างๆ ทำให้เครื่องลูกไม่ต้องโหลดซ้ำๆ Next.js ก็มีระบบ caching ที่ทรงพลังเหมือนกัน
เราสามารถใช้ fetch API กับ cache: 'force-cache' เพื่อบอกให้ Next.js cache data จาก API endpoint ได้เลย:
async function getData() {
const res = await fetch('https://api.example.com/data', { cache: 'force-cache' })
// The return value is *not* serialized
// You can return Date, Map, Set, etc.
if (!res.ok) {
// This will activate the closest `error.js` Error Boundary
throw new Error('Failed to fetch data')
}
return res.json()
}
3. Server Actions ช่วยชีวิต
สมัยก่อนเวลาทำเว็บ ถ้าอยากให้ form submit แล้ว update database นี่โค้ดยาวเป็นหางว่าว แถมต้องเขียน API endpoint เองอีก Next.js 14 มี Server Actions มาให้ชีวิตง่ายขึ้นเยอะ!
เราสามารถเขียน function ที่ทำงานบน server แล้วเรียกใช้จาก client component ได้เลย โค้ดมันจะสั้นลง อ่านง่ายขึ้น แถมปลอดภัยกว่าเดิมเยอะ:
'use server'
import { cookies } from 'next/headers'
export async function setCookie(value: string) {
cookies().set('nextjs', value)
}
4. Component Libraries คือเพื่อนแท้
อย่าเสียเวลาเขียน UI component เองตั้งแต่ศูนย์! สมัยก่อนพี่ต้องนั่งเขียน button, form เองหมด เสียเวลามาก ตอนนี้มี Component Libraries เจ๋งๆ ให้ใช้เยอะแยะ เช่น Material UI, Tailwind CSS, Chakra UI เลือกใช้ให้เหมาะกับ project ของเรา จะช่วยประหยัดเวลาไปได้เยอะเลย
แต่...อย่าใช้เยอะเกินไปนะ! เลือก component ที่จำเป็นจริงๆ ไม่งั้น bundle size จะใหญ่ แล้วเว็บจะโหลดช้า
FAQ คำถามที่พบบ่อย
Q: Next.js App Router ยากกว่า Pages Router จริงไหม?
A: ช่วงแรกๆ อาจจะรู้สึกยากกว่านิดหน่อย เพราะ concept มันเปลี่ยนไปพอสมควร แต่พอเข้าใจหลักการแล้ว จะรู้สึกว่า App Router มัน flexible และ powerful กว่าเยอะเลย
Q: Server Components กับ Client Components ต่างกันยังไง?
A: Server Components ทำงานบน server เท่านั้น ใช้ fetch data ได้โดยตรง ไม่ต้องเขียน API endpoint ส่วน Client Components ทำงานบน browser ใช้จัดการ state และ event ต่างๆ ได้
Q: Next.js เหมาะกับ project แบบไหน?
A: Next.js เหมาะกับ project แทบทุกรูปแบบเลย ตั้งแต่ blog เล็กๆ ไปจนถึง e-commerce ขนาดใหญ่ เพราะมัน scalable และมี features ครอบคลุมทุกความต้องการ
Q: จะเริ่มเรียน Next.js ยังไงดี?
A: เริ่มจาก document ของ Next.js เลยครับ อ่านให้เข้าใจ concept พื้นฐาน แล้วลองทำตาม tutorial ดู ถ้าติดตรงไหนก็ถามใน community ได้เลย มีคนพร้อมช่วยเหลือเยอะแยะ
สรุป
Next.js 14 App Router เป็นเครื่องมือที่ทรงพลังมาก ถ้าเราเข้าใจหลักการและ Best Practices มันจะช่วยให้เราสร้างเว็บที่เร็ว, scalable และ maintainable ได้ง่ายขึ้นเยอะ ที่สำคัญคือต้องฝึกฝนและเรียนรู้อยู่เสมอ เพราะเทคโนโลยีมันเปลี่ยนแปลงตลอดเวลา
อย่าลืมว่าสมัยพี่ทำร้านเน็ต สิ่งที่สำคัญที่สุดคือ "การปรับตัว" อะไรใหม่ๆ มา เราต้องเรียนรู้และปรับตัวให้ทัน ไม่งั้นก็โดนทิ้งไว้ข้างหลัง
ลองเข้าไปดูบทความอื่นๆ เกี่ยวกับ IT ได้ที่ SiamCafe Blog นะน้องๆ และใครสนใจเรื่อง Forex ลองดูที่ iCafeForex ได้เลย
