[Next.js] Next.js 시작하기 : 폴더 구조와 라우팅 알아보자

이전 포스팅에서 Next.js 설치를 했었다.

2025.02.05 - [우당탕탕 개발/Next.js] - [Next.js]Next.js 시작하기 : 설치 먼저 해볼까?

[Next.js]Next.js 시작하기 : 설치 먼저 해볼까?

 

이번 포스팅에서는 폴더 구조와 라우팅에 대해 정리해보려고한다.

---

폴더 구조

Next.js 프로젝트를 생성하면 기본적으로 아래와 같은 폴더 구조가 만들어지는데

각 폴더가 어떠한 역할을 하는지 작성해 보자.

my-next-app/
├── src/               	
│   ├── app/     
│   │   ├── page.tsx   	
│   │   ├── layout.tsx 	
│   │   └── about/     	
│   │       └── page.tsx
│   ├── components/
│   └── lib/          
├── public/            	
└── package.json

 

src/app

Next.js 13부터 도입된 App Router 사용하는 폴더로 페이지, 레이아웃, 라우팅 파일이 들어있다.

예를 들어 아래와 같은 파일을 만들 수 있다.

app/
├── page.tsx                   # 홈 페이지 (/)
├── layout.tsx                 # 루트 레이아웃
├── about/                     # about 페이지 (/about)
│   └── page.tsx
└── blog/                      # blog 페이지 (/blog)
    ├── page.tsx               # 블로그 메인
    └── [id]/                  # 동적 라우팅 (/blog/post-1)
        └── page.tsx

 

*여기서 [slug]는 Next.js에서 동적 라우팅을 구현할 때 사용하는 거다.

[id] - 고유 식별자

[slug] - URL 문자열

[pid] - 상품 ID

[uid] - 사용자 ID

[category] - 카테고리

 

일반적으로 사용하는 네이밍을 알아두는 것도 나쁘지 않다고 생각한다.

src/components

재사용 컴포넌트를 모아두는 폴더로 아래와 같은 파일을 만들 수 있다.

components/
├── ui/                        # UI 컴포넌트
│   ├── Button.tsx
│   ├── Input.tsx
│   └── Select.tsx
├── layout/                    # 레이아웃 컴포넌트
│   ├── Header.tsx
│   ├── Navbar.tsx
│   └── Footer.tsx
└── common/                    # 공통 컴포넌트
    ├── Card.tsx
    └── Modal.tsx

 

src/lib

프로젝트의 유틸리티 함수를 저장하는 폴더로 아래와 같은 파일을 만들 수 있다.

lib/
├── utils/                     
│   ├── format.ts             # 날짜, 숫자 포맷팅 함수
│   └── validate.ts           # 유효성 검사 함수
├── api/                      
│   └── client.ts             # API 호출 관련 함수
└── hooks/                    
    └── useUser.ts            # 커스텀 훅

 

public/

이미지, 폰트 같은 정적 파일을 저장하는 폴더이다.

public/
├── images/		# 이미지 파일
└── fonts/		# 폰트 파일

 

라우팅 시스템

Next.js의 라우팅은 파일 시스템 기반으로 작동하는데, 폴더명이 URL 경로가 된다.

 

기본 라우팅

아래와 같이 page.tsx가 해당 경로의 UI를 표시한다.

app/
├── page.tsx          "/"
├── layout.tsx   
├── about/
│   └── page.tsx      "/about"
└── blog/
    └── page.tsx      "/blog"

 

 

동적 라우팅

위 폴더구조 src/app에서 말했듯이 [ ]를 사용해 구현한다.

app/
├── blog/
│   └── [id]/  			"/blog/1", "/blog/2"
│       └── page.tsx
└── posts/
    └── [slug]/         	"/posts/first-post"
    	└── page.tsx

 

 

[id] 사용:

숫자 기반으로 식별자에 사용 ex)"/blog/1", "/blog/2"

// app/blog/[id]/page.tsx
export default function Post({ params }: { params: { id: string } }) {
  return <h1>포스트: {params.id}</h1>
}

 

[slug] 사용:

URL 친화적인 문자열에 사용 ex)"/posts/first-post"

// app/posts/[slug]/page.tsx
export default function Post({ params }: { params: { slug: string } }) {
  return <h1>포스트: {params.slug}</h1>
}

 

 

다중 동적 라우팅

세그먼트 params 객체를 통해 접근 가능하며, 필요한 데이터를 동적으로 불러올 수 있다,

 

app/
└── shop/
    └── [category]/
        └── [id]/
            └── page.tsx

 

ex) "/shop/shoes/123", "/shop/clothes/456"

// app/products/[category]/[id]/page.tsx
export default function Product({ 
  params 
}: { 
  params: { 
    category: string
    id: string 
  } 
}) {
  return (
    <div>
      <h1>카테고리: {params.category}</h1>
      <h2>상품 ID: {params.id}</h2>
    </div>
  )
}

 

 

 

 

 

 

이렇게 Next.js의 폴더 구조와 라우팅 시스템에 대해 알아보았다.

처음 접했을 땐 복잡해 보였는데 블로그에 다시 한번 복습하다 보니

생각보다 체계적으로 구성되어 있는 것 같아서 관리가 쉬울 것 같다는 생각이 든다.

---

 

다음에는 서버 컴포넌트에 대해서 정리해 봐야겠다📝