[Next.js] 서버 컴포넌트 try-catch에서 redirect가 안 된다

서버 컴포넌트에서 api 요청 결과에 따라 redirect 경로를 설정하는 코드가 있었는데 try-catch로 감싸줬더니 오류가 발생했다.

 

 

Error: NEXT_REDIRECT at getRedirectError (webpack-internal:///(rsc)/./node_modules/next/dist/client/components/redirect.js:49:19) at redirect (webpack-internal:///(rsc)/./node_modules/next/dist/client/components/redirect.js:60:11) at ...

 

 

Next.js 공식 문서에 따르면 redirect가 NEXT_REDIRECT 오류를 발생시켜 try-catch 블록 내에서 사용하면 에러에 잡히게 된다는 것이다. 공식 문서에서도 try/catch 밖에서 사용해야 한다고 언급하고 있다... 

In Server Actions and Route Handlers, redirect should be called after the try/catch block.

 

 

redirect를 try-catch 밖에서 수행하거나 클라이언트에서 router로 처리하여 해결할 수 있다.

나는 try-catch 밖에서 수행하는 것을 선택했다.

 

 

기존 코드

  try {
    await fetch('...')
    redirect(A)
  } catch (error) {
    console.log(error)
    redirect(B)
  }

 

변경 코드

  let redirectURL = ''

  try {
    await fetch('...')
    redirectURL = A
  } catch (error) {
    console.log(error)
    redirectURL = B
  }

  redirect(redirectURL)

 

 

 

오류가 발생하고 나서야 공식 문서를 찾아보곤 했는데 앞으론 사용하기 전에 공식 문서를 꼼꼼히 읽어야겠다.