Next.js 15 Fullstack (App Router + Server Actions) · 강의

파일 시스템 라우팅 기초

Next.js의 파일 시스템 기반 라우팅의 기본 개념과 기본 페이지 및 경로를 만드는 방법을 이해합니다.

레슨 2/410개 단계

파일 시스템 라우팅 기초은(는) CoddyKit의 무료 Next.js 15 Fullstack (App Router + Server Actions) 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 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.

무료로 시작

AI 튜터와 함께 TypeScript을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 22
레슨: 88

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“파일 시스템 라우팅 기초” 강의는 무료인가요?

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

“파일 시스템 라우팅 기초”에서 뭘 배우나요?

Next.js의 파일 시스템 기반 라우팅의 기본 개념과 기본 페이지 및 경로를 만드는 방법을 이해합니다. 브라우저에서 직접 실행하는 실습 코드로 Next.js 15 Fullstack (App Router + Server Actions)을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Next.js 15 Fullstack (App Router + Server Actions)을(를) 시작하는 데 경험이 필요한가요?

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

“파일 시스템 라우팅 기초” 강의는 얼마나 걸리나요?

대부분의 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)(으)로 돌아가기