Next.js는 파일 시스템 기반의 라우터 기능을 제공하며, App Router와 Pages Router가 있다. 구체적으로 비교 분석하기보다는 크게 App / Pages 라우터의 기본적인 폴더 구조와 경로에 대하여 정리를 해보았다.
✅ App directory
- app 폴더 하위에 모든 파일을 추가할 수 있다.
- 폴더명으로 경로를 정의하며, 폴더 안의
page.js또는route.js로 작성된 파일만 경로로써 사용할 수 있다.app/components/button.js ->
/components/button (X)
app/dashboard/page.js ->/dashboard (O)
app/dashboard/nav.js ->/dashboard/nav (X) - components, lib 등 app 폴더 하위에 포함 가능
(1) layout.tsx
- RootLayout
- 최상위 레이아웃으로 모든 페이지에서 공유됨
- 루트 레이아웃에서만
<html>,<body>태그를 포함 - app/layout.js는
pages/_app.js,pages/_document.js파일을 대체
// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}(2) page.tsx
- 웹 애플리케이션의 시작점이자, 루트
(/)경로 페이지
// app/page.tsx
export default function Page() {
return <h1>Hello, Next.js!</h1>
}✅ Pages directory
- pages 폴더 하위의 모든 폴더/파일명을 기반으로 경로로써 사용할 수 있다.
pages/index.tsx →
/
pages/about.tsx →/about
pages/content/index.tsx →/content - components, lib 등 pages 폴더 외부에 작성
(1) index.tsx
- 웹 애플리케이션의 시작점이자, 루트
(/)경로 페이지
// pages/index.tsx
export default function Page() {
return <h1>Hello, Next.js!</h1>
}(2) _app.tsx
- 공통 레이아웃과 전역 상태 관리 페이지
- 프로젝트 최상위 컴포넌트 역할
// pages/_app.tsx
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}(3) _documents.tsx
- SSR 시 사용되며, 초기 HTML과 CSS 구조를 정의
<html>,<body>등 전체 페이지의 구조와 메타 태그, 외부 스크립트, 글꼴 등을 설정
// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}참고
https://nextjs.org/docs/getting-started/installation#creating-directories
작성해주신 글 보고 차근차근 잘 따라가서 도움이 되었습니다!