Next.js App Directory: การปฏิวัติการกำหนดเส้นทางตามไฟล์

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

ทำความเข้าใจวิวัฒนาการของการกำหนดเส้นทางใน Next.js

ก่อนที่จะมี App Directory นั้น Next.js ใช้ Pages Directory สำหรับการกำหนดเส้นทาง แม้ว่าจะมีประสิทธิภาพ แต่วิธีการนี้ก็มีข้อจำกัดบางประการ Pages Directory ใช้ระบบการกำหนดเส้นทางตามไฟล์อย่างง่าย โดยแต่ละไฟล์ในไดเรกทอรี `pages` จะสอดคล้องกับเส้นทาง (route) ตัวอย่างเช่น `pages/about.js` จะถูกจับคู่ไปยังเส้นทาง `/about`

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

App Directory เข้ามาแก้ไขข้อจำกัดเหล่านี้โดยแนะนำระบบการกำหนดเส้นทางที่ยืดหยุ่นและทรงพลังยิ่งขึ้น ซึ่งสร้างขึ้นบน React Server Components, Layouts และฟีเจอร์ขั้นสูงอื่นๆ มันก้าวข้ามการจับคู่แบบไฟล์ต่อเส้นทางที่เรียบง่าย และนำเสนอแนวทางที่เป็นแบบประกาศ (declarative) และประกอบได้ (composable) มากขึ้นสำหรับการกำหนดเส้นทางและเลย์เอาต์ของแอปพลิเคชัน

ขอแนะนำ App Directory: กระบวนทัศน์ใหม่สำหรับการกำหนดเส้นทาง

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

แนวทางนี้มีข้อดีที่สำคัญหลายประการ:

การจัดระเบียบที่ดีขึ้น: โครงสร้างแบบลำดับชั้นของ App Directory ส่งเสริมการจัดระเบียบและการบำรุงรักษาโค้ดที่ดีขึ้น คุณสามารถจัดกลุ่มคอมโพเนนต์และเส้นทางที่เกี่ยวข้องอย่างมีเหตุผลภายในไดเรกทอรีย่อยได้
ประสิทธิภาพที่เพิ่มขึ้น: ด้วยการใช้ประโยชน์จาก React Server Components และความสามารถในการดึงข้อมูลขั้นสูง App Directory ช่วยให้นักพัฒนาสามารถปรับปรุงประสิทธิภาพและลด JavaScript ฝั่งไคลเอ็นต์ได้
การกำหนดเส้นทางแบบประกาศ: แนวทางการกำหนดเส้นทางตามไฟล์ของ App Directory ช่วยให้นักพัฒนาสามารถกำหนดเส้นทางและเลย์เอาต์แบบประกาศได้ ทำให้โครงสร้างของแอปพลิเคชันมีความโปร่งใสและเข้าใจง่ายขึ้น
เลย์เอาต์และเทมเพลตในตัว: App Directory ให้การสนับสนุนในตัวสำหรับการกำหนดเลย์เอาต์และเทมเพลตที่ใช้ร่วมกันในหลายๆ หน้า ซึ่งช่วยลดการทำซ้ำของโค้ดและปรับปรุงความสอดคล้องกัน

แนวคิดหลักในระบบการกำหนดเส้นทางของ App Directory

เพื่อให้สามารถใช้ระบบการกำหนดเส้นทางของ App Directory ได้อย่างมีประสิทธิภาพ สิ่งสำคัญคือต้องเข้าใจแนวคิดหลักที่เป็นรากฐานของการทำงาน:

1. ส่วนของเส้นทางและโฟลเดอร์ (Route Segments and Folders)

แต่ละโฟลเดอร์ภายในไดเรกทอรี `app` แทน ส่วนของเส้นทาง (route segment) ชื่อของโฟลเดอร์จะสอดคล้องกับส่วนของเส้นทางใน URL ตัวอย่างเช่น โครงสร้างโฟลเดอร์ `app/blog/posts` จะจับคู่กับเส้นทาง `/blog/posts`

