Next.js의 라우팅 시스템 이란

1. 기본 용어 설명

1.1 주요 용어

• 라우팅(Routing): 웹 애플리케이션에서 URL에 따라 다른 페이지를 보여주는 시스템
• 페이지(Page): Next.js에서 route와 연결된 React 컴포넌트
• 동적 라우팅(Dynamic Routing): URL 파라미터를 사용하여 동적으로 페이지를 생성하는 방식
• Middleware: 페이지 렌더링 전에 실행되는 코드
• SSR(Server Side Rendering): 서버에서 페이지를 렌더링하는 방식
• CSt Side Rendering: 브라우저에서 페이지를 렌더링하는 방식

1.2 Next.js 라우팅 흐름도

 

2. File-based 라우팅 시스템

2.1 기본 구조 설명

pages/
├── index.tsx        # 홈페이지 (/)
├── about.tsx        # 정적 페이지 (/about)
├── posts/
│   ├── index.tsx    # 게시글 목록 (/posts)
│   └── [id].tsx     # 동적 라우팅 (/posts/1, /posts/2)
└── _app.tsx         # 전역 레이아웃

2.2 기본 페이지 구현

// pages/index.tsx - 홈페이지
import type { NextPage } from 'next';// NextPage: Next.js의 페이지 타입

const Home: NextPage = () => {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
    </div>
  );
};

export default Home;

 

3. Dynamic 라우팅 상세 설명

3.1 동적 라우팅이란?

URL의 일부를 변수로 사용하여 동적으로 페이지를 생성하는 방식입니다.

// pages/posts/[id].tsx
import { GetServerSideProps, NextPage } from 'next';

// Post 타입 정의
interface Post {
  id: string;
  title: string;
  content: string;
}

// Props 타입 정의
interface PostPageProps {
  post: Post;
}

const PostPage: NextPage<PostPageProps> = ({ post }) => {
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
};

// 서버 사이드 데이터 페칭
export const getServerSideProps: GetServerSideProps = async (context) => {
  const { id } = context.params as { id: string };

// API 호출
  const response = await fetch(`/api/posts/${id}`);
  const post = await response.json();

  return {
    props: { post }
  };
};

export default PostPage;

 

4. Nested 라우팅 (중첩 라우팅)

4.1 중첩 라우팅 구조 설명

중첩 라우팅은 URL과 컴포넌트 구조를 계층적으로 구성하는 방식입니다.

// components/layouts/DashboardLayout.tsx
import { ReactNode } from 'react';

interface DashboardLayoutProps {
  children: ReactNode;
}

export default function DashboardLayout({ children }: DashboardLayoutProps) {
  return (
    <div className="dashboard-layout">
      <nav>
        <Link href="/dashboard">Dashboard</Link>
        <Link href="/dashboard/settings">Settings</Link>
      </nav>
      <main>{children}</main>
    </div>
  );
}

 

5. Catch-all 라우팅

5.1 Catch-all 라우팅이란?

여러 단계의 동적 경로를 한 번에 처리할 수 있는 라우팅 방식입니다.

// pages/docs/[...slug].tsx
import { useRouter } from 'next/router';

const DocsPage = () => {
  const router = useRouter();
  const { slug } = router.query as { slug: string[] };

  return (
    <div>
      <h1>Documentation</h1>
      <p>Current path: {slug.join('/')}</p>
    </div>
  );
};

export default DocsPage;

 

6. Middleware를 활용한 라우팅 제어

6.1 Middleware란?

페이지가 렌더링되기 전에 실행되는 코드로, 인증, 리디렉션 등을 처리할 수 있습니다.

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
// 현재 요청 URL 확인
  const { pathname } = request.nextUrl;

// 인증 토큰 확인
  const token = request.cookies.get('auth-token');

// 보호된 라우트 체크
  if (pathname.startsWith('/dashboard') && !token) {
// 로그인 페이지로 리디렉션
    return NextResponse.redirect(new URL('/login', request.url));
  }

// 정상 진행
  return NextResponse.next();
}

// middleware 설정
export const config = {
  matcher: [
    '/dashboard/:path*',
    '/profile/:path*'
  ]
};

 

7. 성능 최적화

7.1 Link 컴포넌트와 프리페칭

import Link from 'next/link';

// Link 컴포넌트는 자동으로 프리페칭을 수행합니다
const Navigation = () => {
  return (
    <nav>
      <Link
        href="/about"
        prefetch={true}// 기본값은 true
      >
        About Us
      </Link>
    </nav>
  );
};

7.2 동적 임포트

import dynamic from 'next/dynamic';

// 필요할 때만 컴포넌트를 로드
const DynamicComponent = dynamic(
  () => import('../components/HeavyComponent'),
  {
    loading: () => <p>Loading...</p>,
    ssr: false// 서버 사이드 렌더링 비활성화
  }
);

 

8. 용어 정리

8.1 Next.js 라우팅 관련 주요 용어

• pathname: 현재 URL의 경로 부분
• query: URL의 쿼리 파라미터
• asPath: 브라우저에 표시되는 실제 경로
• shallow routing: 데이터 페칭 없이 URL만 변경하는 라우팅
• prefetching: 페이지를 미리 로드하는 최적화 기법

8.2 주요 API 및 훅

• useRouter: Next.js의 라우팅 기능을 사용하기 위한 훅
• getStaticProps: 정적 페이지 생성을 위한 데이터 페칭
• getServerSideProps: 서버 사이드 렌더링을 위한 데이터 페칭
• getStaticPaths: 동적 라우팅의 경로 생성

이러한 Next.js의 라우팅 시스템을 잘 이해하고 활용하면, 복잡한 웹 애플리케이션도 효율적으로 구조화하고 관리할 수 있습니다. 특히 미들웨어를 통한 라우팅 제어는 인증, 권한 관리, 리디렉션 등 다양한 요구사항을 깔끔하게 처리할 수 있게 해줍니다.