Next.js 15 Fullstack (App Router + Server Actions) · บทเรียน

เส้นทางแบบไดนามิกและพารามิเตอร์

เรียนรู้การสร้างเส้นทางแบบไดนามิกเพื่อจัดการส่วนที่เปลี่ยนแปลงได้ใน URL และเข้าถึงพารามิเตอร์เส้นทาง

บทเรียน 2 จาก 411 ขั้นตอน

เส้นทางแบบไดนามิกและพารามิเตอร์ เป็นบทเรียน Next.js 15 Fullstack (App Router + Server Actions) ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Next.js 15 Fullstack (App Router + Server Actions) และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Next.js 15 Fullstack (App Router + Server Actions) มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

What are Dynamic Routes?

Imagine you have a blog with many posts. Instead of creating a separate page for each post (like /blog/post-1, /blog/post-2), you can use dynamic routes.

Dynamic routes allow you to create pages that respond to variable segments in the URL, making your application scalable and maintainable.

Defining a Basic Dynamic Route

In Next.js App Router, you define a dynamic route segment by wrapping a folder name in square brackets []. For example, to create a dynamic route for blog posts, you'd create a folder named [slug].

app/blog/[slug]/page.js

This structure will match URLs like /blog/first-post, /blog/another-article, etc.

Accessing Route Parameters

When a dynamic route is matched, the variable part of the URL becomes available as a route parameter. You can access these parameters within your page component via the params prop.

For app/blog/[slug]/page.js, the URL /blog/my-first-post would make params.slug equal to 'my-first-post'.

Demo: Simple Dynamic Page

Let's see how to create a simple dynamic page that displays the slug parameter from the URL. Place this code in app/blog/[slug]/page.js.

export default function BlogPostPage({ params }) {
  // params.slug will contain the dynamic part of the URL
  return (
    <div>
      <h1>Blog Post: {params.slug}</h1>
      <p>This content is dynamically loaded!</p>
    </div>
  );
}

Understanding Catch-all Segments

What if you need to match a path with an unknown number of segments? This is where catch-all segments come in handy. You define them using a spread syntax: [...slug].

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

This will match URLs like /docs/a, /docs/a/b, /docs/a/b/c, etc.

Accessing Catch-all Parameters

When using a catch-all segment, the params prop will contain an array of the matched segments. So, for app/docs/[...slug]/page.js:

/docs/a -> params.slug is ['a']
/docs/a/b/c -> params.slug is ['a', 'b', 'c']

Demo: Catch-all Page

Here's how you can display all segments from a catch-all route. Place this code in app/docs/[...slug]/page.js.

export default function DocsPage({ params }) {
  // params.slug is an array of path segments
  const path = params.slug.join('/');
  return (
    <div>
      <h1>Documentation Path: /{path}</h1>
      <p>Showing content for: {path}</p>
    </div>
  );
}

Optional Catch-all Segments

Sometimes you want a catch-all segment that can also match the base path (i.e., zero segments). This is an optional catch-all, defined with double square brackets: [[...slug]].

app/users/[[...id]]/page.js

This will match /users (where params.id is undefined) AND /users/123 (where params.id is ['123']).

Demo: Optional Catch-all

This example shows an optional catch-all route that displays a user ID or 'Guest' if no ID is provided. Place this in app/users/[[...id]]/page.js.

export default function UserProfilePage({ params }) {
  // params.id will be undefined for /users, or ['123'] for /users/123
  const userId = params.id ? params.id[0] : 'Guest';
  return (
    <div>
      <h1>Welcome, {userId}</h1>
      <p>This page handles both base and dynamic paths.</p>
    </div>
  );
}

Dynamic Routes Quiz

Which of the following file structures would allow a Next.js App Router application to handle URLs like /products/electronics/laptops and access 'electronics' and 'laptops' separately?

ตอบคำถามในบทเรียนแบบโต้ตอบ

Recap: Dynamic Routes & Params

Great job! You've learned the essentials of dynamic routing in Next.js App Router:

[slug] creates a single dynamic segment.
[...slug] creates a catch-all segment for multiple paths, returning an array.
[[...slug]] creates an optional catch-all, matching zero or more segments.
All dynamic segments are accessed via the params prop in your page.js components.

This powerful feature is key for building flexible and scalable web applications!

เริ่มต้นได้ฟรี

เรียนรู้ TypeScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 22
บทเรียน: 88

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “เส้นทางแบบไดนามิกและพารามิเตอร์” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “เส้นทางแบบไดนามิกและพารามิเตอร์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Next.js 15 Fullstack (App Router + Server Actions) ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Next.js 15 Fullstack (App Router + Server Actions) มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “เส้นทางแบบไดนามิกและพารามิเตอร์”

เรียนรู้การสร้างเส้นทางแบบไดนามิกเพื่อจัดการส่วนที่เปลี่ยนแปลงได้ใน URL และเข้าถึงพารามิเตอร์เส้นทาง คุณปฏิบัติ Next.js 15 Fullstack (App Router + Server Actions) ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Next.js 15 Fullstack (App Router + Server Actions) หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Next.js 15 Fullstack (App Router + Server Actions) บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “เส้นทางแบบไดนามิกและพารามิเตอร์” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Next.js 15 Fullstack (App Router + Server Actions) นี้ได้ไหม

ได้ บทเรียน Next.js 15 Fullstack (App Router + Server Actions) ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Next.js 15 Fullstack (App Router + Server Actions)