พิจารณาโครงสร้างนี้:

app/
  blog/
    posts/
      page.js

โครงสร้างนี้กำหนดเส้นทางที่ `/blog/posts` ไฟล์ `page.js` ภายในโฟลเดอร์ `posts` คือ คอมโพเนนต์ของส่วนเส้นทาง (route segment component) ซึ่งจะเรนเดอร์เนื้อหาสำหรับเส้นทางนั้น

2. ไฟล์ `page.js`: การเรนเดอร์เนื้อหาของเส้นทาง

ไฟล์ page.js (หรือ page.tsx สำหรับ TypeScript) เป็นไฟล์พิเศษที่กำหนดเนื้อหาที่จะเรนเดอร์สำหรับส่วนของเส้นทางที่เฉพาะเจาะจง มันเป็นจุดเริ่มต้นสำหรับเส้นทางนั้น ไฟล์นี้ต้องส่งออก (export) React component เป็น default export

ตัวอย่าง:

// app/blog/posts/page.js

export default function PostsPage() {
  return (
    <div>
      <h1>Blog Posts</h1>
      <p>List of blog posts will be displayed here.</p>
    </div>
  );
}

3. เลย์เอาต์ (Layouts): การกำหนด UI ที่ใช้ร่วมกัน

Layouts ช่วยให้คุณกำหนด UI ที่ใช้ร่วมกันในหลายหน้าหรือหลายส่วนของเส้นทางได้ เลย์เอาต์สามารถมีองค์ประกอบต่างๆ เช่น ส่วนหัว (headers), ส่วนท้าย (footers), แถบด้านข้าง (sidebars) หรือคอมโพเนนต์อื่นๆ ที่ควรมีความสอดคล้องกันทั่วทั้งส่วนของแอปพลิเคชันของคุณ เลย์เอาต์ถูกกำหนดโดยใช้ไฟล์ `layout.js` (หรือ `layout.tsx`)

เลย์เอาต์มีการซ้อนกันได้ ซึ่งหมายความว่าเลย์เอาต์ราก (`app/layout.js`) จะห่อหุ้มทั้งแอปพลิเคชัน และเลย์เอาต์ที่ซ้อนกันจะห่อหุ้มส่วนของเส้นทางที่เฉพาะเจาะจง เมื่อนำทางระหว่างเส้นทางที่ใช้เลย์เอาต์ร่วมกัน Next.js จะรักษาสถานะของเลย์เอาต์และหลีกเลี่ยงการเรนเดอร์ใหม่ ส่งผลให้ประสิทธิภาพดีขึ้นและประสบการณ์ผู้ใช้ที่ราบรื่นขึ้น

ตัวอย่าง:

// app/layout.js

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <header>
          <nav>
            <a href="/">Home</a> |
            <a href="/blog">Blog</a>
          </nav>
        </header>
        <main>{children}</main>
        <footer>
          <p>Copyright 2023</p>
        </footer>
      </body>
    </html>
  );
}

ในตัวอย่างนี้ `RootLayout` กำหนดโครงสร้าง HTML พื้นฐาน, ส่วนหัว, ส่วนท้าย และการนำทางสำหรับทั้งแอปพลิเคชัน หน้าใดๆ ที่เรนเดอร์ภายในไดเรกทอรี `app` จะถูกห่อหุ้มด้วยเลย์เอาต์นี้

4. เทมเพลต (Templates): การรักษาสถานะระหว่างเส้นทาง

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

5. กลุ่มเส้นทาง (Route Groups): การจัดระเบียบเส้นทางโดยไม่มีส่วนของ URL

