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

Parallel Routes เป็นคุณลักษณะใหม่ของ Next.js ที่ช่วยให้คุณสามารถแสดงหน้าเว็บหลายหน้าพร้อมกันในมุมมองเดียว

สิ่งนี้มีประโยชน์สำหรับแอปพลิเคชันที่มีส่วนประกอบที่หลากหลายที่ทำงานพร้อมกัน เช่น แดชบอร์ดหรือฟีดโซเชียลมีเดีย

Parallel Routes ทำงานโดยสร้างโค้ดแยกต่างหากสำหรับแต่ละหน้าและโหลดโค้ดนั้นพร้อมกัน

สิ่งนี้ช่วยให้หน้าเว็บของคุณโหลดเร็วขึ้นและปรับปรุงประสบการณ์ผู้ใช้

Parallel Routes สามารถใช้กับเส้นทางใดก็ได้ในโปรเจ็กต์ของคุณ ตัวอย่างเช่น ไฟล์ต่อไปนี้จะกำหนดเส้นทางไปยังหน้าแดชบอร์ดแบบขนาน:

// pages/dashboard.js

export default function Dashboard() {
  return (
    <div>
      <h1>This is the dashboard</h1>
      <p>This page is rendered in parallel</p>
    </div>
  );
}

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

Parallel Routes ยังรองรับการแชร์ข้อมูลระหว่างหน้าเว็บ ตัวอย่างเช่น ไฟล์ต่อไปนี้จะกำหนดเส้นทางไปยังหน้าโปรไฟล์แบบขนาน:

// pages/profile.js

export default function Profile() {
  const user = useCurrentUser();

  return (
    <div>
      <h1>This is the profile</h1>
      <p>This page is rendered in parallel</p>
      <p>The user's name is {user.name}</p>
    </div>
  );
}

ไฟล์นี้ใช้ useCurrentUser hook เพื่อรับข้อมูลผู้ใช้ปัจจุบันจากเซิร์ฟเวอร์

ข้อมูลนี้จะถูกแชร์กับหน้าโปรไฟล์แบบขนานเพื่อให้คุณสามารถแสดงชื่อผู้ใช้ปัจจุบันในหน้านั้นได้

Parallel Routes เป็นคุณลักษณะที่มีประโยชน์มากสำหรับการสร้างแอปพลิเคชันที่มีส่วนประกอบที่หลากหลายที่ทำงานพร้อมกัน

มันช่วยให้คุณแสดงหน้าเว็บของคุณได้เร็วขึ้นและปรับปรุงประสบการณ์ผู้ใช้

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ Parallel Routes จากเอกสารประกอบของ Next.js