Next.js에서 동적 라우팅 구현 시 403 에러 해결법

사용자가 등록한 데이터 수정을 위해 Next.js의 동적 라우팅을 사용하기로 했다.

이때, 해당 데이터의 고유번호를 이용해 URL을 구성하기로 결정했기 때문에
이를 위해 Next.js의 동적 라우팅 기능을 사용했다.
URL을 만들 경로 아래에 [id].jsx 페이지를 만들고, useRouter 객체를 생성해 다음과 같이 설정했다.

그렇지만 자꾸 페이지를 찾을 수 없다는 오류가 났다.

/addpatient/[id].js도 안 되고, /addpatient/[id]/index.js 도 안 됐다.
물론 Next.js 버전 (9.5.0 버전 이상이어야 동적 라우팅을 사용할 수 있다고 한다) 문제도 아니었다.

문제는 next.config.js의 리다이렉트 설정에 있었다.

백엔드 서버와의 통신을 위해 위와 같이 리다이렉트 설정을 해 두었다.
위 설정대로라면, 모든 요청이 http://localhost:8080으로 리다이렉트된다.

그래서 /addpatient/[id]와 같은 동적 라우트에 대한 요청도 백엔드 서버로 전달되고 있었다.
의도한 대로라면 이 동적 URL 요청은 Next.js 애플리케이션 내에서 처리되었어야 한다.
그러나 위 리다이렉트 설정 때문에 백엔드 서버가 동적 URL 요청을 받게 되었고, 이것은 백엔드 서버에서 처리하라고 설정해 둔 URL 패턴인 /api/v1/**와는 다른  URL 형식이었다.
그렇기 때문에 전달받은 URL을 처리할 수 없어 403 에러가 발생한 것이다.

다음과 같이 수정하면, api URL에 접근할 때만 백엔드 서버로 리다이렉트되므로 문제가 해결된다.

이제 동적 라우트에 대한 요청은 백엔드 서버로 전달되지 않는다.

반면 고정 URL 요청에 대해서는 Next.js 애플리케이션 내부에서 index 파일을 이용해 처리할 수 있다.
그래서 백엔드 서버로의 리다이렉트가 발생하지 않아 문제가 발생하지 않았던 것이다.