Route groups ช่วยให้คุณสามารถจัดระเบียบเส้นทางของคุณภายใน App Directory โดยไม่ส่งผลกระทบต่อโครงสร้าง URL กลุ่มเส้นทางถูกกำหนดโดยการใส่ชื่อโฟลเดอร์ไว้ในวงเล็บ เช่น `(group-name)` วงเล็บเหล่านี้บอก Next.js ให้ถือว่าโฟลเดอร์เป็นกลไกการจัดกลุ่มเชิงตรรกะแทนที่จะเป็นส่วนของเส้นทาง

สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับการจัดระเบียบแอปพลิเคชันขนาดใหญ่ที่มีหลายเส้นทาง ตัวอย่างเช่น คุณอาจใช้กลุ่มเส้นทางเพื่อแยกส่วนต่างๆ ของแอปพลิเคชันของคุณ เช่น `(marketing)` และ `(app)` กลุ่มเหล่านี้มีผลต่อโครงสร้างไฟล์เท่านั้น ไม่ใช่เส้นทาง URL

ตัวอย่าง:

app/
  (marketing)/
    home/
      page.js  // เข้าถึงได้ที่ /home
    about/
      page.js  // เข้าถึงได้ที่ /about
  (app)/
    dashboard/
      page.js  // เข้าถึงได้ที่ /dashboard

6. เส้นทางแบบไดนามิก (Dynamic Routes): การจัดการส่วนที่เปลี่ยนแปลงได้

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

ตัวอย่าง:

app/
  blog/
    [slug]/
      page.js

ในตัวอย่างนี้ `[slug]` เป็นส่วนของเส้นทางแบบไดนามิก URL เช่น `/blog/my-first-post` จะตรงกับเส้นทางนี้ และพารามิเตอร์ `slug` จะถูกตั้งค่าเป็น `my-first-post` คุณสามารถเข้าถึงพารามิเตอร์ `slug` ภายในคอมโพเนนต์ `page.js` โดยใช้ prop ที่ชื่อ `params`

// app/blog/[slug]/page.js

export default function BlogPost({ params }) {
  const { slug } = params;
  return (
    <div>
      <h1>Blog Post: {slug}</h1>
      <p>Content of the blog post with slug: {slug}</p>
    </div>
  );
}

คุณต้องสร้างค่าที่เป็นไปได้สำหรับเส้นทางไดนามิกเหล่านี้ Next.js มีฟังก์ชัน `generateStaticParams` สำหรับการสร้างเว็บไซต์แบบสถิต (SSG) และการเรนเดอร์ฝั่งเซิร์ฟเวอร์ (SSR) ฟังก์ชันนี้ช่วยให้คุณระบุได้ว่าเส้นทางไดนามิกใดควรถูกเรนเดอร์ล่วงหน้า ณ เวลาสร้าง (build time)

// app/blog/[slug]/page.js

export async function generateStaticParams() {
  const posts = [
    { slug: 'my-first-post' },
    { slug: 'my-second-post' },
  ];

  return posts.map((post) => ({ slug: post.slug }));
}

export default function BlogPost({ params }) {
  const { slug } = params;
  return (
    <div>
      <h1>Blog Post: {slug}</h1>
      <p>Content of the blog post with slug: {slug}</p>
    </div>
  );
}

7. ส่วนที่ครอบคลุมทั้งหมด (Catch-All Segments): การจัดการเส้นทางที่ไม่รู้จัก

Catch-all segments เป็นประเภทหนึ่งของเส้นทางแบบไดนามิกที่ช่วยให้คุณจับคู่กับส่วนของ URL ได้ไม่จำกัดจำนวน ถูกกำหนดโดยการใส่จุดสามจุดนำหน้าชื่อส่วน เช่น `[...path]` ส่วนที่ครอบคลุมทั้งหมดมีประโยชน์สำหรับการสร้างเส้นทางที่ยืดหยุ่นซึ่งสามารถจัดการกับโครงสร้าง URL ที่หลากหลายได้

ตัวอย่าง:

