nextjs server action redirect 안됨 해결: 실무 중심 가이드

nextjs server action redirect 안됨 해결이 필요한 상황

nextjs server action redirect 안됨 해결 사례는 서버 액션으로 폼 제출 후 의도한 페이지로 이동되지 않을 때 발생합니다. 이 글에서는 원인 분석, 실무 적용 가능한 코드 예제, Edge/서버 환경별 차이, 그리고 배포 시 주의점을 정리하여 바로 적용 가능한 해결책을 제공합니다.

nextjs server action redirect 안됨 해결 핵심 개념

Server Action은 서버 사이드에서 직접 실행되는 함수로 폼 처리, 인증, DB 작업을 할 때 사용합니다. 하지만 Redirect가 동작하지 않는 경우는 주로 다음과 같습니다:

• 클라이언트 측 폼 전송 방식이 잘못되었거나 preventDefault가 남아 있음
• Response 타입(예: NextResponse.redirect)이 클라이언트에서 적절히 처리되지 않음
• Edge Runtime 또는 App Router 환경에서의 제한

핵심은 서버에서 반환한 Redirect 응답을 브라우저가 올바르게 수신하고 처리하도록 클라이언트 코드(혹은 폼 제출 방식)를 맞추는 것입니다.

nextjs server action redirect 안됨 해결 실무 예제

아래 예제는 App Router 환경에서 Server Action을 사용해 폼 제출 후 리디렉션을 수행하는 방법입니다. 중요한 포인트는 서버에서 NextResponse.redirect를 반환하고, 클라이언트는 폼 전송을 서버 액션으로 연결해 브라우저 리디렉션이 일어나도록 하는 것입니다.

// app/actions.ts (Server Action)
import { cookies } from 'next/headers'
import { redirect } from 'next/navigation'

export async function submitForm(data: FormData) {
  'use server'
  const name = data.get('name')?.toString() || ''
  // 서버 처리를 수행
  // 예: DB 저장, 쿠키 설정
  cookies().set('lastName', name)
  // 서버에서 클라이언트 측으로 즉시 리디렉션을 유도
  redirect('/success')
}

// app/page.tsx (Client Form)
import { submitForm } from './actions'

export default function Page() {
  return (
    <form action={submitForm} method="post">
      <input name="name" />
      <button type="submit">제출</button>
    </form>
  )
}

위 방식은 App Router와 Server Action의 권장 패턴입니다. 하지만 redirect가 동작하지 않을 때 아래 체크를 해보세요.

원인별 진단 및 해결 방법

• 폼 전송 방식 확인: form 요소에 action으로 server action을 지정했는가? method가 post로 설정되었는가?
• 서버 응답 타입 확인: redirect()를 사용하면 서버에서 클라이언트로 네비게이션 명령을 보냄. 응답을 직접 반환하는 다른 방식(예: JSON)을 사용하면 브라우저가 리디렉션을 수행하지 않음.
• 런타임 및 라우터 환경 확인: Edge runtime에서는 일부 API나 쿠키 세팅 방식이 다를 수 있음.

언제 쓰면 좋고 언제 피해야 할까

언제 쓰면 좋은가:

• 서버에서 인증/DB 작업 후 즉시 사용자 이동이 필요할 때
• SPA 방식에서 서버 주도 라우팅이 더 간단할 때

언제 피해야 하는가:

• 클라이언트 상태를 리다이렉트 전에 반드시 유지해야 하는 복잡한 UI 로직이 있을 때
• 외부 API 호출 후 복잡한 응답 처리가 필요하고 클라이언트 측에서 더 세밀한 오류 처리가 필요할 때

비교: 서버 액션 리디렉트 vs 클라이언트 리디렉트

실무 체크리스트

• form 요소에 action이 server action으로 지정되어 있는가?
• method가 post로 되어 있는가?
• 서버에서 redirect() 또는 NextResponse.redirect를 사용 중인가?
• Edge Runtime인지 Node Server인지 확인했는가?
• 브라우저 개발자도구의 네트워크 탭에서 서버 응답이 3xx인지 확인했는가?
• 클라이언트에서 preventDefault 또는 custom submit handler가 interfere 하지 않는가?

성능·보안·운영 주의점

• 성능: 불필요한 리디렉션은 라운드트립을 늘립니다. 가능한 경우 내부 상태 전환으로 처리하세요.
• 보안: 리디렉트 대상 URL을 외부 입력으로 바로 사용하지 마세요(오픈 리디렉션 취약점). 도메인/경로 화이트리스트 검증 필요.
• 운영: 배포 환경 간 차이(Edge vs Node)로 동작 차이가 발생할 수 있으니 스테이징에서 반드시 시나리오별 테스트를 수행하세요.

자주 묻는 질문

Q1: 서버 액션에서 redirect 대신 Response 반환을 하면 안 되나요? A1: Response로 직접 3xx 응답을 만들어 반환해도 동작할 수 있지만, App Router에서 권장되는 방법은 redirect() 헬퍼를 사용하는 것입니다. 브라우저가 3xx 응답을 예상하지 못하는 클라이언트 로직이 섞여 있다면 동작하지 않을 수 있습니다.

Q2: Edge Runtime에서는 redirect가 제한되나요? A2: Edge Runtime에서 일부 Node 전용 API가 제한됩니다. redirect 자체는 지원되지만 쿠키나 파일 시스템 접근 등은 달라질 수 있으므로 문서 확인이 필요합니다.

Q3: 폼이 리다이렉트 되지 않는데 네트워크에 200 응답만 찍혀요. 이유는? A3: 보통 form의 action이 client-side handler로 가로채이거나 fetch로 전송되어 서버에서 직접 3xx 응답을 보내지 않는 경우입니다. form action 방식으로 제출하거나 서버 액션이 3xx를 반환하게끔 수정하세요.

Q4: SPA 라우터(예: next/navigation의 useRouter)와 함께 쓰면 충돌하나요? A4: 클라이언트에서 useRouter().push를 사용하면 클라이언트 네비게이션이 실행됩니다. 서버 액션에서 redirect와 함께 사용 시 의도치 않은 중복 네비게이션이 발생할 수 있으니 패턴을 통일하세요.

정리

• Server Action 리디렉트 실패는 폼 전송 방식, 서버 응답 타입, 런타임 환경 차이에서 주로 발생합니다.
• App Router에서는 form action에 server action을 연결하고 서버에서 redirect()를 호출하는 것이 권장 패턴입니다.
• 배포 전 Edge/Node 환경 차이를 검증하고, 오픈 리디렉션 방지 등을 포함한 보안 검토를 하세요.
• 실무 체크리스트로 단계별 진단 후 빠르게 해결할 수 있습니다.