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

พื้นฐานการกำหนดเส้นทางตามระบบไฟล์

ทำความเข้าใจแนวคิดพื้นฐานของการกำหนดเส้นทางตามระบบไฟล์ใน Next.js และวิธีสร้างหน้าและเส้นทางพื้นฐาน

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

พื้นฐานการกำหนดเส้นทางตามระบบไฟล์ เป็นบทเรียน 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 บทเรียน

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

Intro to File-System Routing

Next.js routes by your file system — your folder and file layout directly defines your URLs. Files become pages, folders become URL segments.

The Core `app` Directory

Every route lives inside the special app directory — the root of your site's structure. Anything you put there shapes the routing.

Creating a Root Page

A route needs a page.js that default-exports a React component. Place it directly in app/ and it becomes your homepage at /.

Hello Next.js Homepage!

Here's a minimal app/page.js. This component renders at your root URL / — the homepage visitors land on first.

export default function HomePage() {
  return (
    <div>
      <h1>Welcome to CoddyKit!</h1>
      <p>This is your Next.js homepage.</p>
    </div>
  );
}

Folders for Nested Paths

Want a /dashboard route? Make a dashboard folder in app/ and drop a page.js inside. The folder name becomes the URL segment.

The Dashboard Page

This code goes in app/dashboard/page.js. Visit /dashboard and Next.js renders exactly this component.

export default function DashboardPage() {
  return (
    <div>
      <h1>Your Dashboard</h1>
      <p>Here you'll find all your important stats.</p>
    </div>
  );
}

Deeper Nested Routes

Nest as deep as you like — each folder adds a URL segment. So app/products/electronics/page.js maps to /products/electronics. Clean and logical.

Shared UI with `layout.js`

A layout.js defines shared UI that wraps the pages in its folder — perfect for nav bars, footers, and sidebars that stay put across routes.

Route Mapping Quiz

Imagine you have a file located at app/blog/posts/page.js within your Next.js project. What URL path would this file correspond to?

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

File-System Routing Recap

Recap: the app directory roots all routes, page.js defines a route's UI, folders create nested segments, and layout.js shares UI across them.

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

เรียนรู้ 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 บทเรียน

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

ทำความเข้าใจแนวคิดพื้นฐานของการกำหนดเส้นทางตามระบบไฟล์ใน Next.js และวิธีสร้างหน้าและเส้นทางพื้นฐาน คุณปฏิบัติ 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)