app/
  docs/
    [...path]/
      page.js

ในตัวอย่างนี้ `[...path]` เป็นส่วนที่ครอบคลุมทั้งหมด URL เช่น `/docs/introduction`, `/docs/api/reference` และ `/docs/examples/basic` ทั้งหมดจะตรงกับเส้นทางนี้ พารามิเตอร์ `path` จะเป็นอาร์เรย์ที่ประกอบด้วยส่วนที่จับคู่ได้

// app/docs/[...path]/page.js

export default function DocsPage({ params }) {
  const { path } = params;
  return (
    <div>
      <h1>Documentation</h1>
      <p>Path: {path.join('/')}</p>
    </div>
  );
}

8. เส้นทางแบบขนาน (Parallel Routes): การเรนเดอร์หลายหน้าพร้อมกัน

Parallel Routes ช่วยให้คุณสามารถเรนเดอร์หลายหน้าภายในเลย์เอาต์เดียวกันได้พร้อมกัน สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับการสร้างรูปแบบ UI ที่ซับซ้อน เช่น แดชบอร์ดที่มีหลายแผง หรือกล่องโต้ตอบโมดัลที่ปรากฏทับหน้าปัจจุบัน เส้นทางแบบขนานถูกกำหนดโดยใช้สัญลักษณ์ @ เช่น `@children`, `@modal` สามารถระบุได้โดยตรงใน URL หรือนำทางไปโดยใช้ `useRouter` hook

ตัวอย่าง:

app/
  @children/
    page.js // เรนเดอร์เนื้อหาหลัก
  @modal/
    login/
      page.js // เรนเดอร์โมดัลล็อกอิน

ในการแสดงเส้นทางแบบขนาน ให้ใช้คอมโพเนนต์ ``

9. การสกัดกั้นเส้นทาง (Intercepting Routes): การสร้างการเปลี่ยนผ่าน UI ที่ซับซ้อน

Intercepting Routes ช่วยให้คุณสามารถโหลดเส้นทางจากส่วนอื่นของแอปพลิเคชันของคุณภายในบริบทของเส้นทางปัจจุบันได้ สิ่งนี้สามารถใช้เพื่อสร้างการเปลี่ยนผ่าน UI ที่ซับซ้อน เช่น การแสดงกล่องโต้ตอบโมดัลเมื่อคลิกที่ลิงก์โดยไม่ต้องนำทางออกจากหน้าปัจจุบัน ถูกกำหนดโดยใช้ไวยากรณ์ (...)

การดึงข้อมูลใน App Directory

App Directory แนะนำวิธีการดึงข้อมูลแบบใหม่และปรับปรุงให้ดีขึ้น โดยใช้ประโยชน์จาก React Server Components และ `fetch` API พร้อมความสามารถในการแคชและ revalidation ในตัว สิ่งนี้นำไปสู่ประสิทธิภาพที่ดีขึ้นและประสบการณ์การพัฒนาที่คล่องตัวยิ่งขึ้น ทั้งคอมโพเนนต์ฝั่งเซิร์ฟเวอร์และไคลเอ็นต์สามารถดึงข้อมูลได้ แต่กลยุทธ์จะแตกต่างกัน

1. การดึงข้อมูลใน Server Components

Server Components ซึ่งเป็นค่าเริ่มต้นใน App Directory สามารถดึงข้อมูลโดยตรงจากฐานข้อมูลหรือ API ได้ ซึ่งทำได้ภายในฟังก์ชันของคอมโพเนนต์ก่อนการเรนเดอร์ เนื่องจาก Server Components ทำงานบนเซิร์ฟเวอร์ คุณจึงสามารถรวมคีย์ลับและข้อมูลรับรองได้อย่างปลอดภัยโดยไม่ต้องเปิดเผยต่อไคลเอ็นต์ `fetch` API จะถูก memoized โดยอัตโนมัติ ซึ่งหมายความว่าคำขอข้อมูลที่เหมือนกันจะถูกขจัดความซ้ำซ้อนออกไป ซึ่งช่วยปรับปรุงประสิทธิภาพให้ดียิ่งขึ้น

