Next.JS에서의 라우팅

2025.1.6 화요일의 공부기록

React에서 라우팅은 react-router와 같은 라이브러리를 활용하여 컴포넌트를 만들고, 이를 페이지에서 import하여 구성한다. 반면, Next.js에서는 파일 기반 라우팅을 사용하므로 더 간편하게 라우팅을 구현할 수 있다.

---

Next.js의 파일 기반 라우팅

Next.js에서는 app 폴더 구조가 라우팅의 핵심이다.
라우팅하려는 경로는 app 폴더 하위에 해당 주소의 이름을 가진 폴더를 생성함으로써 구현된다.

기본 구조

1. 폴더 생성
   라우팅 경로와 동일한 이름의 폴더를 app 디렉토리 하위에 생성한다.

   • 예: /about 경로 → app/about/

2. 페이지 파일 추가
   폴더 안에 page.tsx 또는 page.jsx 파일을 추가해야 UI가 렌더링되고, 라우팅이 동작한다.

   • 파일이 없으면 해당 경로에 접속할 경우 404 에러가 발생한다.

3. 파일 구조 예시
   아래와 같은 구조로 폴더와 파일을 구성하면, 각 경로가 라우팅된다:

   app/
   ├── page.tsx         // 홈 경로 (/)
   ├── about/
   │   └── page.tsx     // /about
   └── contact/
       └── page.tsx     // /contact

코드 예시

app/about/page.tsx:

export default function AboutPage() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page for our Next.js app.</p>
    </div>
  );
}

이 코드는 /about 경로에서 렌더링되는 UI를 정의한다. Next.js는 자동으로 app/about/page.tsx를 라우팅과 연결한다.

---

하위 폴더와 깊은 라우팅

Next.js는 중첩된 폴더 구조를 지원하므로, 더 깊은 경로의 라우팅도 간편하다.
하위 폴더를 추가하여 URL의 경로를 계층적으로 관리할 수 있다.

예제 구조

다음과 같은 폴더 구조를 가진다고 가정한다:

app/
├── blog/
│   ├── page.tsx         // /blog
│   ├── post/
│   │   └── page.tsx     // /blog/post
│   └── category/
│       └── page.tsx     // /blog/category

동작 설명

• /blog → app/blog/page.tsx가 렌더링된다.
• /blog/post → app/blog/post/page.tsx가 렌더링된다.
• /blog/category → app/blog/category/page.tsx가 렌더링된다.

---

React와의 주요 차이점

특징	React (react-router)	Next.js
라우팅 방식	라우터 컴포넌트(<Routes>, <Route>) 사용	파일 기반 라우팅
라우팅 설정	컴포넌트와 경로를 매핑해야 함	폴더 구조에 따라 자동 라우팅
중첩 라우팅	수동으로 <Outlet> 등을 사용해 설정	하위 폴더와 page.tsx 파일로 자동 구현
설치 필요 여부	react-router 등 라우팅 라이브러리 설치 필요	Next.js 기본 기능으로 제공

---

주의점

• page 파일 필수:
  각 폴더에는 반드시 page.tsx 또는 page.jsx 파일이 있어야 UI가 렌더링되고, 라우팅이 동작한다.

• 404 에러 방지:
  폴더만 생성하고 page 파일을 추가하지 않으면, 해당 경로로 접속 시 404 에러가 발생한다.

---

커스터마이징된 404 에러 페이지 만들기

Next.js에서는 404 에러 페이지를 사용자 정의할 수 있다.
app 폴더 하위에 not-found.tsx 파일을 생성하면, 지정되지 않은 경로에 접속했을 때 해당 파일의 UI가 렌더링된다.

예제: not-found.tsx

export default function NotFound() {
  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>404 - Page Not Found</h1>
      <p>The page you are looking for does not exist.</p>
      <a href="/" style={{ color: 'blue', textDecoration: 'underline' }}>Go back to Home</a>
    </div>
  );
}

동작

• 사용자가 존재하지 않는 URL(예: /random-page)에 접속하면, Next.js는 not-found.tsx 파일을 찾아 렌더링한다.
• 위 코드를 통해 사용자 친화적인 에러 페이지를 제공할 수 있다.

---

Link 컴포넌트를 활용한 네비게이션

Next.js에서는 네비게이션 바와 같은 라우팅을 간편하게 구현할 수 있도록 Link 컴포넌트를 제공한다.
HTML의 <a> 태그 대신 Next.js의 <Link> 태그를 사용하면 클라이언트 사이드 라우팅으로 더 빠르고 효율적인 페이지 전환이 가능하다.

예제: Link를 이용한 네비게이션 바

1. Link 컴포넌트 임포트
   next/link에서 Link를 가져와 사용한다:

   import Link from 'next/link';

2. 기본 사용법
   아래는 네비게이션 바를 구현한 코드이다:

   import Link from 'next/link';
   
   export default function Navbar() {
     return (
       <nav style={{ display: 'flex', gap: '20px', padding: '10px', backgroundColor: '#f0f0f0' }}>
         <Link href="/">Home</Link>
         <Link href="/about">About</Link>
         <Link href="/contact">Contact</Link>
       </nav>
     );
   }

3. 결과
   위 코드는 아래와 같은 네비게이션 바를 생성한다:

   Home    About    Contact

   각 링크는 Next.js의 클라이언트 사이드 라우팅을 통해 빠르게 페이지를 전환한다.

---

Link와 <a> 태그의 차이점

특징	HTML <a> 태그	Next.js <Link> 태그
페이지 전환 방식	전체 페이지 새로고침	클라이언트 사이드 라우팅 (빠름)
SEO 지원	기본 SEO 지원	SEO 최적화와 경량화된 전환 지원
Next.js 호환성	추가적인 설정 필요	Next.js 기본 기능으로 제공