쉬운 Nextjs 02 : 라우팅 시스템 완벽 가이드 정의부터 장단점까지

Next.js의 라우팅 시스템 완벽 가이드: 정의부터 장단점까지

목차

1. 라우팅의 정의
2. 다양한 라우팅 방식
3. Next.js의 라우팅 방식
4. Next.js 라우팅의 장점

1. 라우팅의 정의

라우팅은 "패스를 선택하는 프로세스"입니다. 이를 이해하기 위해서는 CSR(Client Side Rendering)과 SSR(Server Side Rendering)의 차이를 먼저 이해해야 합니다.

CSR vs SSR의 라우팅 차이

CSR의 경우

<!-- index.html -->
<div id="root"></div>
<script src="bundle.js"></script>

• 단일 HTML 파일과 번들링된 JavaScript
• 일반적으로 단일 엔드포인트

SSR의 경우

• 여러 페이지에 대한 여러 엔드포인트 존재
• 각 경로(Path)별로 다른 컨텐츠 제공

2. 다양한 라우팅 방식

2.1 명시적 라우팅 (React Router 방식)

// React Router 예시
import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

2.2 코드 기반 라우팅 (Express.js 방식)

// Express.js 예시
const app = express();

app.get('/', (req, res) => {
  res.send('Home Page Content');
});

app.get('/about', (req, res) => {
  res.send('About Page Content');
});

2.3 데코레이터 기반 라우팅 (NestJS 방식)

// NestJS 예시
@Controller('users')
export class UsersController {
  @Get('find-all')
  findAll(): string {
    return 'This is find all action';
  }
}

3. Next.js의 라우팅 방식

Next.js는 파일 시스템 기반 라우팅을 채택했습니다.

3.1 Pages Router (기존 방식)

pages/
  ├─ index.js        // '/' 경로
  ├─ about.js        // '/about' 경로
  └─ users/
      └─ [id].js     // '/users/1', '/users/2' 등

3.2 App Router (현재 방식)

app/
  ├─ page.js           // '/' 경로
  ├─ about/
  │   └─ page.js      // '/about' 경로
  └─ users/
      └─ [id]/
          └─ page.js  // '/users/1', '/users/2' 등

3.3 주요 파일 컨벤션

app/
  ├─ layout.js         // 레이아웃
  ├─ page.js           // 페이지
  ├─ loading.js        // 로딩 UI
  ├─ error.js          // 에러 UI
  └─ template.js       // 템플릿

4. Next.js 라우팅의 장점

4.1 직관성

• 폴더 구조가 곧 URL 구조
• 파일 위치만으로 라우팅 파악 가능

4.2 자동 코드 스플리팅

// 자동으로 처리되는 코드 스플리팅
// pages/about.js
export default function About() {
  return <h1>About Page</h1>
}

4.3 콜로케이션 원칙

app/
  └─ blog/
      ├─ page.js
      ├─ components/    // 블로그 관련 컴포넌트
      ├─ hooks/         // 블로그 관련 훅
      └─ utils/         // 블로그 관련 유틸리티

참고문헌

1. Next.js 공식 문서. "Routing", https://nextjs.org/docs/routing
2. React Router 공식 문서. "Getting Started", https://reactrouter.com/docs/en/v6
3. Express.js 공식 문서. "Routing", https://expressjs.com/en/guide/routing.html
4. NestJS 공식 문서. "Controllers", https://docs.nestjs.com/controllers
5. Vercel Blog. "Next.js App Router", https://vercel.com/blog/next-js-app-router

관련 리소스

1. Next.js GitHub: https://github.com/vercel/next.js
2. Next.js 예제: https://github.com/vercel/next.js/tree/canary/examples
3. Next.js Discord 커뮤니티: https://nextjs.org/discord

주의사항

• 이 글의 내용은 Next.js 14 버전을 기준으로 작성되었습니다.
• App Router는 Next.js 13 버전부터 도입된 새로운 라우팅 시스템입니다.
• 코드 예제들은 TypeScript를 지원하지만, 이해를 위해 JavaScript로 작성되었습니다.