// app/page.js

async function getData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  // ค่าที่ส่งคืน *ไม่* ถูกแปลงเป็น serialized
  // คุณสามารถส่งคืน Date, Map, Set ฯลฯ ได้

  if (!res.ok) {
    // ส่วนนี้จะเปิดใช้งาน Error Boundary ของ `error.js` ที่ใกล้ที่สุด
    throw new Error('Failed to fetch data');
  }

  return res.json();
}

export default async function Page() {
  const data = await getData();

  return <div>{data.title}</div>;
}

2. การดึงข้อมูลใน Client Components

Client Components ซึ่งระบุโดยคำสั่ง 'use client' ที่ด้านบนของไฟล์ จะทำงานในเบราว์เซอร์ของผู้ใช้ การดึงข้อมูลใน Client Components โดยทั่วไปจะเกี่ยวข้องกับการใช้ `useEffect` hook และไลบรารีอย่าง `axios` หรือ `fetch` API Server Actions เป็นวิธีที่ปลอดภัยในการแก้ไขข้อมูลเซิร์ฟเวอร์จากคอมโพเนนต์ฝั่งไคลเอ็นต์ ซึ่งเป็นวิธีที่ปลอดภัยสำหรับคอมโพเนนต์ฝั่งไคลเอ็นต์ในการโต้ตอบกับข้อมูลบนเซิร์ฟเวอร์โดยไม่ต้องเปิดเผย API endpoints โดยตรง

// app/components/ClientComponent.js
'use client';

import { useState, useEffect } from 'react';

export default function ClientComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
      const data = await res.json();
      setData(data);
    }

    fetchData();
  }, []);

  if (!data) {
    return <div>Loading...</div>;
  }

  return <div>{data.title}</div>;
}

ข้อควรพิจารณาด้าน SEO กับ App Directory

แนวทาง server-first ของ App Directory มีข้อได้เปรียบที่สำคัญสำหรับ SEO เนื่องจากเนื้อหาถูกเรนเดอร์บนเซิร์ฟเวอร์ โปรแกรมรวบรวมข้อมูลของเครื่องมือค้นหาจึงสามารถเข้าถึงและจัดทำดัชนีเนื้อหาของหน้าได้อย่างง่ายดาย นี่คือข้อควรพิจารณาที่สำคัญด้าน SEO:

ข้อมูลเมตา (Metadata): ใช้แท็ก <head> ภายในเลย์เอาต์และหน้าของคุณเพื่อกำหนดข้อมูลเมตา เช่น ชื่อ, คำอธิบาย และคีย์เวิร์ด Next.js ให้การสนับสนุนในตัวสำหรับการจัดการข้อมูลเมตาผ่าน `Metadata` API
HTML เชิงความหมาย (Semantic HTML): ใช้องค์ประกอบ HTML เชิงความหมาย (เช่น <article>, <nav>, <aside>) เพื่อจัดโครงสร้างเนื้อหาของคุณอย่างมีตรรกะและให้บริบทสำหรับเครื่องมือค้นหา
การเข้าถึงได้ (Accessibility): ตรวจสอบให้แน่ใจว่าแอปพลิเคชันของคุณสามารถเข้าถึงได้โดยผู้ใช้ที่มีความพิการ ซึ่งรวมถึงการให้ข้อความทางเลือกสำหรับรูปภาพ, การใช้ลำดับชั้นของหัวข้อที่เหมาะสม และการตรวจสอบความคมชัดของสีที่เพียงพอ
ประสิทธิภาพ (Performance): ปรับปรุงประสิทธิภาพของแอปพลิเคชันของคุณเพื่อปรับปรุงประสบการณ์ผู้ใช้และการจัดอันดับของเครื่องมือค้นหา ซึ่งรวมถึงการลด JavaScript ฝั่งไคลเอ็นต์, การปรับปรุงรูปภาพ และการใช้ประโยชน์จากการแคช

