[Next.js 라우팅] 페이지 이동하는 4가지 방법 (App Router 실무 기준)

Next.js는 파일 기반 라우팅 시스템을 사용합니다.  
폴더 구조대로 URL이 자동으로 생성되며, 페이지 이동은 React의 SPA 원칙에 따라 빠르게 이루어집니다.

이번 글에서는 Next.js App Router 기준으로  
실무에서 가장 많이 쓰는 페이지 이동 방법 4가지를 소개합니다.

 

 

방법1) Link 컴포넌트 사용(기본)

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <Link href="/about">회사 소개 페이지로 이동</Link>
    </div>
  );
}

• a 태그처럼 보이지만 클라이언트 사이드로 빠르게 이동
• 브라우저 전체 새로고침 없이 부드럽게 이동

 

방법2) useRouter : 클라이언트 컴포넌트에서 동적 이동

'use client';

import { useRouter } from 'next/navigation';

export default function ButtonMove() {
  const router = useRouter();

  return (
    <button onClick={() => router.push('/dashboard')}>
      대시보드로 이동
    </button>
  );
}

• 버튼 클릭, 조건부 이동 등 프로그램적으로 이동할 때 사용
• App Router에서는 next/router 대신 next/navigation 사용!

 

방법3) redirect() : 서버 컴포넌트에서 강제 이동

// app/page.tsx (서버 컴포넌트)
import { redirect } from 'next/navigation';

export default function Home() {
  const isLogin = false;

  if (!isLogin) {
    redirect('/login');
  }

  return <div>로그인 성공! 환영합니다.</div>;
}

• 서버 컴포넌트에서 조건부로 바로 URL 리디렉션
• 로그인 체크, 권한 검사 등에 매우 유용

 

방법4) middleware에서 이동

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

export function middleware(request: NextRequest) {
  if (!request.cookies.get('accessToken') && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
}

• 로그인, 권한 확인, 국가별 리디렉션 등 요청 레벨에서 이동 가능
•  App Router에서는 강력 추천 패턴

 

 

 

---

 

 

 

Next.js에서는 상황에 따라 다양한 방법으로 페이지 이동을 할 수 있습니다.

- `<Link />`: 일반적인 링크 이동 (기본 추천)
- `useRouter().push()`: 버튼, 이벤트로 이동
- `redirect()`: 서버 컴포넌트에서 강제 이동
- `middleware`: 요청 단계에서 조건부 리디렉션

실무에서는 Link + useRouter 조합 + middleware 패턴을 가장 많이 씁니다.