ประสบการณ์ของ ค.คนดูคอม ที่เริ่มต้นการใช้ Next.js จากเฟรมเวิรก์สู่โปรดักชั่น webapp เหมาะกับ SEO ประสิทธิภาพ พัฒนาเร็วขึ้นหลายเท่าพร้อมขยายได้อีก

ใน

 

รายละเอีดยเนื้อหา

  1. บทนำ
  2. Next.js คืออะไร
  3. ทำไมต้องใช้ Next.js
  4. ติดตั้ง Next.js
  5. โครงสร้างโปรเจก Next.js
  6. การใช้งาน ต้องรู้อะไรบ้าง Next.js
  7. ข้อดีข้อเสีย Next.js
  8. Next.js การทำงานร่วมกับระบบเฟรมเวิรก์อื่นๆ 
  9. บทสรุป


บทนำ

เราต้องการสร้างเว็บแอปหนึ่งแอป เดาเลยต้องมีระบบอาจต้องประกอบสาระพัดเครื่องมือ รวมเข้าไปใน React Framework เช่น  Express  Webpack SSR SEO ต้องแก้เอง Deploy ต้อง DevOps ดูแลอีกชุด เลยคิดว่า มันน่าจะต้องมีเครื่องมือที่ทำให้ต้องเรียนรู้ ทำงาน น้อยลงซิ จนมีการพัฒนา next.js ลองได้เล่นดูพบว่า Next.js ไม่ได้เป็นแค่ React Framework ธรรมดา แต่มันเป็น Production Platform สำหรับนวัตกรรม (Innovation Production Platform) ที่ทำให้ “ไอเดีย” ของเรา กลายเป็นเป็นเรื่องง่ายๆ สร้าง “โปรดักชันจริง” ได้เร็วขึ้นหลายเท่า เรายังต้องการการ Deploy ที่ง่ายที่สุด เชื่อม github ได้ เราก็ทดสอบตลาดได้เลย


NextJS คืออะไร


Nextjs เป็น Framework ที่พัฒนาต่อยอดจมากจาก React Framework เพื่อสร้างเว็บแอปพลิเคชันที่มีประสิทธิภาพสูง รองรับ SEO ได้ดีเยี่ยม เหมาะสำหรับเว็บไซต์ที่ต้องการความเร็วและการทำ Search Engine Optimization (SEO) เช่น E-commerce หรือบล็อก โดยจุดเด่นหลักคือการทำ SSR และ SSG ซึ่งช่วยให้หน้าเว็บโหลดเร็วขึ้นมาก 
  • รองรับการทำ Server-Side Rendering (SSR) ทำให้ Search Engine เก็บข้อมูลได้ง่ายกว่าทำไมต้องใช้ NextJS เหมาะกับการทำ SEO ดูแล้ว ทำได้ดี 
  • มีระบบ Static Site Generation (SSG) และ Automatic Code Splitting ช่วยให้โหลดหน้าเว็บได้เร็วกว่า React ธรรมดา
  • มีระบบ Routing มาให้ในตัว (File-based Routing) ไม่ต้องตั้งค่า Webpack เอง
  • สามารถเขียน Back-end (API Routes) ได้ภายในโปรเจกต์เดียวกัน
  • ลือกใช้การ Render แบบ SSR, SSG หรือ ISR (Incremental Static Regeneration) ได้ตามความเหมาะสมของหน้าเว็บ
  • ช่วยให้พัฒนาเว็บได้อย่างรวดเร็วและเห็นการเปลี่ยนแปลงทันที 

วิธีการติดตั้ง NextJS

  • ระบบปฏิบัติการรองรับทั้งสาย windows, mac OS, Linux ส่วนตัวใช้งานบน Mac OS เป็นหลัก
  • รองรับ Nodejs ตามปัจจุบัน เดียวก็ออกใหม่ ขยันอัฟเดลหน่อยแล้วกัน 
  • ภาษา TypeScript ts, tsx สำหรับ HTML CSS ต้องผ่านมาบ้างแล้วน่ะ CSS Framework น่าสนใจ Twindcss รองรับ 
  • รองรับ Browser ใหม่ๆ น่ะ Chrome, Edge, Firefox, safari ตามลำดับน่ะ 
  • วิธีการ Install รองรับ pnpm npm yarn burn อนาคตอาจจะมีเพิ่ม ศึกษาจาก web โดยตรง Link: ติดตั้ง Next.js



 






ความคิดเห็น

แสดงความคิดเห็น