ลอง Next.js 14 แบบ Quick overview กัน

สวัสดีครับทุกคน วันนี้เราจะมาเจาะลึก Next.js กันครับ Next.js คืออะไร มีความสัมพันธ์กับ React อย่างไร และทำไมถึงเป็น React Framework ที่ได้รับความนิยมในการพัฒนา Full Stack Web App ในปัจจุบัน เราจะมาดูภาพรวมของ Next.js 14 พร้อมทั้งสำรวจฟีเจอร์เด่น ๆ ที่ทำให้ Next.js แตกต่างจาก React ทั่วไป รวมถึงการใช้งาน Server Components, App Router, การจัดการ Routing และการสร้าง API

Next.js คืออะไร และความสัมพันธ์กับ React

Next.js คือ React Framework ที่ถูกสร้างขึ้นมาเพื่อช่วยให้การพัฒนาเว็บแอปพลิเคชันด้วย React เป็นเรื่องง่ายและมีประสิทธิภาพมากยิ่งขึ้น Next.js นิยามตัวเองว่าเป็น React Framework หมายความว่ามันถูกออกแบบมาเพื่อทำงานร่วมกับ React โดยเฉพาะ และช่วยเสริมความสามารถของ React ให้แข็งแกร่งยิ่งขึ้น

Next.js คือ React Framework

Next.js ไม่ได้เป็นเพียงแค่ไลบรารีเสริม แต่เป็น Framework ที่เข้ามาจัดการโครงสร้างและวิธีการทำงานของ React ให้เหมาะสมกับการใช้งานจริงในโปรเจกต์ขนาดใหญ่ โดยเฉพาะอย่างยิ่งในการทำ Production

การเลือกใช้ Next.js หรือ React

หากคุณกำลังเริ่มต้นโปรเจกต์ React ในยุคนี้ การเลือกใช้ Next.js เป็นตัวเลือกที่แนะนำเป็นอย่างยิ่ง เพราะ Next.js สามารถทำได้ทุกอย่างที่ React ทำได้ แถมยังมีฟีเจอร์เพิ่มเติมที่ช่วยให้การพัฒนาเว็บแอปพลิเคชันง่ายขึ้นและมีประสิทธิภาพมากขึ้น อย่างไรก็ตาม หากโปรเจกต์ของคุณมีข้อจำกัดในการ Deploy หรือต้องการ Static Site ที่ซับซ้อนน้อยกว่า React อาจเป็นตัวเลือกที่ดีกว่า

Full Stack Web App ด้วย Next.js

จุดเด่นที่สำคัญของ Next.js คือความสามารถในการทำ Full Stack Web App ได้ หมายความว่า Next.js สามารถจัดการทั้งฝั่ง Frontend และ Backend ไปพร้อม ๆ กันได้ ทำให้คุณสามารถสร้างเว็บแอปพลิเคชันที่สมบูรณ์แบบได้ในที่เดียว

Routing ใน Next.js

Routing เป็นหัวใจสำคัญในการสร้างเว็บแอปพลิเคชัน Next.js มีระบบ Routing ที่ทรงพลังและยืดหยุ่น ช่วยให้คุณสามารถจัดการเส้นทางของเว็บไซต์ได้อย่างง่ายดาย

Pages Router vs. App Router

Next.js มี Router ให้เลือกใช้งาน 2 แบบ คือ Pages Router และ App Router Pages Router เป็นระบบ Routing แบบเก่าที่ใช้ File System ในการจัดการเส้นทาง ส่วน App Router เป็นระบบ Routing ใหม่ที่ถูกออกแบบมาให้มีความยืดหยุ่นและมีประสิทธิภาพมากยิ่งขึ้น

App Router: โครงสร้างไฟล์และการจัดการ Routing

App Router ใช้ File System ในการจัดการ Routing โดยการสร้าง Folder และ File ที่มีชื่อเฉพาะ เช่น page.js เพื่อกำหนดเส้นทางต่างๆ ภายในเว็บไซต์

การสร้าง Routing ใน App Router ทำได้โดยการสร้าง Folder ตาม Path ที่ต้องการ เช่น หากต้องการสร้าง Path /about ให้สร้าง Folder ชื่อ about ภายใน Folder app และสร้างไฟล์ page.js ภายใน Folder about

การสร้าง Layout ใน Next.js

Layout คือส่วนประกอบที่ใช้ในการกำหนดโครงสร้างพื้นฐานของแต่ละหน้าเว็บ เช่น Header, Footer และ Sidebar Next.js ช่วยให้คุณสามารถสร้าง Layout ได้ทั้งในระดับ Route และระดับ Folder

การสร้าง Layout ระดับ Route ทำได้โดยการสร้างไฟล์ layout.js ใน Folder ที่ต้องการ เช่น หากต้องการสร้าง Layout สำหรับ Path /about ให้สร้างไฟล์ layout.js ภายใน Folder app/about

การสร้าง Layout ภายใน Folder ทำได้โดยการสร้างไฟล์ layout.js ใน Folder หลัก เช่น Folder app ซึ่ง Layout นี้จะถูกนำไปใช้กับทุก Route ภายในเว็บไซต์

