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 폴더 하위에 포함 가능
layout.tsx
- RootLayout
- 최상위 레이아웃으로 모든 페이지에서 공유됨
- 루트 레이아웃에서만, 태그를 포함
- 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>
)
}page.tsx
- 웹 애플리케이션의 시작점이자, 루트(/) 경로 페이지
// app/page.tsx
export default function Page() {
return <h1>Hello, Next.js!</h1>
}
프론트 엔드 시작하는 뉴비!