ประโยชน์ของการใช้ระบบการกำหนดเส้นทางของ App Directory

ระบบการกำหนดเส้นทางของ App Directory มีประโยชน์มากมายที่ช่วยปรับปรุงกระบวนการพัฒนา, เพิ่มประสิทธิภาพของแอปพลิเคชัน และนำไปสู่ประสบการณ์ผู้ใช้ที่ดีขึ้น มาสำรวจข้อดีเหล่านี้ในรายละเอียดเพิ่มเติมกัน:

การจัดระเบียบและการบำรุงรักษาที่ดียิ่งขึ้น: ระบบการกำหนดเส้นทางตามไฟล์ส่งเสริมให้มี codebase ที่มีโครงสร้างและเป็นระเบียบโดยธรรมชาติ ด้วยการจับคู่เส้นทางกับโครงสร้างไดเรกทอรีโดยตรง นักพัฒนาสามารถเข้าใจความสัมพันธ์ระหว่าง URL และคอมโพเนนต์ที่สอดคล้องกันได้อย่างง่ายดาย โครงสร้างที่ชัดเจนนี้ช่วยให้การนำทางภายใน codebase ง่ายขึ้นและทำให้การบำรุงรักษาและอัปเดตแอปพลิเคชันในอนาคตง่ายขึ้น
ประสิทธิภาพที่ดีขึ้นผ่าน Server Components: App Directory ใช้ประโยชน์จาก React Server Components ในการเรนเดอร์เนื้อหาบนเซิร์ฟเวอร์ ซึ่งช่วยลดปริมาณ JavaScript ที่ต้องดาวน์โหลดและทำงานในเบราว์เซอร์ ส่งผลให้เวลาในการโหลดหน้าเริ่มต้นเร็วขึ้นและประสิทธิภาพโดยรวมดีขึ้น โดยเฉพาะสำหรับผู้ใช้ที่มีการเชื่อมต่ออินเทอร์เน็ตที่ช้าหรืออุปกรณ์ที่มีประสิทธิภาพน้อย
การดึงและจัดการข้อมูลที่ง่ายขึ้น: App Directory ทำให้การดึงข้อมูลง่ายขึ้นโดยอนุญาตให้นักพัฒนาสามารถดึงข้อมูลได้โดยตรงภายใน Server Components ซึ่งช่วยขจัดความจำเป็นในการใช้ตรรกะการดึงข้อมูลฝั่งไคลเอ็นต์ที่ซับซ้อนและลดความเสี่ยงในการเปิดเผยข้อมูลที่ละเอียดอ่อนต่อไคลเอ็นต์
การกำหนดเส้นทางแบบประกาศและใช้งานง่าย: ระบบการกำหนดเส้นทางตามไฟล์เป็นวิธีที่ประกาศและใช้งานง่ายในการกำหนดเส้นทางของแอปพลิเคชัน เพียงแค่สร้างไฟล์และไดเรกทอรีภายในไดเรกทอรี `app` นักพัฒนาก็สามารถกำหนดโครงสร้างและพฤติกรรมการนำทางของแอปพลิเคชันได้อย่างง่ายดาย แนวทางนี้ช่วยลดความจำเป็นในการใช้ไฟล์กำหนดค่าที่ซับซ้อนและทำให้ระบบการกำหนดเส้นทางเข้าใจและใช้งานง่ายขึ้น
เลย์เอาต์และเทมเพลตในตัวเพื่อ UI ที่สอดคล้องกัน: App Directory ให้การสนับสนุนในตัวสำหรับเลย์เอาต์และเทมเพลต ซึ่งช่วยให้นักพัฒนาสามารถกำหนดองค์ประกอบ UI ที่ใช้ร่วมกันซึ่งมีความสอดคล้องกันในหลายๆ หน้า ซึ่งช่วยลดการทำซ้ำของโค้ดและทำให้ง่ายต่อการรักษารูปลักษณ์และความรู้สึกที่สอดคล้องกันทั่วทั้งแอปพลิเคชัน
คุณสมบัติการกำหนดเส้นทางขั้นสูงสำหรับกรณีการใช้งานที่ซับซ้อน: App Directory มีคุณสมบัติการกำหนดเส้นทางขั้นสูงหลายอย่าง เช่น เส้นทางแบบไดนามิก, ส่วนที่ครอบคลุมทั้งหมด, เส้นทางแบบขนาน และการสกัดกั้นเส้นทาง คุณสมบัติเหล่านี้ช่วยให้นักพัฒนาสามารถจัดการกับสถานการณ์การกำหนดเส้นทางที่ซับซ้อนและสร้างรูปแบบ UI ที่ซับซ้อนซึ่งทำได้ยากหรือเป็นไปไม่ได้ด้วยระบบการกำหนดเส้นทางแบบดั้งเดิม

