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

Next.js จะดูแลการเพิ่มประสิทธิภาพหลายอย่างในแอป React เพื่อให้คุณไม่ต้องทำเอง

Houssein Djirdeh

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

ข้อมูลเบื้องต้นนี้จะครอบคลุมฟีเจอร์มากมายที่เฟรมเวิร์กมีให้โดยสังเขปในระดับสูง คู่มืออื่นๆ ในคอลเล็กชันนี้จะอธิบายฟีเจอร์ต่างๆ โดยละเอียด

สิ่งที่คุณจะได้เรียนรู้

แม้ว่า Next.js จะมีการเพิ่มประสิทธิภาพหลายอย่างโดยค่าเริ่มต้น แต่คู่มือเหล่านี้มีจุดประสงค์เพื่ออธิบายรายละเอียดเพิ่มเติมและแสดงวิธีใช้เพื่อสร้างประสบการณ์การใช้งานที่รวดเร็วและมีประสิทธิภาพ

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

Next.js แตกต่างจาก React อย่างไร

React เป็นไลบรารีที่ช่วยให้สร้างอินเทอร์เฟซผู้ใช้ได้ง่ายขึ้นโดยใช้วิธีการที่อิงตามคอมโพเนนต์ แม้ว่า React จะมีประสิทธิภาพ แต่ก็เป็นไลบรารี UI โดยเฉพาะ นักพัฒนาแอปหลายรายรวมเครื่องมือเพิ่มเติม เช่น ตัวรวมโมดูล (เช่น webpack) และ Transpiler (เช่น Babel) เพื่อให้มี Toolchain สำหรับบิลด์ที่สมบูรณ์

ในคอลเล็กชัน React เราใช้แนวทางในการใช้ Create React App (CRA) เพื่อสร้างแอป React อย่างรวดเร็ว CRA ช่วยลดความยุ่งยากในการตั้งค่าแอปพลิเคชัน React โดยการจัดเตรียม Toolchain สำหรับการสร้างที่สมบูรณ์ด้วยคำสั่งเดียว

แม้ว่า 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 แสดงผล HTML ที่สมบูรณ์เมื่อมีการขอหน้าเว็บ
แท็บแสดงตัวอย่างของแผงเครือข่ายแสดงให้เห็นว่า Next.js แสดงผล HTML ที่สมบูรณ์เมื่อมีการขอหน้าเว็บ

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

ต้องทำอะไรต่อ

ไม่ได้ตั้งใจเล่นมุกนะ 😛

คู่มืออื่นๆ ทั้งหมดในคอลเล็กชันนี้จะเจาะลึกรายละเอียดเกี่ยวกับฟีเจอร์ Next.js ที่เฉพาะเจาะจง ดังนี้