[개념부터 Nextjs] Redirecting

     

목차

 

 

 

각 메소드별 상태 코드

useRouter	Perform a client-side navigation	Components	N/A
redirects in next.config.js	Redirect an incoming request based on a path	next.config.js file	307 (Temporary) or 308 (Permanent)
NextResponse.redirect	Redirect an incoming request based on a condition	Middleware	Any

 

 

 

redirects in next.config.js

next.config.js 파일의 redirects 옵션을 사용하면 들어오는 요청 경로를 다른 목적지 경로로 리디렉션할 수 있습니다. 이는 페이지의 URL 구조를 변경하거나 미리 알려진 리디렉션 목록이 있는 경우 유용하다.

redirects는 경로, 헤더, 쿠키 및 쿼리 매칭을 지원하여 들어오는 요청을 기반으로 사용자를 리디렉션할 수 있는 유연성을 제공한다.

redirects를 사용하려면 next.config.js 파일에 옵션을 추가하면 된다.

 

module.exports = {
  async redirects() {
    return [
      // Basic redirect
      {
        source: '/about',
        destination: '/',
        permanent: true,
      },
      // Wildcard path matching
      {
        source: '/blog/:slug',
        destination: '/news/:slug',
        permanent: true,
      },
    ]
  },
}

 

 

ex) 페이지 경로 변경 (URL 리팩토링)

• 예전 주소 /about → 새 주소 /company 로 바뀌었을 때
• 예전 링크/북마크를 눌러도 새 페이지로 가도록 보장
• SEO 보존을 위해 permanent: true (301 리다이렉트) 사용

ex) 서비스 이전 / 마이그레이션

 

• /blog/:slug → /news/:slug 로 경로 구조 변경
• 구 버전 URL이 검색엔진에 남아 있어도 새 주소로 안내

 

 

Middleware에서 NextResponse.redirect

Middleware는 요청이 완료되기 전에 코드를 실행할 수 있게 합니다. 그런 다음 들어오는 요청을 기반으로 다른 URL로 리디렉션할 수 있다. 이는 조건(예: 인증, 세션 관리 등)에 따라 사용자를 리디렉션하거나 대규모 리디렉션이 있는 경우 유용하다.

 

예를 들어, 사용자가 인증되지 않은 경우 /login 페이지로 리디렉션하려면 다음과 같이 한다.

import { NextResponse, NextRequest } from 'next/server'
import { authenticate } from 'auth-provider'
 
export function middleware(request: NextRequest) {
  const isAuthenticated = authenticate(request)
 
  // If the user is authenticated, continue as normal
  if (isAuthenticated) {
    return NextResponse.next()
  }
 
  // Redirect to login page if not authenticated
  return NextResponse.redirect(new URL('/login', request.url))
}
 
export const config = {
  matcher: '/dashboard/:path*',
}

 

 

 

 

브라우저 히스토리 vs 리다이렉트의 차이는 무엇일까?

1. 브라우저 히스토리 변경 (History API)

• 주체: 클라이언트(JS)
• 수단: window.history.pushState(), window.history.replaceState(), 또는 Next.js의 router.push() / router.replace()
• 특징:
  1. 페이지 새로고침 없음 (SPA 네비게이션)
  2. URL만 변경하고, 필요한 경우 클라이언트가 데이터 요청
  3. HTTP 요청/응답 사이클 없음 (단, 새 데이터 필요 시 fetch/JSON 요청은 발생 가능)
  4. HTTP 상태코드 없음 → SEO나 크롤러는 이 이동을 알 수 없음
• 사용 예:
  • 로그인 후 “내 정보” 페이지로 이동
  • 탭 메뉴 전환
  • 필터 적용 시 ?category=food처럼 URL만 갱신

---

2. 리다이렉트 (Redirect)

• 주체: 서버(또는 브라우저)
• 수단:
  • 서버 응답: HTTP 3xx (301, 302, 307, 308 등)
  • JS 코드: location.href = '/new-page' (풀 페이지 로드)
• 특징:
  1. 페이지 새로고침 발생
  2. 서버가 새로운 URL을 응답 → 브라우저가 해당 URL로 다시 요청
  3. HTTP 상태코드 포함 (301, 302, 307, 308)
  4. SEO/검색엔진이 인식 가능 (특히 301, 308은 영구 이동)
  5. 요청 메서드 유지 여부는 상태코드 종류에 따라 다름 (307/308은 유지)
• 사용 예:
  • /old-page 요청 시 /new-page로 영구 이동 (301)
  • 인증 안 된 사용자가 /dashboard 접근 시 /login으로 보내기 (302)
  • API 버전 변경 시 POST 요청 그대로 다른 엔드포인트로 보내기 (307/308)

 

 

300번대 상태 코드에 대한 자세히 이해하기

https://inpa.tistory.com/entry/HTTP-%F0%9F%8C%90-3XX-Redirection-%EC%83%81%ED%83%9C-%EC%BD%94%EB%93%9C-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

🌐 3XX (Redirection) 상태 코드 - 총정리 모음