การจัดการ Parameter ใน Routing

Next.js รองรับการจัดการ Parameter ใน Routing ช่วยให้คุณสามารถรับค่าจาก URL และนำไปใช้งานในหน้าเว็บได้

การสร้าง Folder ที่มีชื่อ bracket เช่น [id] จะทำให้ Next.js สร้าง Path ที่มี Parameter id

API และ Backend ใน Next.js

Next.js ช่วยให้คุณสามารถสร้าง API และจัดการ Backend ได้อย่างง่ายดาย ทำให้คุณสามารถสร้าง Full Stack Web App ได้อย่างสมบูรณ์แบบ

Route Handler: การสร้าง API ใน Next.js

Route Handler เป็นฟีเจอร์ที่ช่วยให้คุณสามารถสร้าง API Endpoint ได้โดยตรงใน Next.js โดยใช้ File System

การสร้าง API ด้วย route.js

การสร้าง API ทำได้โดยการสร้างไฟล์ route.js ใน Folder ที่ต้องการ เช่น หากต้องการสร้าง API Endpoint สำหรับ Path /api/users ให้สร้างไฟล์ route.js ภายใน Folder app/api/users

การใช้ method get และ post

ภายในไฟล์ route.js คุณสามารถใช้ method GET, POST, PUT, DELETE และอื่น ๆ เพื่อจัดการ Request ที่เข้ามายัง API Endpoint

ตัวอย่างเช่น การใช้ method GET เพื่อดึงข้อมูล และ method POST เพื่อสร้างข้อมูล

การรับ parameter ใน API

คุณสามารถรับ Parameter จาก URL ได้โดยใช้ params ใน function ของ Route Handler

Middleware

Middleware เป็นฟีเจอร์ที่ช่วยให้คุณสามารถจัดการ Request ก่อนที่จะเข้าสู่ Page ได้ ทำให้คุณสามารถทำ Authentication, Authorization หรือ Redirect ได้

การทำงานของ Middleware

Middleware จะทำงานก่อนที่ Request จะถูกส่งไปยัง Page ทำให้คุณสามารถตรวจสอบและจัดการ Request ได้ตามต้องการ

การสร้างไฟล์ middleware.js

การสร้าง Middleware ทำได้โดยการสร้างไฟล์ middleware.js ใน Folder app

การใช้ edge runtime

Edge Runtime เป็น Runtime ที่ถูกออกแบบมาให้ทำงานบน Edge Server ทำให้ Middleware สามารถทำงานได้อย่างรวดเร็วและมีประสิทธิภาพ

การใช้ nextResponse

nextResponse ใช้ในการสร้าง Response ที่จะถูกส่งกลับไปยัง Client

การ redirect

คุณสามารถใช้ Middleware เพื่อ Redirect Request ไปยัง URL อื่นได้

Server Components และ Client Components

Server Components และ Client Components เป็นสองแนวคิดหลักที่ทำให้ Next.js แตกต่างจาก React ทั่วไป Server Components ช่วยให้คุณสามารถ Fetch ข้อมูลจาก Server และ Render HTML ได้โดยตรงบน Server ทำให้เว็บแอปพลิเคชันของคุณมีประสิทธิภาพมากขึ้น

Server Components คืออะไร

Server Components คือ React Components ที่ถูก Render บน Server และส่งผลลัพธ์เป็น HTML ไปยัง Client

Server Components ช่วยให้คุณสามารถ Fetch ข้อมูลจาก Server ได้โดยตรง ทำให้คุณไม่จำเป็นต้องใช้ Client-Side Rendering สำหรับการดึงข้อมูล

Client Component คืออะไร

Client Components คือ React Components ที่ถูก Render บน Client

Client Components เหมาะสำหรับส่วนประกอบที่ต้องการ Interaction กับ User เช่น Button, Form หรือ Component ที่มีการใช้ State

ความแตกต่างระหว่าง Server และ Client Components

Server Components ถูก Render บน Server และไม่สามารถเข้าถึง Event Listener ได้โดยตรง ในขณะที่ Client Components ถูก Render บน Client และสามารถเข้าถึง Event Listener ได้

การ Fetch API ใน Server Components

คุณสามารถ Fetch API ใน Server Components ได้โดยใช้ Fetch API ของ Browser

การ Fetch API ใน Server Components จะช่วยให้คุณสามารถดึงข้อมูลจาก Server และ Render HTML ได้โดยตรงบน Server ทำให้เว็บแอปพลิเคชันของคุณมีประสิทธิภาพมากขึ้น

การใช้ Client Components และ useEffect

คุณสามารถใช้ Client Components และ useEffect เพื่อจัดการ Side Effect ใน Client Components

React Strict Mode

React Strict Mode ช่วยให้คุณสามารถตรวจจับปัญหาที่อาจเกิดขึ้นในโค้ดของคุณ เช่น การใช้ API ที่ไม่ถูกต้อง หรือการ Render ซ้ำ

💬 ปรึกษาการเงินฟรีกับผู้เชี่ยวชาญ คลิกเพื่อแอดไลน์

👉 แอดไลน์เพื่อปรึกษาฟรี

หรือสแกน QR เพื่อแอด