Next.js จะดูแลการเพิ่มประสิทธิภาพหลายๆ อย่างในแอป React คุณจึงไม่ต้องทำเอง
Next.js เป็นเฟรมเวิร์ก React ตามความคิดเห็นที่มีการใส่การเพิ่มประสิทธิภาพด้านประสิทธิภาพหลายรายการไว้ แนวคิดหลักที่อยู่เบื้องหลังเฟรมเวิร์กคือดูแลให้แอปพลิเคชันเริ่มต้นและมีประสิทธิภาพสูงสุดอยู่เสมอ โดยรวมความสามารถเหล่านี้ไว้โดยค่าเริ่มต้น
บทแนะนำนี้จะครอบคลุมฟีเจอร์มากมายจากเฟรมเวิร์กในระดับสูง คำแนะนำอื่นๆ ในคอลเล็กชันนี้จะสำรวจฟีเจอร์ต่างๆ อย่างละเอียด
สิ่งที่คุณจะได้เรียนรู้
แม้ว่า Next.js จะให้การเพิ่มประสิทธิภาพหลายด้านโดยค่าเริ่มต้น แต่คู่มือเหล่านี้จะอธิบายรายละเอียดเพิ่มเติมและแสดงวิธีการใช้งานเพื่อสร้างประสบการณ์ที่รวดเร็วและมีประสิทธิภาพ
โดยทั่วไปแล้วการเพิ่มประสิทธิภาพหลายอย่างที่เพิ่มลงในเว็บไซต์ React ได้นั้นใช้ได้กับแอปพลิเคชันที่สร้างด้วย Next.js ด้วยเช่นกัน เราจะไม่กล่าวถึงเรื่องนี้เนื่องจากนี่เป็น สิ่งที่ Next.js มีให้โดยเฉพาะ ดูข้อมูลเพิ่มเติมเกี่ยวกับการเพิ่มประสิทธิภาพทั่วไปของรีแอ็กชันได้ที่การรวบรวมรีแอ็กชัน
Next.js แตกต่างจาก React อย่างไร
React เป็นไลบรารีที่ช่วยให้สร้างอินเทอร์เฟซผู้ใช้ได้ง่ายขึ้นด้วยวิธีการที่อิงตามคอมโพเนนต์ แม้จะมีประสิทธิภาพ แต่ React ก็มีลักษณะเป็นไลบรารี UI โดยเฉพาะ นักพัฒนาซอฟต์แวร์จำนวนมากมีเครื่องมือเพิ่มเติม เช่น โมดูล Bundler (เช่น Webpack) และ Transpiler (เช่น Babel) เพื่อให้มีห่วงโซ่เครื่องมือการสร้างที่สมบูรณ์
ในคอลเล็กชัน React เราใช้วิธีใช้สร้างแอป React (CRA) เพื่อสร้างแอป React ขึ้นมาอย่างรวดเร็ว CRA ขจัดความยุ่งยากในการตั้งค่าแอปพลิเคชัน React ด้วยการมอบชุดเครื่องมือการสร้างที่สมบูรณ์ด้วยคำสั่งเดียว
แม้จะมีการเพิ่มประสิทธิภาพเริ่มต้น 2-3 อย่างใน CRA แต่เครื่องมือมีเป้าหมายเพื่อให้การตั้งค่าที่เรียบง่ายและไม่ซับซ้อน นักพัฒนาซอฟต์แวร์สามารถตัดสินใจว่าจะนำออกและแก้ไขการกำหนดค่าด้วยตนเองหรือไม่
Next.js ซึ่งสามารถใช้สร้างแอปพลิเคชัน React ใหม่ได้นั้นใช้วิธีการที่แตกต่างออกไป เครื่องมือนี้จะแสดงการเพิ่มประสิทธิภาพทั่วไปจำนวนหนึ่งที่นักพัฒนาซอฟต์แวร์จำนวนมากอยากมีแต่ตั้งค่ายาก เช่น
- การแสดงผลฝั่งเซิร์ฟเวอร์
- การแยกโค้ดอัตโนมัติ
- การดึงข้อมูลเส้นทางล่วงหน้า
- การกำหนดเส้นทางระบบไฟล์
- การจัดรูปแบบ CSS-in-JS (
styled-jsx
)
กำลังตั้งค่า
หากต้องการสร้างแอปพลิเคชัน Next.js ใหม่ ให้เรียกใช้คำสั่งต่อไปนี้
npx create-next-app new-app
จากนั้นไปที่ไดเรกทอรีและเริ่มต้นเซิร์ฟเวอร์การพัฒนาด้วยคำสั่งต่อไปนี้
cd new-app
npm run dev
การฝังต่อไปนี้แสดงโครงสร้างไดเรกทอรีของแอป Next.js ใหม่
- คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
โปรดทราบว่าระบบจะสร้างไดเรกทอรี pages/
ด้วยไฟล์เดียว: index.jsx
Next.js ใช้วิธีการกำหนดเส้นทางระบบไฟล์ ซึ่งทุกหน้าในไดเรกทอรีนี้จะทำหน้าที่เป็นเส้นทางแยกต่างหาก การสร้างไฟล์ใหม่ในไดเรกทอรีนี้ เช่น about.js
จะสร้างเส้นทางใหม่ (/about
) โดยอัตโนมัติ
นอกจากนี้ยังสามารถสร้างและใช้คอมโพเนนต์เช่นเดียวกับแอปพลิเคชันอื่นๆ ของ React อื่นๆ ได้ด้วย มีการสร้างไดเรกทอรี components/
ที่มีคอมโพเนนต์เดียวชื่อ nav.js
ซึ่งนําเข้ามาใน index.js
แล้ว โดยค่าเริ่มต้น ระบบจะดึงข้อมูลการนำเข้าทั้งหมดที่ใช้ใน Next.js เมื่อมีการโหลดหน้าเว็บเท่านั้น ซึ่งใช้ประโยชน์จากการแยกโค้ดอัตโนมัติได้
นอกจากนี้ การโหลดหน้าเว็บเริ่มต้นทั้งหมดใน Next.js ยังแสดงผลฝั่งเซิร์ฟเวอร์ด้วย หากเปิดแผงเครือข่ายในเครื่องมือสำหรับนักพัฒนาเว็บ คุณจะเห็นว่าคำขอเริ่มต้นของเอกสารแสดงหน้าที่แสดงผลโดยเซิร์ฟเวอร์อย่างสมบูรณ์
ฟีเจอร์เหล่านี้เป็นเพียงตัวอย่างบางส่วนจากฟีเจอร์จำนวนมากที่ Next.js มีให้โดยอัตโนมัติ เครื่องมือหลายรายการสามารถปรับแต่งได้และปรับให้เข้ากับ Use Case ต่างๆ ได้
ขั้นตอนถัดไปคือ
ตั้งใจพันท์ 😛
คำแนะนำอื่นๆ ในคอลเล็กชันนี้จะสำรวจฟีเจอร์ Next.js ที่เฉพาะเจาะจงอย่างละเอียด
- กำหนดเส้นทางการดึงข้อมูลล่วงหน้าเพื่อให้การนำทางหน้าเว็บเร็วขึ้น
- การแสดงหน้าเว็บแบบผสมและหน้า AMP เท่านั้นเพื่อให้เครื่องมือค้นหาโหลดได้เร็วขึ้น
- คอมโพเนนต์การแยกโค้ดด้วยการนำเข้าแบบไดนามิก เพื่อลดการใช้ JavaScript