Next.js Project Structure – Nextjs 한글 문서
app |
App Router |
|---|---|
pages |
Pages Router |
public |
정적 자산을 제공 |
src |
선택적 애플리케이션 소스 폴더 |
| Next.js | Description |
|---|---|
next.config.js |
Next.js 구성 파일 |
package.json |
프로젝트 종속성과 스크립트 |
instrumentation.ts |
OpenTelemetry 및 계측 파일 |
middleware.ts |
Next.js 요청 미들웨어 |
.env |
환경 변수 |
.env.local |
로컬 환경 변수 |
.env.production |
프로덕션 환경 변수 |
.env.development |
개발 환경 변수 |
.eslintrc.json |
ESLint 구성 파일 |
.gitignore |
Git에서 무시할 파일 및 폴더 |
next-env.d.ts |
Next.js를 위한 TypeScript 선언 파일 |
tsconfig.json |
TypeScript 구성 파일 |
jsconfig.json |
JavaScript 구성 파일 |
App Router와 Pages Router가 존재App Router는 React의 최신 기능을 사용할 수 있는 Pages Router의 발전된 버전이므로, App Router를 사용하는 것을 권장 (공식 문서에서도 그렇게 적혀 있음)
App Router가 Pages Router보다 우선순위가 높음 → 혼란을 피하기 위해 하나의 라우터만 사용하는 것이 좋다.app 디렉토리 (with App Router)
Next.js는 기본적으로 파일 시스템 라우팅을 사용하므로, 애플리케이션의 라우트는 파일 구조에 의해 결정됨
app 디렉토리에 layout.tsx와 page.tsx 파일 추가
/)를 방문할 때 렌더링됨// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
// app/page.tsx
export default function Page() {
return <h1>Hello, Next.js!</h1>
}
public 폴더public 디렉토리 내의 파일은 기본 URL(/)을 기준으로 코드에서 참조 가능