tiktok นับยอดวิวยังไง

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

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

คุณสามารถกำหนดเส้นทางได้โดยใช้ไฟล์ pages/index.js หรือไฟล์ pages/[id].js

ไฟล์ pages/index.js แสดงหน้าแรกของโปรเจ็กต์ของคุณ คุณสามารถกำหนดเส้นทางอื่น ๆ ได้โดยสร้างไฟล์ pages/[id].js โดยที่ [id] เป็นเส้นทางที่คุณต้องการกำหนด

ตัวอย่างเช่น ไฟล์ต่อไปนี้จะกำหนดเส้นทางไปยังหน้าชื่อ about

// pages/about.js

export default function About() {
  return (
    <div>
      This is the about page.
    </div>
  );
}

เมื่อผู้ใช้เยี่ยมชม URL /about Next.js จะโหลดไฟล์ pages/about.js และแสดงหน้าเกี่ยวกับ

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

// pages/posts/[id].js

export default function Posts() {
  // Get the post from the database
  const post = await getPostById(req.params.id);

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

เมื่อผู้ใช้เยี่ยมชม URL /posts/1 Next.js จะโหลดไฟล์ pages/posts/1.js และแสดงโพสต์ที่มี ID 1

คุณสามารถใช้เส้นทางแบบไดนามิกเพื่อแสดงเนื้อหาที่แตกต่างกันขึ้นอยู่กับพารามิเตอร์ของ URL ของคุณ

คุณยังสามารถใช้เส้นทางเพื่อควบคุมการนำทางในโปรเจ็กต์ของคุณ ตัวอย่างเช่น คุณสามารถใช้เส้นทางเพื่อสร้างเมนูนำทางหรือเพื่อเปลี่ยนหน้าปัจจุบันเมื่อผู้ใช้คลิกลิงก์

Next.js มาพร้อมกับคุณสมบัติการกำหนดเส้นทางที่หลากหลายที่ช่วยให้คุณสร้างแอปพลิเคชันที่มีเส้นทางที่ซับซ้อน