ตัวอย่างการใช้งานจริงของการกำหนดเส้นทางใน App Directory

เพื่อแสดงให้เห็นถึงพลังและความยืดหยุ่นของระบบการกำหนดเส้นทางของ App Directory ลองพิจารณาตัวอย่างการใช้งานจริงสองสามตัวอย่าง:

1. การสร้างบล็อกอย่างง่ายด้วยเส้นทางแบบไดนามิก

พิจารณาแอปพลิเคชันบล็อกที่แต่ละโพสต์มี URL ที่ไม่ซ้ำกันตาม slug ของมัน ด้วย App Directory สิ่งนี้สามารถนำไปปฏิบัติได้อย่างง่ายดายโดยใช้เส้นทางแบบไดนามิก:

``` app/ blog/ [slug]/ page.js ```

ไดเรกทอรี `[slug]` แทนส่วนของเส้นทางแบบไดนามิก ซึ่งจะจับคู่กับ URL ใดๆ ภายใต้เส้นทาง `/blog/` ไฟล์ `page.js` ภายในไดเรกทอรี `[slug]` จะเรนเดอร์เนื้อหาสำหรับโพสต์บล็อกที่สอดคล้องกัน

```javascript // app/blog/[slug]/page.js export async function generateStaticParams() { // ดึงโพสต์บล็อกทั้งหมดจากฐานข้อมูลหรือ API const posts = await fetchPosts(); // จับคู่โพสต์กับอาร์เรย์ของพารามิเตอร์ slug return posts.map((post) => ({ slug: post.slug })); } export default async function BlogPost({ params }) { const { slug } = params; // ดึงโพสต์บล็อกที่มี slug ตรงกัน const post = await fetchPost(slug); if (!post) { return <div>Post not found</div>; } return ( <article> <h1>{post.title}</h1> <p>{post.content}</p> </article> ); } ```

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

2. การนำกล่องโต้ตอบโมดัลมาใช้ด้วยการสกัดกั้นเส้นทาง

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

``` app/ (.)photos/ [id]/ @modal/ page.js page.js ```

ในที่นี้ `(.)photos/[id]/@modal/page.js` จะสกัดกั้นคำขอที่ไปยัง `photos/[id]` จากหน้าปัจจุบัน เมื่อผู้ใช้คลิกที่ลิงก์ไปยังรูปภาพที่เฉพาะเจาะจง กล่องโต้ตอบโมดัลจะปรากฏขึ้นทับหน้าปัจจุบัน แทนที่จะนำทางไปยังหน้าใหม่

3. การสร้างเลย์เอาต์แดชบอร์ดด้วยเส้นทางแบบขนาน

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

