Next.js 15의 강력한 라우팅 시스템: 파일 시스템 기반 라우팅의 진화

Next.js 15는 파일 시스템 기반 라우팅 시스템을 더욱 발전시켜 개발자의 생산성을 높이고, 더욱 유연하고 직관적인 라우팅 경험을 제공합니다. 이번 포스팅에서는 Next.js 15의 라우팅 시스템에 대해 심층적으로 살펴보고, 다양한 예시와 함께 실제 활용 방법을 상세하게 설명합니다.

Next.js 라우팅의 기본 개념

Next.js는 파일 시스템을 기반으로 라우팅을 구성하는 독특한 방식을 채택합니다. 즉, pages 디렉토리 내에 생성하는 파일의 이름과 경로가 곧 URL 경로가 됩니다. 이러한 방식은 직관적이고 유지보수가 용이하며, 컴포넌트 기반 개발 방식과 잘 어울립니다.

// pages/about.js
function AboutPage() {
  return <h1>About Us</h1>;
}

위 코드는 /about URL에 대한 페이지를 정의합니다.

 

주요 특징 및 변경점

• App Router: Next.js 13에서 도입된 App Router는 Next.js 15에서 더욱 안정화되었으며, 데이터 페칭, 서버 사이드 렌더링 등 다양한 기능을 제공합니다.
• 파일 시스템 기반 라우팅: 파일 시스템 기반 라우팅은 여전히 유효하며, App Router와 함께 사용하여 더욱 복잡한 라우팅 시나리오를 구현할 수 있습니다.
• 동적 라우트: [id]와 같은 특수 문자를 사용하여 동적 URL을 생성하고, 해당 URL에 맞는 데이터를 가져올 수 있습니다.
• 중첩 라우트: 폴더 구조를 활용하여 중첩된 라우트를 구성할 수 있습니다.
• 레이아웃: _app.js 파일을 통해 모든 페이지에 적용되는 레이아웃을 구성할 수 있습니다.
• Data Fetching: getStaticProps, getServerSideProps, getStaticPaths 등 다양한 데이터 페칭 방법을 제공하여 라우트에 필요한 데이터를 효율적으로 가져올 수 있습니다.
• Link 컴포넌트: Link 컴포넌트를 사용하여 페이지 간 이동을 관리하고, 클라이언트 사이드 네비게이션을 수행할 수 있습니다.
• Router 객체: useRouter 훅을 통해 라우터 객체에 접근하여 현재 라우트 정보를 얻거나, 프로그램 방식으로 라우트를 변경할 수 있습니다.

다양한 라우팅 예시

1. 동적 라우트와 데이터 페칭

// pages/posts/[id].js
export async function getStaticPaths() {
  const paths = [{ params: { id: '1' } }, { params: { id: '2' } }];
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const { id } = params;
  const res = await fetch(`https://api.example.com/posts/${id}`);
  const post = await res.json();
  return { props: { post } };
}

function Post({ post }) {
  return <h1>{post.title}</h1>;
}

위 코드는 동적 라우트를 사용하여 게시글 상세 페이지를 구현합니다. getStaticPaths에서 미리 생성할 페이지 경로를 정의하고, getStaticProps에서 해당 경로에 맞는 데이터를 가져옵니다.

 

2. 중첩 라우트와 레이아웃

 

pages
  products
    index.js // /products
    [id].js // /products/[id]
  _app.js

// components/Layout.js
function Layout({ children }) {
  return (
    <div>
      <header>Header</header>
      <main>{children}</main>
      <footer>Footer</footer>
    </div>
  );
}

위 코드는 products 폴더 아래에 중첩된 라우트를 구성하고, _app.js 파일에서 모든 페이지에 적용되는 레이아웃을 정의합니다.

 

3. App Router를 활용한 복잡한 라우팅

// app/page.js
import { useRouter } from 'next/router';

export default function Page() {
  const router = useRouter();
  const { query } = router;

  return (
    <div>
      {/* query를 이용하여 동적 데이터 처리 */}
    </div>
  );
}

App Router를 사용하면 더욱 유연하고 복잡한 라우팅을 구현할 수 있습니다. useRouter 훅을 통해 라우터 객체에 접근하여 현재 라우트 정보를 얻거나, 프로그램 방식으로 라우트를 변경할 수 있습니다.

Next.js 라우팅의 장점

• 직관적인 파일 시스템 기반 라우팅: 파일 구조와 URL 구조가 일치하여 이해하기 쉽고 유지보수가 용이합니다.
• 강력한 데이터 페칭 기능: getStaticProps, getServerSideProps 등을 통해 다양한 방식으로 데이터를 가져올 수 있습니다.
• 서버 사이드 렌더링: SEO에 유리하고 빠른 초기 로딩을 제공합니다.
• 클라이언트 사이드 네비게이션: Link 컴포넌트를 사용하여 부드러운 페이지 전환을 구현할 수 있습니다.
• 유연한 라우팅 설정: App Router를 통해 더욱 복잡한 라우팅 시나리오를 구현할 수 있습니다.

결론

Next.js 15의 라우팅 시스템은 파일 시스템 기반 라우팅의 장점을 유지하면서 App Router를 통해 더욱 강력하고 유연한 기능을 제공합니다. 이를 통해 개발자는 더욱 빠르고 효율적으로 웹 애플리케이션을 개발할 수 있습니다.

심층적인 학습을 위한 추가 주제

• 라우트 가드: 특정 라우트에 접근하기 전에 조건을 검사하는 방법
• 동적 라우트의 다양한 활용: 다중 파라미터, 옵셔널 파라미터 등
• Custom Server: 커스텀 서버를 사용하여 라우팅을 설정하는 방법
• Nest.js와 다른 프레임워크와의 비교
• 라우팅 성능 최적화
• Next.js 생태계와의 연동