สารบัญ[ซ่อน][แสดง]
เมื่อเลือกไลบรารีซอฟต์แวร์หรือเฟรมเวิร์ก มักจะคำนึงถึงประสบการณ์ของนักพัฒนาซอฟต์แวร์ด้วย
เมื่อฉันพูดถึง "ประสบการณ์ของนักพัฒนา" ฉันหมายถึงวิธีที่นักพัฒนาทำงานจริง นักพัฒนาเลือกไลบรารีหรือเฟรมเวิร์กที่ใช้งานได้สะดวก
นี่เป็นหนึ่งในสาเหตุหลักที่ทำให้เรามีไลบรารี่และเฟรมเวิร์กที่ได้รับความนิยมมากที่สุด ในฐานะนักพัฒนา เราไม่จำเป็นต้องเริ่มต้นจากศูนย์เมื่อมีเครื่องมือที่มีอยู่ซึ่งสร้างขึ้นเพื่อช่วยเหลือเราในงานของเรา
กรอบงานคือชิ้นส่วนของซอฟต์แวร์ที่นักพัฒนาสร้างและใช้เพื่อสร้างแอปพลิเคชัน และ NextJS ก็เป็นหนึ่งในนั้น
ในโพสต์นี้ เราจะพูดถึง Nextjs ฟีเจอร์หลัก และวิธีที่เราใช้สร้างแอปพลิเคชัน กระโดดเข้าไปเลย
Next.js คืออะไร?
เน็กซ์.เจส เป็นเฟรมเวิร์ก JavaScript สำหรับการสร้างหน้าเว็บแบบสแตติกและแอปพลิเคชันออนไลน์ที่ใช้ React อย่างรวดเร็วและง่ายดาย ช่วยให้คุณสามารถออกแบบเว็บแอปที่ยอดเยี่ยมสำหรับแพลตฟอร์มต่างๆ รวมทั้ง Windows, Linux และ Mac
คุณควรทำความคุ้นเคยกับเฟรมเวิร์ก Next.js หากคุณมีความคุ้นเคยกับการโต้ตอบเพียงเล็กน้อยและต้องการเรียนรู้เพิ่มเติมเกี่ยวกับระบบนิเวศของการตอบสนอง
แม้ว่า Next.js จะมาพร้อมกับทุกสิ่งที่คุณต้องการในการเริ่มต้น คุณสามารถเลือกระหว่าง NPM และ Yarn, JavaScript และ TypeScript, CSS และ SCSS, การส่งออกแบบคงที่ และการปรับใช้แบบไร้เซิร์ฟเวอร์
คุณสมบัติ
- การกำหนดเส้นทางทำได้โดยอัตโนมัติ – คุณไม่จำเป็นต้องกำหนดค่าใดๆ เนื่องจาก URL ใดๆ ถูกแมปกับระบบไฟล์ กับไฟล์ในโฟลเดอร์เพจ (แน่นอนว่าคุณมีตัวเลือกการปรับแต่งเอง)
- ส่วนประกอบของไฟล์เดียว – การเพิ่มสไตล์ที่กำหนดขอบเขตให้กับส่วนประกอบนั้นทำได้ง่ายโดยใช้ styled-jsx ซึ่งได้รับการผสานรวมและผลิตโดยทีมงานเดียวกันโดยสิ้นเชิง
- การโหลด Hot Code – เมื่อ Next.js ตรวจพบการแก้ไขที่บันทึกไว้ในดิสก์ ระบบจะโหลดหน้าซ้ำ
- องค์ประกอบแบบไดนามิก – คุณสามารถโหลดโมดูล JavaScript และส่วนประกอบที่ทำปฏิกิริยาได้แบบไดนามิก
- การส่งออกแบบคงที่ – Next.js ช่วยให้คุณสามารถส่งออกไซต์แบบคงที่ทั้งหมดจากแอปของคุณด้วยคำสั่งส่งออกถัดไป
- ความเข้ากันได้กับสภาพแวดล้อม – Next.js ผสานรวมกับระบบนิเวศ JavaScript, Node และ React ได้อย่างราบรื่น
- แยกรหัสโดยอัตโนมัติ – เฉพาะไลบรารีและ JavaScript ที่จำเป็นเท่านั้นที่ใช้เพื่อแสดงหน้า แทนที่จะสร้างไฟล์ JavaScript ไฟล์เดียวที่มีโค้ดของแอปทั้งหมด Next.js จะแบ่งแอปออกเป็นทรัพยากรต่างๆ อย่างชาญฉลาด
จะสร้างแอปพลิเคชัน next.js ได้อย่างไร
การติดตั้ง
คุณสามารถใช้คำสั่ง node npx เพื่อติดตั้งและสร้างโปรเจ็กต์ Next.js
การดำเนินการนี้จะสร้างโฟลเดอร์และไฟล์ การกำหนดค่า และรายการอื่นๆ ทั้งหมดที่จำเป็นในการเรียกใช้โครงการ Next.js
คุณสามารถเปิดแอปได้เมื่อสร้างขึ้นแล้ว
เพจ & เส้นทาง
ในการจัดการเส้นทางด้วย Next.js เราไม่จำเป็นต้องใช้เฟรมเวิร์กการกำหนดเส้นทาง การกำหนดเส้นทางด้วย Next.js นั้นง่ายต่อการตั้งค่า เมื่อคุณใช้คำสั่ง create-next-app เพื่อสร้างแอป Next.js ใหม่ แอปจะสร้างโฟลเดอร์ชื่อ 'pages' ตามค่าเริ่มต้น
โฟลเดอร์ 'เพจ' นี้เป็นที่ที่คุณดูแลเส้นทางของคุณ ด้วยเหตุนี้ แต่ละไฟล์ส่วนประกอบที่ตอบสนองในไดเร็กทอรีย่อยจะถูกจัดการเป็นเส้นทางที่แยกจากกัน
ตัวอย่างเช่น หากโฟลเดอร์มีไฟล์เหล่านั้น:
- index.js
- เกี่ยวกับ.js
- aricles.js
ไฟล์นี้จะถูกแปลงโดยอัตโนมัติในสามวิธี:
- หน้าดัชนี localhost/index
- หน้าเกี่ยวกับ localhost/about
- หน้าบล็อก localhost/บทความ
ตัวอย่างของหน้า about.js แสดงอยู่ด้านล่าง ไม่มีข้อมูลใดๆ เกี่ยวกับหน้าดังกล่าว อย่างที่คุณเห็น มันเป็นเพียงส่วนประกอบฟังก์ชั่น React มาตรฐาน
เส้นทาง
ในการสร้างเส้นทางที่ซ้อนกัน คุณต้องสร้างโฟลเดอร์ย่อยก่อน ตัวอย่างเช่น: หน้า/บทความ. สร้างองค์ประกอบการโต้ตอบ 'contact.js' ของคุณภายในโฟลเดอร์นั้น และจะสร้างหน้า localhost/articles/contact
หากคุณใส่ไฟล์หนึ่งไฟล์ใน pages/articles.js และอีกไฟล์หนึ่งไว้ใน pages/articles/index.js ทั้งสองสะท้อนถึงเส้นทางเดียวกัน localhost/blog ในสถานการณ์นี้ Next.js จะแสดงไฟล์ article.js เท่านั้น แล้วเส้นทางแบบไดนามิกซึ่งแต่ละโพสต์บล็อกมีเส้นทางของตัวเอง:
- localhost/บล็อก/บทความแรก
- localhost/blog/-วินาที-บทความ
คุณสามารถใช้เครื่องหมายวงเล็บเพื่อกำหนดเส้นทางแบบไดนามิกใน Next.js ตัวอย่างเช่น: pages/article/[slug].js
ลิงค์เส้นทาง
คุณได้เสร็จสิ้นเส้นทางแรกของคุณแล้ว ฉันเดาว่าคุณกำลังถามถึงวิธีเชื่อมต่อเพจกับเส้นทางเหล่านั้น คุณจะต้องมี 'ถัดไป/ลิงก์' เพื่อดำเนินการดังกล่าว
ต่อไปนี้คือตัวอย่างหน้าแรกที่มีลิงก์ไปยังหน้าเกี่ยวกับ:
หากคุณต้องการจัดรูปแบบลิงก์ ให้ใช้ไวยากรณ์ต่อไปนี้:
เส้นทางเปลี่ยนเส้นทาง
จะทำอย่างไรถ้าคุณต้องการบังคับให้เปลี่ยนเส้นทางไปยังหน้าใดหน้าหนึ่ง เช่น เมื่อกดปุ่ม? คุณสามารถทำได้โดยใช้ 'router.push':
SEO
หน้าในเว็บแอปพลิเคชันต้องการองค์ประกอบเมตา (ส่วนหัว) นอกเหนือจากข้อมูลภายในเนื้อหา HTML ซึ่งจะทำให้จำเป็นต้องติดตั้งข้อกำหนดเพิ่มเติมที่ชื่อว่า React Helmet ในแอปพลิเคชัน React
เราสามารถใช้องค์ประกอบ Head จาก next/head ใน Next เพื่อเพิ่มข้อมูลเมตาไปยังหน้าเว็บของเราที่จะแสดงในผลการค้นหาและการฝังได้อย่างง่ายดาย:
ส่วนประกอบ
คุณมักจะต้องพัฒนาส่วนประกอบหรือไฟล์เค้าโครง ตัวอย่างเช่น องค์ประกอบที่แสดงแถบนำทาง เราเพิ่งใช้โฟลเดอร์เพจจนถึงตอนนี้ จะเกิดอะไรขึ้นหากองค์ประกอบของคุณไม่ได้ถูกกำหนดให้เป็นหน้าเส้นทาง
คุณไม่ต้องการให้ผู้ใช้นำทางไปยังหน้าเช่น localhost/navbar หากคุณวางองค์ประกอบ Navbar.js ไว้ในโฟลเดอร์เพจ นั่นคือสิ่งที่จะเกิดขึ้น คุณควรทำอย่างไรในสถานการณ์?
เพียงเก็บส่วนประกอบ 'ไม่ใช่หน้า' ทั้งหมดของคุณไว้ในโฟลเดอร์แยกต่างหาก โปรเจ็กต์ Next.js ส่วนใหญ่ใช้ชื่อเล่นว่า 'ส่วนประกอบ' และโฟลเดอร์นี้ถูกสร้างขึ้นในโฟลเดอร์รูทของโปรเจ็กต์ของคุณ
หัวหน้าส่วนประกอบ
การโหลดหน้าแรกแสดงผลโดย Next.js ทางฝั่งเซิร์ฟเวอร์ ทำได้โดยการปรับเปลี่ยน HTML ของหน้าเว็บของคุณ ส่วนหัวรวมอยู่ด้วย
คอมโพเนนต์ Next.js Head ใช้เพื่อระบุแท็กส่วนหัว เช่น ชื่อและเมตา ส่วนประกอบ Head ถูกใช้ในตัวอย่างนี้ของส่วนประกอบ Layout
ไม่พบหน้าสร้าง 404
เป็นไปได้ที่จะสร้างหน้าข้อผิดพลาด 404 ของคุณเอง คุณอาจต้องการปรับแต่งข้อความหรือเพิ่มการออกแบบหน้าของคุณเอง ในโฟลเดอร์เพจ ให้สร้างไฟล์ 404.js
เมื่อเกิดข้อผิดพลาด 404 Next.js จะเปลี่ยนเส้นทางไปยังหน้านี้โดยอัตโนมัติ นี่คือตัวอย่างหน้า 404 ส่วนบุคคล:
การดึงข้อมูลจากฝั่งเซิร์ฟเวอร์
แทนที่จะดาวน์โหลดข้อมูลบนฝั่งไคลเอ็นต์ Next.js อนุญาตให้คุณดำเนินการเติมข้อมูลเริ่มต้น ซึ่งหมายถึงการส่งหน้าเว็บที่มีข้อมูลที่เติมจากเซิร์ฟเวอร์แล้ว
คุณมีสองทางเลือกในการนำข้อมูลฝั่งเซิร์ฟเวอร์ไปใช้:
- ควรดึงข้อมูลในแต่ละคำขอ
- รับข้อมูลเพียงครั้งเดียวตลอดกระบวนการก่อสร้าง (ไซต์คงที่)
ดึงข้อมูลในแต่ละคำขอ
เมธอด getServerSideProps ใช้เพื่อแสดงคำขอแต่ละรายการในฝั่งเซิร์ฟเวอร์ ฟังก์ชันนี้สามารถรวมไว้ที่ส่วนท้ายของไฟล์คอมโพเนนต์ของคุณ Next.js จะเติมข้อมูลพร็อพส่วนประกอบของคุณโดยอัตโนมัติด้วยอ็อบเจ็กต์ getServerSideProps หากฟังก์ชันนั้นมีอยู่ในไฟล์คอมโพเนนต์ของคุณ
ดึงข้อมูล ณ เวลาสร้าง
เมธอด getStaticProps ใช้เพื่อแสดงผลฝั่งเซิร์ฟเวอร์ ณ เวลาบิลด์ ฟังก์ชันนี้สามารถรวมไว้ที่ส่วนท้ายของไฟล์คอมโพเนนต์ของคุณ เมธอดนี้รันโค้ดเซิร์ฟเวอร์และส่งคำขอ GET ไปยังเซิร์ฟเวอร์ แต่เพียงครั้งเดียวเมื่อโปรเจ็กต์ของเราเสร็จสิ้น
ทำไมคุณควรเรียนรู้ Next.js
สาเหตุหนึ่งเป็นเพราะ Next.js สร้างขึ้นจาก React ซึ่งเป็นชุดเครื่องมือพัฒนา front-end สำหรับ การสร้างอินเทอร์เฟซผู้ใช้ นั่นเป็นตัวเลือกที่ฉันชอบที่สุดสำหรับการออกแบบเว็บแอป
แต่จะไม่เพียงพอหาก Next.js ไม่เก่งในสิ่งที่ทำ… ใช่ไหม
แล้วมันทำอะไรกันแน่?
ขั้นแรกเราต้องกำหนดแนวคิดสองสามข้อเพื่อที่จะเข้าใจ Next.js ได้รับความนิยมเนื่องจากสามารถแก้ไขปัญหาที่นักพัฒนาเว็บจำนวนมากมีกับเว็บแอปฝั่งไคลเอ็นต์ (ในเบราว์เซอร์) แอปพลิเคชันหน้าเดียว (SPA) เหล่านี้มีประสบการณ์ที่ดีขึ้นเนื่องจากไม่ต้องการให้ผู้ใช้โหลดหน้าซ้ำและอนุญาตให้มีการโต้ตอบมากขึ้น
อย่างไรก็ตาม เนื่องจากเนื้อหาจำนวนมากในแอปเช่นนี้จะมองเห็นได้ก็ต่อเมื่อดำเนินการในเบราว์เซอร์ โปรแกรมรวบรวมข้อมูลเว็บจึงเข้าใจเนื้อหาข้อความของแอปดังกล่าวได้ยาก
ผลก็คือ แม้จะได้รับความนิยม แต่ SPA จำนวนมากยังคงไม่เปิดเผยตัวต่อเสิร์ชเอ็นจิ้นรายใหญ่เช่น Google Next.js ได้รวมกลไกในตัวที่แข็งแกร่งขึ้นสำหรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ (SSR) ของส่วนประกอบ React
Next.js ช่วยให้นักพัฒนาสามารถสร้างโค้ด JavaScript บนเซิร์ฟเวอร์ระหว่างกระบวนการสร้างและจัดเตรียม HTML พื้นฐานที่จัดทำดัชนีได้ให้กับผู้ใช้
ข้อดี
- เหมาะสำหรับประสบการณ์ผู้ใช้
- เหมาะสำหรับ SEO
- สร้างเว็บไซต์แบบคงที่ที่รวดเร็วเป็นพิเศษซึ่งมีลักษณะเหมือนไดนามิก
- ความยืดหยุ่นในการสร้าง UI & UX
- ข้อดีของการพัฒนามากมาย
- การสนับสนุนจากชุมชนที่ยอดเยี่ยม
จุดด้อย
- เว็บไซต์หรือแอปพลิเคชันมีเวลาพอสมควรในการสร้างหรือพัฒนา
- สำหรับงานบางอย่าง Next.js ไม่เพียงพอ นักพัฒนาควรสร้างเส้นทางแบบไดนามิกโดยใช้เครื่องมือ Node.js
สรุป
อย่างที่คุณเห็น Next.js ช่วยลดความซับซ้อนในการพัฒนาแอป React และช่วยให้คุณมุ่งเน้นไปที่สิ่งที่สำคัญที่สุด – ตรรกะของแอปและ UI ประกอบด้วยทุกสิ่งที่จำเป็นในการสร้างแอปร่วมสมัยที่เน้นส่วนหน้าและขับเคลื่อนด้วย API
นอกจากนี้ยังเหมาะสำหรับโครงการเฉพาะเนื้อหา เช่น บล็อกและเว็บไซต์ธุรกิจ เนื่องจากความสามารถในการสร้างหน้า HTML แบบคงที่
ด้วยรุ่นปัจจุบัน Next.js ไม่เพียงแต่รักษาประสบการณ์ของนักพัฒนาในระดับสูงเท่านั้น แต่ยังมอบเครื่องมือสำหรับการเพิ่มประสิทธิภาพด้านภาพและประสบการณ์ของผู้ใช้อีกด้วย ทำให้มั่นใจได้ถึงอนาคตที่สดใสสำหรับเฟรมเวิร์กนี้
เขียนความเห็น