Next.js คืออะไรและมีประโยชน์อย่างไร? คำถามที่สองมีความสำคัญมากกว่าในสองข้อ: Next.js มีประโยชน์อย่างไร และหลังจากใช้ในการผลิตเป็นเวลาหนึ่งปี มันเป็นทางเลือกที่เหมาะสมหรือไม่?

โครงการและข้อจำกัด

ประมาณหนึ่งปีที่แล้ว ทีมงานของฉันเริ่มทำงานบนเว็บไซต์กับร้านขายเสื้อผ้ารายใหญ่ บริษัทที่ฉันทำงานให้ทำงานเกี่ยวกับป่าไม้และโครงการอนุรักษ์ความหลากหลายทางชีวภาพ และเราได้รับมอบหมายให้นำเสนอโครงการเหล่านี้บนเว็บไซต์แบบสแตนด์อโลน

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

ทำไมต้อง Next.js?

Next.js ทำการเรนเดอร์ฝั่งเซิร์ฟเวอร์ (SSR) ซึ่งช่วยให้เราสร้างไฟล์สแตติกได้ ช่วยให้เราเพิ่มประสิทธิภาพสำหรับเครื่องมือค้นหา (SEO) และเหนือสิ่งอื่นใด ช่วยให้เราใช้เฟรมเวิ ร์กแบบไร้เซิร์ฟเวอร์ โดยใช้ส่วนประกอบที่กำหนดเอง รายละเอียดทั้งหมดของ Serverless อยู่นอกเหนือขอบเขตของบทความนี้ แต่หลักการพื้นฐานประการหนึ่งคือเพื่อให้สถาปัตยกรรมมีไดนามิกอย่างเต็มที่ เพื่อให้สามารถปรับขนาดได้โดยอัตโนมัติจาก 0 จนถึงสิ่งใดก็ตามที่จำเป็น สิ่งนี้ทำให้เราพร้อมสำหรับปริมาณการรับส่งข้อมูลจำนวนมาก โดยไม่ต้องจ่ายสำหรับความสามารถในการประมวลผลที่ไม่ได้ใช้หากไม่มีผู้ใดปรากฏขึ้น

Next.js ทำทุกอย่างโดยสร้างจากพื้นฐานของ React

เพื่อให้เข้าใจอย่างถ่องแท้ว่ามันคืออะไรและทำไมมันถึงมีประโยชน์ เราต้องเข้าใจก่อนว่า React ทำงานอย่างไร ในแอป React (วานิลลา) เบราว์เซอร์จะได้รับจาวาสคริปต์จำนวนมากจากเซิร์ฟเวอร์ จากนั้นจะตีความ ใช้เพื่อแสดงผลหน้า HTML

ใน Next.js สิ่งต่าง ๆ เกิดขึ้นแตกต่างออกไป เมื่อใช้ Next.js เซิร์ฟเวอร์จะสร้างโค้ด HTML โดยตรงจากโค้ด React ทำไม ด้วยเหตุผลหลายประการ: ประการแรก การแสดงหน้าฝั่งเซิร์ฟเวอร์หมายความว่าบ็อตของ Google (และของเครื่องมือค้นหาอื่นๆ) ดึงโค้ดที่พวกเขาสามารถเข้าใจได้โดยตรง โดยไม่ต้องตีความจาวาสคริปต์ก่อนแล้วจึงดำเนินการ ประการที่สอง นี่ยังหมายความว่าหน้าโหลดเร็วขึ้น และความเร็วของหน้าเป็นองค์ประกอบที่สำคัญทั้งประสบการณ์ผู้ใช้ที่ดีและเพิ่มประสิทธิภาพกลไกค้นหาทางเทคนิค (SEO) และโบนัสที่ดีก็คือ (ในบางกรณี) มันสามารถสร้าง HTML แบบคงที่ ซึ่งทำให้โฮสติ้งราคาถูกและง่าย และเราทุกคนชอบใช้จ่ายน้อยลง

แต่การแสดงผลฝั่งเซิร์ฟเวอร์ไม่ใช่สิ่งที่ PHP ทำในช่วง 30 ปีที่ผ่านมาหรือไม่? อย่างแน่นอน. แต่ถึงแม้ว่า Next.js จะแสดงหน้าแรกของฝั่งเซิร์ฟเวอร์ เช่นเดียวกับที่ PHP ทำ แต่ก็จะดาวน์โหลดและตีความ JavaScript (หรือเรียกอีกอย่างว่าการเติมน้ำให้กับหน้า) แล้วทำงานตามที่ React ทำ

ซึ่งหมายความว่า Next.js มีสิ่งที่ดีที่สุดของทั้งสองโลก มันรวมข้อดีของ PHP และ React ของการเรนเดอร์ฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์

เป็นยังไงบ้าง เรียนอะไรมาบ้าง?

ผลลัพธ์ที่ได้จะลดเวลาในการโหลดและการแสดงผลเริ่มต้นลงอย่างแท้จริง และมอบประสบการณ์ผู้ใช้หน้าเดียวโดยไม่ต้องรีเฟรชทั้งหน้า

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

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

สแต็กปกติของเราเกี่ยวข้องกับ PHP และ TypeScript เป็นหลัก และในทางตรงกันข้าม Next.js ใช้ภาษาเดียวสำหรับการแบ่งไคลเอ็นต์/เซิร์ฟเวอร์ทั้งสองด้าน ทำให้เข้าถึงสถานะโฟลว์ได้ง่ายขึ้น (เนื่องจากมีการขัดจังหวะบริบทน้อยลงเนื่องจากภาษา สวิตช์)

โดยรวมแล้ว เราพบว่า Next.js น่าเชื่อถือ (และสนุก) มาก และกำลังใช้งานเว็บไซต์รองทั้งหมดของเรา และฉันได้เปลี่ยนไปใช้บล็อกนี้สำหรับบล็อกส่วนตัวของฉัน ฉันเป็นแฟนของ React อยู่แล้ว แต่ Next.js ทำให้ดียิ่งขึ้นไปอีก

เนื้อหาเพิ่มเติมที่plainenglish.io