Next.js กับ React? เป็นความร่วมมือ ไม่ใช่การแข่งขัน

ไม่มีปัญหาการขาดแคลนไลบรารีและเฟรมเวิร์ก JavaScript สำหรับนักพัฒนาเว็บสมัยใหม่ หนึ่งในไลบรารีที่แพร่หลายมากที่สุดคือ React ซึ่ง Facebook (ปัจจุบันคือ Meta) สร้างขึ้นเพื่อช่วยสร้างแอปพลิเคชันที่มีคุณสมบัติหลากหลาย แอปพลิเคชัน React ปกติทำงานในเว็บเบราว์เซอร์ แต่เฟรมเวิร์ก Next.js ขยายฟังก์ชันการทำงานของ React ไปยังฝั่งเซิร์ฟเวอร์ผ่านสภาพแวดล้อมรันไทม์ JavaScript Node.js

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

Next.js และ React: JavaScript ในระดับถัดไป

การสำรวจ SlashData ในปี 2022 พบว่ามีโปรแกรมเมอร์ JavaScript มากกว่า 17 ล้านคนทั่วโลก ซึ่งเป็นผู้นำกลุ่มที่มีภาษายอดนิยมอย่าง Python และ Java JavaScript สามารถใช้ได้ทั้งในฝั่งไคลเอ็นต์และเซิร์ฟเวอร์ และความอเนกประสงค์นี้หมายความว่านักพัฒนาสามารถสร้างแอปพลิเคชันเต็มรูปแบบโดยใช้ภาษาการเขียนโปรแกรมเดียว

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

ความสามารถในการขยายของ JavaScript หมายความว่าความรู้ที่ครอบคลุมเกี่ยวกับเครื่องมือที่ใช้บ่อยที่สุดคือกุญแจสู่ความสำเร็จของคุณในฐานะนักพัฒนาเว็บ

Next.js คืออะไร

เปิดตัวครั้งแรกในปี 2559 โดย Vercel Next.js เป็นเฟรมเวิร์ก React แบบโอเพ่นซอร์สที่ให้หน่วยการสร้างเพื่อสร้างเว็บแอปพลิเคชันที่มีประสิทธิภาพสูง ตั้งแต่นั้นเป็นต้นมา บริษัท ใหญ่ ๆ ได้นำมันมาใช้รวมถึง Twitch, TikTok และ Uber เป็นต้น

Next.js นำเสนอหนึ่งในประสบการณ์นักพัฒนาที่ดีที่สุดสำหรับการสร้างแอปพลิเคชันที่รวดเร็วและเป็นมิตรกับ SEO ด้านล่างนี้เป็นคุณลักษณะบางอย่างของ Next.js ที่ทำให้เป็นเฟรมเวิร์กการผลิตที่ยอดเยี่ยม:

• ความสามารถในการแสดงผลแบบไฮบริด
• แยกรหัสอัตโนมัติ
• การเพิ่มประสิทธิภาพภาพ
• รองรับตัวประมวลผลล่วงหน้า CSS และไลบรารี CSS-in-JS ในตัว
• การกำหนดเส้นทางในตัว

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

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

ปฏิกิริยาคืออะไร?

React เป็นไลบรารี JavaScript ที่ใช้สร้างส่วนต่อประสานผู้ใช้แบบไดนามิก นอกจากการสร้างเว็บอินเตอร์เฟสแล้ว คุณยังสามารถสร้างแอปพลิเคชันบนมือถือโดยใช้ React Native

ประโยชน์บางประการของการใช้ React ได้แก่:

• ปรับปรุงประสิทธิภาพ: แทนที่จะอัปเดตแต่ละคอมโพเนนต์ใน DOM React ใช้ DOM เสมือนเพื่ออัปเดตเฉพาะคอมโพเนนต์ที่เปลี่ยนแปลง
• อิงตามส่วนประกอบจำนวนมาก: เมื่อคุณสร้างส่วนประกอบแล้ว คุณสามารถใช้ซ้ำได้หลายครั้ง
• แก้ไขจุดบกพร่องได้ง่าย: แอปพลิเคชัน React ใช้การไหลของข้อมูลทิศทางเดียว – จากส่วนประกอบหลักไปยังส่วนประกอบย่อยเท่านั้น

Next.js กับ React

แม้ว่านักพัฒนามักจะใช้ Next.js และ React เพื่อจุดประสงค์เดียวกัน แต่ก็มีข้อแตกต่างพื้นฐานบางประการระหว่างสองสิ่งนี้

สะดวกในการใช้

เริ่มต้นง่ายๆ ด้วย Next.js และ React แต่ละคำสั่งต้องใช้คำสั่งเดียวในเทอร์มินัลของคุณโดยใช้ npx ซึ่งเป็นส่วนหนึ่งของ npm สำหรับ Node.js

สำหรับ Next.js คำสั่งที่ง่ายที่สุดคือ:

 npx create-next-app

หากไม่มีอาร์กิวเมนต์เพิ่มเติมสำหรับ create-next-app การติดตั้งจะดำเนินการต่อในโหมดโต้ตอบ คุณจะถูกถามถึงชื่อโปรเจ็กต์ (ซึ่งจะใช้สำหรับไดเร็กทอรีโปรเจ็กต์) และคุณต้องการรวมการรองรับ TypeScript และ Code linter ESLint หรือไม่

