Next.js คืออะไร ช่วยให้เราทำงานได้ง่ายขึ้นยังไงบ้าง

Next.js คือ React-based Framework ซึ่งจะช่วยให้นักพัฒนาสามารถสร้างเว็บแอปพลิเคชันที่มีประสิทธิภาพได้ง่ายขึ้น โดย Next.js มาพร้อมกับฟีเจอร์ที่สำคัญหลายอย่าง เช่น SSR (Server-side Rendering), SSG (Static Site Generation), มี API routes สำหรับสร้าง API, หรือจะพัฒนาเว็บแอปพลิเคชันแบบ Single Page Application (SPA) เหมือนกับ React ก็ได้ เราจึงเห็นว่า Next.js ค่อนข้างตอบโจทย์ของเว็บแอปพลิเคชันในหลายรูปแบบ

และเนื่องจากเป็น React-based จึงทำให้ Developer ที่เขียน React อยู่แล้วนำไปปรับใช้ได้ไม่ยาก ส่งผลให้มีผู้ที่นำ Next.js ไปใช้งานอย่างแพร่หลาย ในบทความนี้เราจะใช้ Next.js version 15 ซึ่งเป็น Version ล่าสุดตอนที่เขียนบทความนี้

ข้อดีของ Next.js

เราสามารถใช้ Next.js ได้หลายรูปแบบดังนี้

สามารถสร้าง Website ที่ต้องการ SEO โดยใช้ SSG(Static Site Generation) หรือ SSR(Server-side Rendering)
สามารถสร้าง API ด้วยการใช้ API Routes ทำให้เรามีทั้ง Front-end และ Backend อยู่ใน Project เดียวกัน
สร้างแอปพลิเคชันแบบ Single Page Application (ใช้ทำ Front-end ฝั่งเดียว) โดยใช้ Client-side Rendering(CSR)

Nextjs vs React

ในยุคปัจจุบันการพัฒนาเว็บแอปพลิเคชันนั้นไม่เพียงแค่การสร้าง UI ที่ดูดีและใช้งานง่าย แต่ยังต้องให้ความสำคัญกับ SEO ด้วย ดังนั้นเมื่อเราใช้เพียงแค่ React ซึ่งเป็นหนึ่งใน Framework ที่ได้รับความนิยมมากที่สุดในการสร้าง UI อาจไม่เพียงพอต่อความต้องการอีกต่อไป Next.js จึงเข้ามามีบทบาทสำคัญในการช่วยเสริมความสามารถของ React ให้มีประสิทธิภาพสูงขึ้น ทั้งในเรื่องของการ Render หน้าด้วย Server-Side Rendering(SSR) และ Static Site Generation (SSG) เพื่อให้ Server แสดงผลลัพธ์กลับมาเป็น HTML(เนื่องจาก React จะตอบกลับมาเป็น JavaScript ซึ่งเป็น Content ที่ Google ไม่เข้าใจ)

ความแตกต่างของ Server-Side Rendering(SSR) และ Static Site Generation (SSG) ดูได้ในหัวข้อ

คุณสมบัติของ Next.js

Server-side Rendering (SSR)

Server-side Rendering(SSR) คือการ Render HTML จากฝั่ง Server ซึ่งโดยปกติ React จะนำ Javascript ไปสร้างเป็น HTML บน Browser ด้วยความสามารถนี้ทำให้ส่งผลดีต่อการทำ SEO เป็นอย่างยิ่ง

SSR จะทำการ Render HTML ออกมาหลังจากที่ได้รับ Request ซึ่ง SSR จะเหมาะกับเว็บไซต์ที่มีการเปลี่ยนแปลงข้อมูลบ่อยๆ

Static Site Generation (SSG)

Static Site Generation(SSG) คือการ Render HTML ออกมาตั้งแต่ตอน Build ซึ่งจะแตกต่างจาก SSR ที่ Render HTML ออกมาหลังจากที่รับ Request มาจาก Client

ผลลัพธ์ที่ได้จาก SSG จะได้ HTML ออกมาตั้งแต่ตอน Build หลังจากนั้นเราแค่เอา HTML ไป Deploy ลงบน Web Server เหมือนกับ Static Site ทั่วไป ซึ่ง SSG จะเหมาะกับเว็บไซต์ที่ไม่ค่อยมีการเปลี่ยนแปลงเท่าไหร่ เพราะเราต้องมาสั่ง Build HTML ใหม่ทุกครั้งเมื่อมีการ Update Content

Automatic Code Splitting

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

API Routes

