Next.js พื้นฐาน: การสร้างเพจและ Routing การอธิบาย ขั้นพื้นฐาน

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

การสร้างและการแสดงหน้าแรก

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

// pages/welcome.js  
function WelcomePage() {  
  return <h1>Welcome to Next.js!</h1>;  
}  
  
export default WelcomePage;  

ในตัวอย่างโค้ดข้างต้น เราได้สร้างหน้าต้อนรับแบบง่ายๆ เมื่อคุณเข้าถึง /welcome เส้นทางในเว็บเบราว์เซอร์ คุณจะเห็นข้อความ "ยินดีต้อนรับสู่ Next.js !" แสดง

ขั้นพื้นฐาน Routing

Next.js นำเสนอระบบที่แข็งแกร่งและใช้งานง่าย routing ซึ่งทำให้การนำทางระหว่างหน้าต่างๆ เป็นเรื่องง่าย Routing in Next.js ขึ้นอยู่กับ pages ไดเร็กทอรี โดยแต่ละไฟล์ในไดเร็กทอรีนี้สอดคล้องกับเส้นทางเฉพาะ ตัวอย่างเช่น ไฟล์ที่มีชื่อ about.js ภายใน pages ไดเร็กทอรีจะสร้างเพจที่เข้าถึงได้จาก /about พาธ

การสร้างลิงค์และการนำทาง

ในการสร้างลิงก์ระหว่างหน้าและนำทางระหว่างหน้าต่างๆ เราสามารถใช้ <Link> ส่วนประกอบจาก next/link ไลบรารีได้ ด้านล่างนี้เป็นตัวอย่างการสร้างลิงค์จากหน้ายินดีต้อนรับไปยังหน้าเกี่ยวกับเรา

// pages/welcome.js  
import Link from 'next/link';  
  
function WelcomePage() {  
  return( 
    <div>  
      <h1>Welcome to Next.js!</h1>  
      <Link href="/about">Learn more about us</Link>  
    </div>  
 );  
}  
  
export default WelcomePage;  

ในตัวอย่างข้างต้น เมื่อคุณคลิกลิงก์ "เรียนรู้เพิ่มเติมเกี่ยวกับเรา" คุณจะถูกนำไปยังหน้า /about เว็บดัง กล่าว

บทสรุป

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