Next.js는 어떻게 파일 기반 라우팅이 가능할까

Next.js의 파일 기반 라우팅

Next.js에서 파일 기반 라우팅은 파일 시스템을 기반으로 URL 경로를 자동으로 생성하는 방식입니다.
즉, 파일이나 디렉토리 구조가 그대로 URL 경로로 매핑됩니다.

 

• 디렉토리에서 파일을 생성하면 파일 이름이나 디렉토리 구조에 따라 자동으로 URL이 생성됩니다.
• 컴파일 시 경로 자동 등록: Next.js는 빌드 과정에서 파일 시스템을 읽어, 각 파일을 경로로 자동으로 등록합니다.

 

 

내부적으로 React Router 사용할까?

❌Next.js는 React Router를 사용하지 않습니다.

대신 자체 라우팅 시스템을 통해 파일 기반 라우팅을 구현합니다.

 

Next.js의 파일 기반 라우팅이 빌드 시 자동 등록되는 과정

1. 파일 시스템 읽기:
   • Next.js 빌드 도중, app 또는 pages 디렉토리 구조를 스캔합니다.
   • 이때 파일 이름과 디렉토리 구조를 분석하여 경로를 정의합니다.
2. 라우팅 매핑 생성:
   • Next.js는 파일 시스템 구조를 바탕으로 각 파일을 라우트로 매핑합니다.
   • 예: app/about/page.tsx → /about 경로로 자동 등록.
3. 라우트 등록 파일 생성:
   • Next.js 내부적으로 각 경로에 대한 React 컴포넌트를 등록하는 코드가 생성됩니다.
   • 이 코드에서 각 경로에 대해 React 컴포넌트를 렌더링할 수 있도록 설정됩니다.
4. 번들링 및 최적화:
   • 각 페이지는 React 컴포넌트로 컴파일되고, 최적화된 JS 번들로 묶입니다.
   • 클라이언트 사이드와 서버 사이드 코드가 구분되어 최적화됩니다.

 

파일 기반 라우팅 내부 코드 예제

아래는 Next.js가 빌드 시 자동으로 생성하는 내부 라우팅 코드의 단순화된 예제입니다:

// Next.js 내부에서 빌드 시 자동으로 생성하는 라우팅 설정
const routes = {
  "/about": require("./app/about/page").default,
  "/contact": require("./app/contact/page").default,
};

// 라우트 핸들러
function handleRoute(path) {
  const Component = routes[path];
  if (Component) {
    return <Component />;
  }
  return <NotFound />;
}