Next.js ช่วยให้คุณสามารถสร้าง API ภายใน Project ได้ง่ายๆ โดยไม่จำเป็นต้องใช้เซิร์ฟเวอร์แยกต่างหาก แค่สร้างไฟล์ในโฟลเดอร์ pages/api ก็สามารถสร้าง API Endpoint ได้ทันที

Built-in CSS and Sass Support

Next.js ได้ติดตั้ง Sass มาให้เราใช้งานได้ทันที นอกจากนี้เรายังสามารถเลือก Tailwind CSS เข้ามาใช้งานใน Project ได้ตั้งแต่ขั้นตอนแรกของการติดตั้ง ซึ่งช่วยให้การพัฒนาเว็บไซต์ง่ายและสะดวกขึ้นมากๆ

ทำไมถึงควรใช้ Next.js?

ต้องการทำ SEO เนื่องจาก Next.js รองรับ SSR และ SSG ทำให้สามารถ Render หน้าเว็บให้พร้อมก่อนส่งไปที่ Client ซึ่งช่วยเพิ่มโอกาสในการทำ SEO ให้ดีขึ้นกว่าเว็บที่เป็น SPA ปกติ
Efficiency ด้วยการสนับสนุนทั้ง SSR, SSG และ Automatic Code Splitting ช่วยให้เว็บแอปพลิเคชันที่พัฒนาโดย Next.js โหลดหน้าเว็บขึ้นมาใช้งานอย่างรวดเร็ว
Productivity Next.js รองรับ Hot Reloading และการพัฒนาได้อย่างราบรื่น ซึ่งช่วยให้สามารถพัฒนาเว็บแอปพลิเคชันได้อย่างมีประสิทธิภาพ
Flexibility คุณสามารถเลือกใช้วิธีการ Render แบบ SSR หรือ SSG ได้ตามความต้องการของแต่ละหน้า และยังสามารถผสมผสานทั้งสองวิธีใน Project เดียวกันได้ เพราะใน 1 Project ก็มักจะมีทั้งส่วนที่เป็น Static(นานๆเปลี่ยนที) และ Dynamic(ต้องการข้อมูลแบบ Real-time)

เริ่มต้นเขียน Next.js

หลังจากที่ได้เรียนรู้ว่า Next.js นั้นดียังไง มาพอสมควรแล้ว ก็ได้เวลามาลองสร้าง Project แรกของ Next.js กัน

เริ่มต้นสร้าง Next.js Project ด้วยคำสั่ง
```
$ npx create-next-app@latest my-nextjs-app
```
หลังจากนั้นก็ตอบคำถามต่างๆเหล่านี้
```
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
```
โดยที่เราจะเลือก Options ต่างๆดังนี้
- Typescript เลือกเป็น Yes จะหมายถึงเราเลือกใช้ Typescript ในการเขียน
- ESLint เลือกเป็น Yes จะหมายถึงเราจะนำ ESLint เข้ามาใช้ตรวจสอบคุณภาพของ JavaScript
- Tailwind CSS เลือกเป็น Yes จะหมายถึงเราเลือก Load Tailwind CSS เข้ามาใช้งาน
- /src directory เลือกเป็น Yes จะหมายถึงเราต้องการให้ Code ของเราอยู่ใน Folder /src
- App router เลือกเป็น Yes เพื่อสร้าง API อยู่ใน Project เดียวกัน
- Turbopack เลือกเป็น Yes เพื่อนำ Turbopack เข้ามาใช้งานแทน Webpack
- import alias (@/* by default) ให้เลือกเป็น No เพื่อให้ตอน import ใช้เป็น relative path แทนการใช้ @/app/… ซึ่งเป็น Absolute Path
Turbopack จะช่วยเพิ่มประสิทธิภาพในการ Load Module ต่างๆของ Next.js แบบ Dynamic ทำให้เราใช้ทรัพยากรได้เต็มประสิทธิภาพมากขึ้น รวมทั้งยังสามารถ Build ทั้ง Client-side และ Server-side ได้พร้อมกัน
ทดลอง run my-nextjs-app ด้วยคำสั่ง
```
$ cd my-nextjs-app
$ npm run dev
```

เราจะได้โครงสร้างของ Next.js ดังนี้

├── eslint.config.mjs
├── next-env.d.ts
├── next.config.ts
├── package.json
├── postcss.config.mjs
├── public
│   ├── file.svg
│   ├── globe.svg
│   ├── next.svg
│   ├── vercel.svg
│   └── window.svg
├── src
│   └── app
│       ├── favicon.ico
│       ├── globals.css
│       ├── layout.tsx
│       └── page.tsx
├── tailwind.config.ts
└── tsconfig.json