มันจะมีลักษณะดังนี้:

เมื่อเริ่มต้นอินสแตนซ์ React คำสั่งที่ง่ายที่สุดจะรวมชื่อสำหรับไดเร็กทอรีของโปรเจ็กต์:

 npx create-react-app new-app

สิ่งนี้สร้างโฟลเดอร์ที่มีการกำหนดค่าเริ่มต้นและการขึ้นต่อกันที่จำเป็นทั้งหมด:

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

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

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

คุณสมบัติ Next.js และ React

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

การดึงข้อมูล

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

ด้วยการแสดงผลล่วงหน้า เซิร์ฟเวอร์จะทำการเรียก API ที่จำเป็นและดึงข้อมูลก่อนที่จะส่งแอปพลิเคชันไปยังเบราว์เซอร์ ด้วยเหตุนี้ เบราว์เซอร์จึงได้รับหน้าเว็บที่พร้อมแสดงผล

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

ด้านล่างนี้คือตัวอย่างวิธีที่ Next.js สร้างหน้าโดยไม่มีข้อมูล:

 function App() { return <div>Welcome</div> } export default App

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

 const Posts= ({ posts }) => { return ( <div className={styles.container}> {posts.map((post, index) => ( // render each post ))} </div> ); }; export const getStaticProps = async () => { const posts = getAllPosts(); return { props: { posts }, }; };

ในสถานการณ์ที่เส้นทางของหน้าขึ้นอยู่กับข้อมูลภายนอก ให้ใช้ getStaticPaths() ดังนั้น หากต้องการสร้างเส้นทางตามรหัสโพสต์ ให้ส่งออก getStaticPaths() จากเพจ

ตัวอย่างเช่น คุณอาจส่งออก getStaticPaths() จาก หน้า/โพสต์ /[id].js ดังที่แสดงด้านล่าง

 export getStaticPaths = async() => { // Get all the posts const posts = await getAllPosts() // Get the paths you want to pre-render based on posts const paths = posts.map((post) => ({ params: { id: post.id }, })) return { paths, fallback: false } }

getStaticPaths() มักจะจับคู่กับ getStaticProps() ในตัวอย่างนี้ คุณจะใช้ getStaticProps() เพื่อดึงรายละเอียดของ ID ในเส้นทาง

 export const getStaticProps = async ({ params }) => { const post = await getSinglePost(params.id); return { props: { post } }; };

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

ตัวอย่างเช่น คุณสามารถใช้เพื่อดึงข้อมูลจาก API ข่าวสาร

 const News = ({ data }) => { return ( // render data ); }; export async function getServerSideProps() { const res = await fetch(`https://app-url/data`) const data = await res.json() return { props: { data } } }

ข้อมูลจะถูกเรียกในทุกคำขอและส่งต่อไปยังองค์ประกอบข่าวผ่านอุปกรณ์ประกอบฉาก

การแยกรหัส

การแยกโค้ดคือการแบ่งโค้ดออกเป็นส่วนๆ ที่เบราว์เซอร์สามารถโหลดได้ตามต้องการ มันลดปริมาณโค้ดที่ส่งไปยังเบราว์เซอร์ระหว่างการโหลดครั้งแรก เนื่องจากเซิร์ฟเวอร์จะส่งเฉพาะสิ่งที่ผู้ใช้ต้องการเท่านั้น Bundlers เช่น Webpack, Rollup และ Browserify รองรับการแยกโค้ดใน React

Next.js รองรับการแยกโค้ดออกจากกล่อง

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

ตัวอย่างเช่น ในคอมโพเนนต์ หน้าแรก ด้านล่าง เซิร์ฟเวอร์จะไม่รวมคอมโพเนนต์ฮีโร่ในชุดเริ่มต้น

 const DynamicHero = dynamic(() => import('../components/Hero'), { suspense: true, }) export default function Home() { return ( <Suspense fallback={`Loading...`}> <DynamicHero /> </Suspense> ) }

แต่จะแสดงผลองค์ประกอบสำรองของใจจดใจจ่อก่อนที่จะโหลดองค์ประกอบฮีโร่

รองรับ API ใน Next.js กับ React

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

ตัวอย่างเช่น คุณสามารถสร้างเส้นทาง API ของ page/api/user.js ที่ส่งคืนชื่อผู้ใช้ปัจจุบันดังนี้:

 export default function user(req, res) { res.status(200).json({ username: 'Jane' }); }

หากคุณไปที่ https://app-url/api/user URL คุณจะเห็นวัตถุชื่อผู้ใช้

 { username: 'Jane' }

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

ผลงาน

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

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

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

สนับสนุน

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

นอกจากนี้ Next.js ยังมีเอกสารที่ยอดเยี่ยมพร้อมตัวอย่างที่ครอบคลุมซึ่งเข้าใจง่าย แม้จะได้รับความนิยม แต่เอกสาร React ก็ไม่สามารถนำทางได้

สรุป

การเลือก Next.js หรือ React เป็นไปตามข้อกำหนดของแอปพลิเคชัน

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

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

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

วางแผนแอปพลิเคชันที่ครองโลกของคุณเองหรือไม่? เจาะลึกแนวทางของ Kinsta ในการโฮสต์แอปพลิเคชัน Node.js สำหรับบริการที่รองรับ React และ Next.js