넥스트 Next.js
2. Next.js 15의 페이지(Page)와 파일 기반 라우팅 시스템
안녕하세요! 태마입니다.
Next.js 기초 강좌입니다.
강좌의 경우
1. 주제 간단 정리
2. 상세 주제 정리
으로 이루어져 있습니다.
넥스트 Next.js
포스팅 시작하겠습니다 :)
1. 주제 간단 정리
1. Next.js 15의 파일 기반 라우팅이란?
Next.js 15에서는 App Router 방식이 기본 적용되며, 기존의 pages/ 디렉토리가 아닌 app/ 디렉토리를 사용하여 라우팅을 구성한다.
즉, 파일 및 폴더 구조만으로 자동으로 URL을 생성하는 방식이다.
📌 Next.js 15 라우팅 특징
✔ 파일명 = 경로(URL) → app/about/page.tsx → /about으로 자동 매핑
✔ 서버 컴포넌트 활용 → 기존의 getServerSideProps 없이도 SSR 지원
✔ 레이아웃 기능 제공 → layout.tsx를 사용하여 공통 UI 적용
✔ 중첩 라우팅(Nested Routing) → 폴더 구조만으로 중첩 경로 생성 가능
✔ 다이나믹 라우트(Dynamic Routes) 지원 → [id] 폴더를 활용한 동적 페이지 가능
2. Next.js 15의 페이지 및 폴더 구조
다음과 같은 파일 및 폴더 구조를 만들면 자동으로 해당 경로가 생성된다.
my-next-app/
├── app/
│ ├── layout.tsx # 모든 페이지에 적용되는 레이아웃
│ ├── page.tsx # 홈 페이지 ("/")
│ ├── about/ # "/about" 페이지
│ │ ├── page.tsx # "/about"의 메인 페이지
│ ├── blog/ # "/blog" 페이지
│ │ ├── page.tsx # "/blog"
│ │ ├── [id]/ # 다이나믹 라우트 ("/blog/:id")
│ │ │ ├── page.tsx # "/blog/:id"
│ ├── api/ # API Routes ("/api" 경로)
│ ├── styles/ # 글로벌 스타일 폴더
├── public/ # 정적 파일 (이미지, 폰트 등)
├── next.config.js # Next.js 설정 파일
├── package.json # 프로젝트 설정 및 의존성 관리
└── README.md # 프로젝트 설명 파일📌 파일 구조만으로 자동으로 라우팅이 이루어짐!
📌 폴더 내 page.tsx 파일이 해당 URL의 엔드포인트가 됨!
3. 기본적인 페이지 생성 및 라우팅
✅ 1) 홈 페이지 (app/page.tsx)
export default function Home() {
return (
<main>
<h1>🚀 Next.js 15 홈 페이지</h1>
</main>
);
}📌 브라우저에서 http://localhost:3000에 접속하면 해당 페이지가 렌더링됨!
✅ 2) About 페이지 (app/about/page.tsx)
export default function About() {
return (
<main>
<h1>📄 About 페이지</h1>
</main>
);
}📌 브라우저에서 http://localhost:3000/about로 이동하면 /about 페이지가 렌더링됨!
✅ 3) 중첩 라우팅 (Nested Routing) – /blog 페이지 (app/blog/page.tsx)
export default function Blog() {
return (
<main>
<h1>📝 블로그 메인 페이지</h1>
</main>
);
}📌 브라우저에서 http://localhost:3000/blog로 이동하면 블로그 페이지가 렌더링됨!
✅ 여기까지 Next.js 15에서의 파일 기반 라우팅 개념과 기본 페이지 생성을 배웠습니다!
👉 "그렇다면, Next.js 15에서는 동적 라우팅(Dynamic Routes)과 레이아웃(Layout)을 어떻게 활용할까?"
✅ 2부에서 다이나믹 라우팅과 레이아웃 적용법을 배워봅시다!
2. 상세 주제 정리
1. 다이나믹 라우팅(Dynamic Routes) – URL에 변수 넣기
✅ Next.js 15에서는 [](대괄호)로 다이나믹 경로를 생성할 수 있다.
예를 들어, /blog/:id 같은 동적 페이지를 만들려면 app/blog/[id]/page.tsx를 생성하면 된다.
✅ 다이나믹 라우트 생성 (app/blog/[id]/page.tsx)
interface BlogPostProps {
params: { id: string };
}
export default function BlogPost({ params }: BlogPostProps) {
return (
<main>
<h1>📝 블로그 게시글: {params.id}</h1>
</main>
);
}📌 브라우저에서 http://localhost:3000/blog/1로 이동하면 "블로그 게시글: 1"이 표시됨!
📌 파일명 [id]가 URL의 변수 역할을 함!
2. 레이아웃(Layout) 적용 – 공통 UI 유지하기
Next.js 15에서는 layout.tsx 파일을 이용하여 모든 페이지에 적용할 공통 UI를 만들 수 있다.
예를 들어, 네비게이션 바(Navbar)나 푸터(Footer)를 모든 페이지에서 유지하고 싶을 때 유용하다.
✅ 공통 레이아웃 (app/layout.tsx)
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="ko">
<body>
<nav>
<a href="/">홈</a> | <a href="/about">소개</a> | <a href="/blog">블로그</a>
</nav>
{children}
</body>
</html>
);
}
📌 모든 페이지에 네비게이션 바가 자동으로 추가됨!
📌 기존 React의 Layout 컴포넌트와 유사하지만, Next.js 15에서는 layout.tsx를 통해 자동 적용됨!
✅ 여기까지 Next.js 15의 다이나믹 라우팅과 레이아웃 적용 방법을 배웠습니다!
👉 "그렇다면, Next.js 15에서는 API Routes를 어떻게 활용할까?"
✅ 다음 회차에서 Next.js 15의 API Routes와 서버리스 기능을 배워봅시다!