``` app/ @analytics/ page.js // แดชบอร์ดการวิเคราะห์ @settings/ page.js // แผงการตั้งค่า page.js // เลย์เอาต์แดชบอร์ดหลัก ```

ในโครงสร้างนี้ `@analytics` และ `@settings` แทนเส้นทางแบบขนานที่จะถูกเรนเดอร์ภายในเลย์เอาต์แดชบอร์ดหลัก แต่ละเส้นทางแบบขนานมีไฟล์ page.js ของตัวเองที่กำหนดเนื้อหาสำหรับแผงนั้นๆ เลย์เอาต์สามารถตัดสินใจได้ว่าจะวางสิ่งเหล่านี้ไว้ที่ใดโดยใช้คอมโพเนนต์ <Slot>

การย้ายจาก Pages Directory ไปยัง App Directory

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

ทำความเข้าใจความแตกต่างที่สำคัญ: ก่อนที่คุณจะเริ่มการย้าย ตรวจสอบให้แน่ใจว่าคุณเข้าใจความแตกต่างที่สำคัญระหว่าง Pages Directory และ App Directory อย่างถ่องแท้ รวมถึงระบบการกำหนดเส้นทาง, การดึงข้อมูล และสถาปัตยกรรมของคอมโพเนนต์
สร้างไดเรกทอรี `app`: สร้างไดเรกทอรีใหม่ชื่อ `app` ที่รากของโปรเจกต์ Next.js ของคุณ ไดเรกทอรีนี้จะเก็บคอมโพเนนต์และเส้นทางทั้งหมดที่เป็นส่วนหนึ่งของ App Directory
ย้ายเส้นทางทีละน้อย: เริ่มต้นด้วยการย้ายเส้นทางทีละน้อย ทีละเส้นทาง ซึ่งจะช่วยให้คุณสามารถทดสอบและดีบักแต่ละเส้นทางแยกกันได้ ลดความเสี่ยงในการเกิดข้อผิดพลาด
แปลงคอมโพเนนต์เป็น Server Components: แปลง React components ที่มีอยู่ของคุณเป็น Server Components เมื่อใดก็ตามที่เป็นไปได้ ซึ่งจะช่วยปรับปรุงประสิทธิภาพและลดปริมาณ JavaScript ที่ต้องดาวน์โหลดและทำงานในเบราว์เซอร์
อัปเดตตรรกะการดึงข้อมูล: อัปเดตตรรกะการดึงข้อมูลของคุณเพื่อใช้ประโยชน์จากความสามารถในการดึงข้อมูลในตัวของ App Directory ซึ่งอาจเกี่ยวข้องกับการย้ายโค้ดการดึงข้อมูลจาก Client Components ไปยัง Server Components
นำเลย์เอาต์และเทมเพลตมาใช้: นำเลย์เอาต์และเทมเพลตมาใช้เพื่อกำหนดองค์ประกอบ UI ที่ใช้ร่วมกันซึ่งมีความสอดคล้องกันในหลายๆ หน้า
ทดสอบอย่างละเอียด: ทดสอบแต่ละเส้นทางที่ย้ายอย่างละเอียดเพื่อให้แน่ใจว่าทำงานได้อย่างถูกต้องและไม่มีการถดถอย (regressions)
ลบไดเรกทอรี `pages`: เมื่อย้ายเส้นทางทั้งหมดแล้ว คุณสามารถลบไดเรกทอรี `/pages` ได้

สรุป

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

ในขณะที่ระบบนิเวศของ Next.js ยังคงพัฒนาต่อไป App Directory ก็พร้อมที่จะกลายเป็นมาตรฐานสำหรับการสร้างเว็บแอปพลิเคชันที่แข็งแกร่ง, ขยายขนาดได้ และมีประสิทธิภาพสูง ยอมรับการเปลี่ยนแปลง, สำรวจความเป็นไปได้ และปลดล็อกศักยภาพสูงสุดของ Next.js!