Next.js의 라우팅 시스템/코드 레벨에서 이해하기

Next.js의 라우팅 시스템 이해하기

등장 배경, 동작 방식, 코드 레벨 구현까지

라우팅이란?

• 간단히 말하면 "어떤 URL을 요청했을 때 어떤 화면을 보여줄까"를 결정하는 과정.
• CSR은 하나의 HTML 파일만 있으므로, 자바스크립트 레벨에서 URL Path를 구분해야 함.
• SSR은 서버에서 여러 URL 경로에 대해 각각 다른 HTML을 반환해야 함.

라우팅 방식 비교

방식	예시	특징
명시적 라우팅	React-Router	직접 Route를 명시
코드 기반 라우팅	Express	코드로 라우트 등록
데코레이터 기반 라우팅	Nest.js	데코레이터로 라우트 선언
파일 기반 라우팅	Next.js	파일구조가 곧 라우트

• Next.js는 파일 기반 라우팅을 채택
  ➔ /pages 디렉터리의 폴더 및 파일 구조가 곧 URL 경로가 됨.

파일 기반 라우팅의 장점

• 직관적: 폴더/파일 구조를 보면 바로 URL을 유추할 수 있음
• 자동 코드 스플리팅: 페이지 단위로 필요한 JS만 로드됨
• Colocation(코로케이션): 컴포넌트와 라우팅을 같은 위치에 관리 가능

---

Next.js 라우팅, 코드 레벨에서는 어떻게 동작할까?

Next.js 내부는 기본적으로 Node.js HTTP 모듈을 기반으로 작동함.

기본 흐름

1. createServer를 호출해서 서버를 생성
2. server.listen을 통해 포트(예: 3000번)를 열고 대기
3. 클라이언트 요청이 오면, URL의 pathname을 분석해서 라우트를 찾음

const http = require('http');
const { matchRoute } = require('./router');

const server = http.createServer((req, res) => {
  const { url } = req;
  const html = matchRoute(url);

  res.writeHead(200, { 'Content-Type': 'text/html' });
  res.end(html);
});

server.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

 

 

matchRoute

• 전달받은 pathname에 대해 매칭되는 라우트를 찾음
• 루트 경로(/)라면 바로 index.js 반환
• 일반 경로라면 등록된 routes에서 해당 경로를 찾아 HTML 반환
• Dynamic Route([id].js 같은 경우)에서는 params를 추출해서 넘김

const routes = {
  '/': '<h1>Home Page</h1>',
  '/about': '<h1>About Page</h1>',
  '/posts/[id]': (id) => `<h1>Post ${id}</h1>`,
};

function matchRoute(pathname) {
  if (routes[pathname]) {
    return typeof routes[pathname] === 'function' ? routes[pathname]() : routes[pathname];
  }

  // Dynamic Route Handling
  const dynamicMatch = /^\/posts\/(\w+)$/.exec(pathname);
  if (dynamicMatch) {
    const [, id] = dynamicMatch;
    return routes['/posts/[id]'](id);
  }

  return '<h1>404 Not Found</h1>';
}

 

buildRoutes

• 서버 실행 전 routes 테이블을 빌드
• 디렉터리 탐색을 통해 파일과 URL 경로를 매칭
• 폴더면 재귀 호출, 파일이면 등록

const fs = require('fs');
const path = require('path');

const routes = {};

function buildRoutes(dir, baseRoute = '') {
  const entries = fs.readdirSync(dir);

  entries.forEach(entry => {
    const fullPath = path.join(dir, entry);
    const stat = fs.statSync(fullPath);

    if (stat.isDirectory()) {
      buildRoutes(fullPath, baseRoute + '/' + entry);
    } else if (stat.isFile() && entry.endsWith('.js')) {
      const routePath = baseRoute + '/' + entry.replace('.js', '');
      routes[routePath === '/index' ? '/' : routePath] = fullPath;
    }
  });
}

// Example Usage
buildRoutes(path.join(__dirname, 'pages'));
console.log(routes);

정리

Next.js는 CSR의 한계를 극복하고 SSR의 복잡성을 추상화한 프레임워크이다.
특히 파일 기반 라우팅 덕분에 개발자는 복잡한 설정 없이 빠르게 안정적인 웹 앱을 개발할 수 있다.
Next.js의 라우팅은 서버 레벨에서 path를 분석하고 매칭하는 구조로 되어 있어, 직관적이면서도 고성능을 제공한다.

 

---

- 이전글

https://dragon-developer.tistory.com/77

Nextjs 사용 이유