반응형
Next.js 15에서는 app/ 디렉토리 기반 라우팅(App Router) 시스템이 기본이며, pages/ 디렉토리를 사용하는 구식 Pages Router와 구분됩니다. App Router를 사용할 경우 라우팅 시스템이 파일 시스템 기반으로 동작합니다. 아래에 엔트리 포인트와 라우팅 구성 방법을 설명드릴게요.
✅ 엔트리 페이지는 어디인가요?
Next.js 15에서 app/ 디렉토리 기반 라우팅을 사용할 경우:
- 기본적으로 app/page.tsx 또는 app/page.jsx 파일이 루트 경로(/)의 엔트리 페이지입니다.
bash
복사편집
your-project/ ├── app/ │ ├── page.tsx ← 루트 페이지 (http://localhost:3000) │ ├── about/ │ │ └── page.tsx ← /about 라우팅 │ └── layout.tsx ← 전체 앱의 레이아웃
✅ 라우팅 페이지를 만들려면?
app/ 디렉토리 하위에 디렉토리를 만들고 그 안에 page.tsx 또는 page.jsx를 만들면, 해당 경로에 라우팅됩니다.
예시: /about, /contact 라우팅 만들기
bash
복사편집
app/ ├── page.tsx ← 루트 경로 "/" ├── about/ │ └── page.tsx ← "/about" ├── contact/ │ └── page.tsx ← "/contact"
각 page.tsx는 아래처럼 컴포넌트를 export 해주면 됩니다.
tsx
복사편집
// app/about/page.tsx export default function AboutPage() { return <h1>About Us</h1>; }
✅ 공통 레이아웃 사용하고 싶다면?
app/layout.tsx를 만들면 모든 페이지에 공통으로 적용되는 레이아웃이 됩니다.
tsx
복사편집
// app/layout.tsx export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html> <body> <header>Header</header> {children} <footer>Footer</footer> </body> </html> ); }
✅ 서버 실행 및 확인
bash
복사편집
npm run dev
브라우저에서 다음을 확인해보세요:
- http://localhost:3000 → app/page.tsx
- http://localhost:3000/about → app/about/page.tsx
반응형
'web > Next.js' 카테고리의 다른 글
| Next.js의 API 페이지 기능 (API Router) (0) | 2025.05.04 |
|---|---|
| 📚 Next.js 9 vs Next.js 15 주요 개념 대응표 (0) | 2025.05.03 |
| Next.js 9 -> 15 버전 사이의 중요한 변화 (0) | 2025.05.03 |
| Next.js 13 이상에서는 app/ 디렉토리를 사용하는 App Router 방식에서 getServerSideProps를 지원하지 않습니다. (0) | 2025.05.03 |