Next.js Redirecting 가이드 정리

1. Redirecting 개요

Redirect는 사용자를 다른 URL로 보내는 동작입니다. 대표적인 사용 사례는 다음과 같습니다.

로그인 필요 페이지에서 인증되지 않은 사용자를 로그인 페이지로 이동
URL 구조 개편 시 기존 경로 → 신규 경로로 이동
특정 조건(AB 테스트, 국가/언어, 점검 모드 등)에 따라 경로 분기
외부 URL로 이동

Next.js(App Router)는 “어디에서 리다이렉트하느냐”에 따라 여러 방식을 제공합니다.

2. Server-side redirect (Server Components / Route Handlers / Server Actions)

2.1 `redirect()` / `permanentRedirect()` 사용

App Router에서는 next/navigation의 redirect, permanentRedirect를 사용해 서버에서 렌더링을 중단하고 다른 경로로 이동시킬 수 있습니다.

예시(인증 체크 후 로그인 페이지로):

import { redirect } from 'next/navigation'

export default async function Page() {
  const user = await getUser()

  if (!user) {
    redirect('/login')
  }

  return <div>Protected Page</div>
}

이런 방식은 “서버에서 조건을 판단하고 즉시 이동”해야 할 때 가장 단순합니다.
Server Actions / Route Handlers에서도 같은 계열 API를 사용할 수 있습니다.

redirect vs permanentRedirect는 “일시적/영구적 이동”을 의미합니다.
영구 리다이렉트는 SEO(검색엔진) 관점에서도 “이전 주소가 완전히 바뀌었다”는 신호로 활용됩니다.

3. Client-side redirect (Client Components)

클라이언트 컴포넌트에서는 서버용 redirect()를 그대로 쓰기 어렵기 때문에, 보통 useRouter()로 네비게이션을 수행합니다.

'use client'

import { useEffect } from 'react'
import { useRouter } from 'next/navigation'

export default function ClientRedirector() {
  const router = useRouter()

  useEffect(() => {
    router.replace('/login')
  }, [router])

  return null
}

push는 히스토리에 쌓이고, replace는 현재 히스토리를 대체합니다.
“이미 페이지가 그려진 뒤 이동”이므로, 인증/권한 같은 건 서버에서 처리하는 편이 UX가 깔끔한 경우가 많습니다.

4. next.config.js 기반 Redirects (정적/규칙 기반)

경로 변경(예: /old → /new)처럼 규칙이 명확하면, 앱 코드가 아니라 next.config.js에서 리다이렉트를 선언하는 방식이 적합합니다.

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/old',
        destination: '/new',
        permanent: true,
      },
    ]
  },
}

“서버 코드/페이지 코드에 분기 로직을 넣지 않고” URL 규칙만으로 처리 가능
마이그레이션, SEO 대응에 자주 사용

5. Middleware에서 Redirect (요청 전 단계에서 분기)

Edge Middleware에서 요청을 가로채 조건에 따라 NextResponse.redirect(...)로 분기할 수 있습니다.

로그인 보호
국가/언어 라우팅
점검 모드 등

(미들웨어는 앱의 가장 앞단에서 동작하므로, 자칫 과하게 쓰면 전체 성능에 영향을 줄 수 있어 “필요한 범위에만” 적용하는 것이 좋습니다.)

6. 선택 가이드

인증/권한/조건 분기(서버에서 판단 가능) → redirect() (Server)
UI 이벤트 뒤 이동(버튼 클릭 등) → useRouter().push/replace (Client)
URL 구조 개편/규칙 기반 매핑 → next.config.js redirects()
요청 전 단계에서 통일된 정책 적용 → Middleware redirect

7. 정리 및 팁

“가장 앞단(서버/미들웨어)”에서 판단할수록 UX가 깔끔하고 불필요한 렌더링이 줄어듭니다.
SEO가 걸린 URL 변경이라면 permanent 성격(영구 리다이렉트) 여부를 신중히 결정하세요.
리다이렉트가 많아지면 “어디에서 관리할지(코드 vs 설정)”를 일찍 정해두는 것이 유지보수에 유리합니다.

# Next.js Redirecting 가이드 정리