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

ภาพรวมหน้าและเลย์เอาต์

สำรวจความแตกต่างระหว่างหน้าและเลย์เอาต์ รวมถึงวิธีผสานกันเป็นโครงสร้าง UI ของแอปพลิเคชัน Next.js

บทเรียน 3 จาก 412 ขั้นตอน

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

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

Welcome to Pages & Layouts

Next.js UI rests on two ideas: Pages and Layouts. This lesson shows what each one is and how they combine to build your interface.

What is a Page?

A Page is a React component that renders the UI for one route. Default-export it from a page.js file and that route gets its own view.

Creating a Simple Page

Here's a basic page.js that renders the home route /. A page is just a default-exported component — nothing more.

// app/page.js

export default function HomePage() {
  return (
    <h1>Welcome to My App!</h1>
  );
}

What is a Layout?

A Layout is UI shared across pages — a wrapper that gives consistent structure. Export it from layout.js; it takes a children prop for nested content.

The Root Layout

Every App Router app needs a root layout at app/layout.js. It wraps the whole app, including the html and body tags — the place for global styles and metadata.

// app/layout.js

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

Nested Layouts

Add a layout.js inside any folder for a nested layout. An app/dashboard/layout.js wraps every page under dashboard — unique shared UI per section.

How They Combine

Next.js nests layouts automatically: a page renders inside its parent layout's children, that inside its parent's, all the way up to the root.

Example: A Blog Section

Picture a blog: blog/layout.js gives a shared nav, blog/page.js is the index, and blog/first-post/page.js a post — each nesting upward into the root.

Code: Blog Layout Example

This blog/layout.js wraps every /blog page with a header, nav, and footer — shared chrome that stays consistent across the section.

// app/blog/layout.js

export default function BlogLayout({ children }) {
  return (
    <div>
      <header><h1>My Awesome Blog</h1></header>
      <nav>
        <a href="/blog">Home</a> | <a href="/blog/archive">Archive</a>
      </nav>
      <main>{children}</main>
      <footer><p>&copy; 2023 CoddyKit Blog</p></footer>
    </div>
  );
}

Code: Blog Page Example

And here's blog/page.js. Its content renders right where {children} sits inside BlogLayout — page slotting into layout.

// app/blog/page.js

export default function BlogHomePage() {
  return (
    <section>
      <h2>Welcome to the Blog Homepage!</h2>
      <p>Discover our latest articles and insights.</p>
    </section>
  );
}

Pages vs. Layouts Quiz

Let's check your understanding of Next.js pages and layouts.

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

Recap: Pages & Layouts

Recap: Pages (page.js) render a route's unique UI, Layouts (layout.js) share UI across routes, and Next.js nests them via children.

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

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

คุณจะเรียนรู้อะไรในบทเรียน “ภาพรวมหน้าและเลย์เอาต์”

สำรวจความแตกต่างระหว่างหน้าและเลย์เอาต์ รวมถึงวิธีผสานกันเป็นโครงสร้าง UI ของแอปพลิเคชัน 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 ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 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)