App Router 파일 규칙
app/ 디렉터리와 page.tsx, layout.tsx, loading.tsx, error.tsx 파일의 역할을 알아봅니다.
App Router 파일 규칙은(는) CoddyKit의 무료 React Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
app/ 디렉터리
Next.js App Router는 app/ 디렉터리를 사용합니다. 폴더는 URL 세그먼트를 정의하고, 폴더 안의 특수 파일은 각 세그먼트의 동작을 정의합니다.
page.tsx — 경로 UI
page.tsx는 URL 세그먼트에 렌더링되는 React 컴포넌트를 내보냅니다. page.tsx가 없으면 해당 경로에 공개적으로 접근할 수 없습니다.
// app/dashboard/page.tsx
export default function DashboardPage() {
return <h1>Dashboard</h1>;
}
// → accessible at /dashboardlayout.tsx — 지속되는 셸
layout.tsx는 자식 경로를 감쌉니다. 탐색 간에도 유지되므로 자식 경로가 바뀌어도 상태가 초기화되지 않습니다.
// app/layout.tsx (root layout — required)
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<Header />
{children}
<Footer />
</body>
</html>
);
}loading.tsx — 즉시 표시되는 로딩 화면
loading.tsx는 페이지의 비동기 데이터가 로드되는 동안 즉시 렌더링됩니다. 페이지를 자동 Suspense 경계로 감쌉니다.
// app/dashboard/loading.tsx
export default function Loading() {
return <Skeleton />;
}
// Shown while dashboard/page.tsx is fetchingerror.tsx — 오류 경계
error.tsx는 해당 세그먼트의 React 오류 경계입니다. 재시도할 수 있도록 오류와 reset 함수를 받습니다.
'use client';
export default function Error({ error, reset }: { error: Error; reset: () => void }) {
return (
<div>
<p>Something went wrong: {error.message}</p>
<button onClick={reset}>Try again</button>
</div>
);
}not-found.tsx — 404 화면
서버 컴포넌트에서 notFound()가 호출되거나 일치하는 경로가 없을 때 not-found.tsx가 렌더링됩니다.
// app/not-found.tsx
export default function NotFound() {
return (
<div>
<h2>404 — Page not found</h2>
<Link href="/">Go home</Link>
</div>
);
}template.tsx — 다시 마운트되는 레이아웃
template.tsx는 layout.tsx와 비슷하지만 탐색할 때마다 새 인스턴스를 만듭니다. 따라서 상태가 초기화되고 효과가 다시 실행됩니다. 애니메이션이나 분석에 사용하십시오.
// app/shop/template.tsx
export default function ShopTemplate({ children }: { children: React.ReactNode }) {
return <div className="shop-fade-in">{children}</div>;
}route.ts — API 경로
route.ts(route.tsx가 아님)는 HTTP 메서드 처리기(GET, POST 등)를 내보내 app/ 디렉터리 안에 API 엔드포인트를 만듭니다.
// app/api/users/route.ts
export async function GET() {
const users = await getUsers();
return Response.json(users);
}
export async function POST(request: Request) {
const body = await request.json();
const user = await createUser(body);
return Response.json(user, { status: 201 });
}middleware.ts — 엣지 미들웨어
프로젝트 루트의 middleware.ts는 일치하는 모든 요청보다 먼저 엣지에서 실행됩니다. 인증 확인, 리디렉션, 헤더 재작성에 사용됩니다.
// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const token = request.cookies.get('token');
if (!token) return NextResponse.redirect(new URL('/login', request.url));
return NextResponse.next();
}
export const config = { matcher: ['/dashboard/:path*'] };함께 배치하기
경로가 아닌 파일(컴포넌트, 유틸리티, 테스트)을 app/ 폴더 안에 함께 배치할 수 있습니다. 특수 규칙에 해당하는 이름(page, layout 등)의 파일만 경로 세그먼트로 처리됩니다.
중첩 레이아웃
각 폴더에는 자체 layout.tsx를 둘 수 있습니다. 중첩 레이아웃은 해당 세그먼트의 자식만 감싸며, 그 위에 있는 부모 레이아웃과 조합됩니다.
// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
return (
<div className="dashboard">
<Sidebar />
<main>{children}</main>
</div>
);
}빠른 확인
페이지의 비동기 데이터가 로드되는 동안 자동 대체 UI를 제공하는 App Router 파일은 무엇입니까?
복습
App Router는 특수 파일을 사용합니다. page.tsx는 경로 UI, layout.tsx는 지속되는 셸, loading.tsx는 Suspense 대체 UI, error.tsx는 오류 경계, not-found.tsx는 404 화면, route.ts는 API, middleware.ts는 엣지 로직을 담당합니다.
자주 묻는 질문
“App Router 파일 규칙” 강의는 무료인가요?
네 — “App Router 파일 규칙” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Academy 강의 전체를 잠금 해제할 수 있습니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“App Router 파일 규칙”에서 뭘 배우나요?
app/ 디렉터리와 page.tsx, layout.tsx, loading.tsx, error.tsx 파일의 역할을 알아봅니다. 브라우저에서 직접 실행하는 실습 코드로 React Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
React Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 React Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“App Router 파일 규칙” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 React Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 React Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.