Next.js จะดูแลการเพิ่มประสิทธิภาพหลายอย่างในแอป React คุณจึงไม่ต้องทำเอง
Next.js คือเฟรมเวิร์กรีแอ็กชันตามความคิดเห็น ซึ่งมีการเพิ่มประสิทธิภาพหลายอย่างรวมอยู่ แนวคิดหลักเบื้องหลังเฟรมเวิร์กนี้คือการดูแลให้แอปพลิเคชันเริ่มต้นและคงประสิทธิภาพมากที่สุดเท่าที่จะเป็นไปได้โดยรวมความสามารถเหล่านี้ไว้โดยค่าเริ่มต้น
การแนะนำตัวนี้จะพูดถึงฟีเจอร์ต่างๆ ของเฟรมเวิร์กในระดับสูงโดยสรุป คำแนะนำอื่นๆ ในคอลเล็กชันนี้จะสำรวจ ฟีเจอร์ต่างๆ โดยละเอียด
สิ่งที่คุณจะได้เรียนรู้
แม้ว่า Next.js จะมีการเพิ่มประสิทธิภาพหลายอย่างโดยค่าเริ่มต้น แต่คู่มือเหล่านี้มีไว้เพื่ออธิบายรายละเอียดเพิ่มเติมและแสดงวิธีการใช้งานเพื่อสร้างประสบการณ์ที่รวดเร็วและมีประสิทธิภาพ
โดยทั่วไป คุณสามารถเพิ่มการเพิ่มประสิทธิภาพหลายอย่างลงในเว็บไซต์ React ได้ ซึ่งน่าจะใช้ได้กับแอปพลิเคชันที่สร้างด้วย Next.js เช่นกัน ซึ่งจะไม่ครอบคลุมเครื่องมือเหล่านี้เนื่องจากให้ความสำคัญกับ สิ่งที่ Next.js มีให้โดยเฉพาะ ดูข้อมูลเพิ่มเติมเกี่ยวกับการเพิ่มประสิทธิภาพโดยทั่วไปของ React ได้ที่คอลเล็กชัน React
Next.js แตกต่างจาก React อย่างไร
React เป็นไลบรารีที่ช่วยให้คุณสร้างอินเทอร์เฟซผู้ใช้ได้ง่ายขึ้นโดยใช้แนวทางที่อิงตามคอมโพเนนต์ แม้ว่า React จะมีประสิทธิภาพ แต่ React ก็เป็นไลบรารี UI โดยเฉพาะ นักพัฒนาซอฟต์แวร์จำนวนมากมีเครื่องมือเพิ่มเติม เช่น Module Bundler (เช่น Webpack) และเครื่องมือเปลี่ยนรูปแบบ (เช่น Babel) เพื่อให้มีเครื่องมือบิลด์ที่สมบูรณ์
ในคอลเล็กชัน React เราใช้แนวทางในการใช้ Create React App (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 ให้บริการโดยอัตโนมัติ ส่วนขยายหลายรายการปรับแต่งได้และสามารถแก้ไขตามกรณีการใช้งานได้
ขั้นตอนถัดไปคือ
ตั้งใจยิง 😛
คำแนะนำอื่นๆ ทั้งหมดในคอลเล็กชันนี้จะสำรวจคุณลักษณะ Next.js ที่เฉพาะเจาะจงโดยละเอียด:
- การดึงข้อมูลเส้นทางล่วงหน้าเพื่อให้ไปยังส่วนต่างๆ ของหน้าเว็บได้เร็วขึ้น
- การแสดงหน้าเว็บแบบไฮบริดและหน้า AMP เท่านั้นเพื่อให้โหลดจากเครื่องมือค้นหาได้เร็วขึ้น
- คอมโพเนนต์การแยกโค้ดด้วยการนำเข้าแบบไดนามิก เพื่อลดร่องรอยของ JavaScript