ประสิทธิภาพโดยค่าเริ่มต้นเมื่อใช้ Next.js

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