Next.js 15 Fullstack Web Apps · 강의

페이지, 레이아웃 및 라우팅 기초

App Router를 살펴보고, 페이지를 정의하며, 공유 레이아웃을 만들고, 애플리케이션의 경로 사이를 이동하는 방법을 학습합니다.

페이지, 레이아웃 및 라우팅 기초은(는) CoddyKit의 무료 Next.js 15 Fullstack Web Apps 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Next.js 15 Fullstack Web Apps 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Next.js 15 Fullstack Web Apps 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Welcome to App Router

The App Router is Next.js 15's routing system, built on React Server Components. It lets you co-locate components, styles, and tests by route.

Routes from Your Files

Routing is filesystem-based: your folder structure inside app/ directly defines your URLs, keeping the project predictable.

Defining a Page

A page.js file inside a folder makes that route render. It exports the React component shown when a user visits that URL.

Code: Simple Page

Create app/page.js and it automatically becomes your home page at the / route. Here is the component that renders there.

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

Organizing with Nested Routes

Build nested routes by nesting folders in app/ — each folder is a URL segment, so app/dashboard/settings/ maps to /dashboard/settings.

Code: Nested Page

To serve /dashboard/settings, create that folder path with a page.js inside. The file's component renders at that URL.

// app/dashboard/settings/page.js
export default function DashboardSettingsPage() {
  return (
    <div>
      <h2>Dashboard Settings</h2>
      <p>Manage your preferences here.</p>
    </div>
  );
}

Shared UI with Layouts

A layout (layout.js) is shared UI that wraps the pages in its segment — ideal for navbars, sidebars, and footers via the children prop.

Code: Root Layout

Every App Router project needs a root layout.js. It defines the base HTML — the <html> and <body> tags around your whole app.

// app/layout.js
import './globals.css'; // Global styles (optional)

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>
          <nav>Home | About</nav>
        </header>
        <main>{children}</main> {/* Page content goes here */}
        <footer>&copy; 2024 CoddyKit</footer>
      </body>
    </html>
  );
}

Nested Layouts

Nested layouts apply only to their folder and subfolders, inheriting from parent layouts — so you can build hierarchical UI per section.

Linking Between Pages

Navigate with the <Link> component from next/link. It behaves like an anchor but does client-side routing — no full page reload.

// app/page.js (example usage)
import Link from 'next/link';

export default function HomePage() {
  return (
    <div>
      <h1>Welcome!</h1>
      <p>Go to the <Link href="/about">About Us</Link> page.</p>
      <p>Or visit your <Link href="/dashboard">Dashboard</Link>.</p>
    </div>
  );
}

Routing & Layouts Check

Which of the following statements about Next.js 15 App Router are TRUE?

Recap: Pages, Layouts & Routing

You learned the App Router: folders define routes, page.js renders content, layout.js shares UI, and <Link> handles fast navigation.

자주 묻는 질문

“페이지, 레이아웃 및 라우팅 기초” 강의는 무료인가요?

네 — “페이지, 레이아웃 및 라우팅 기초” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Next.js 15 Fullstack Web Apps 강의 전체를 잠금 해제할 수 있습니다. Next.js 15 Fullstack Web Apps 강의에는 총 4개의 강의가 포함되어 있습니다.

“페이지, 레이아웃 및 라우팅 기초”에서 뭘 배우나요?

App Router를 살펴보고, 페이지를 정의하며, 공유 레이아웃을 만들고, 애플리케이션의 경로 사이를 이동하는 방법을 학습합니다. 브라우저에서 직접 실행하는 실습 코드로 Next.js 15 Fullstack Web Apps을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Next.js 15 Fullstack Web Apps을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Next.js 15 Fullstack Web Apps은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“페이지, 레이아웃 및 라우팅 기초” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Next.js 15 Fullstack Web Apps 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Next.js 15 Fullstack Web Apps 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Next.js 15 Fullstack Web Apps(으)로 돌아가기