Next.js 경로 끝 슬래시(/) (feat. 308 redirect)

Next.js 기반 프로젝트를 개발하다가, **개발자도구(Network 탭)**에서 이상한 점을 발견했습니다.
동일한 API 요청을 보냈다고 생각했는데, 어떤 요청은 한 번만,
어떤 요청은 두 번 호출되는 것이었습니다.

예를 들어 아래와 같은 두 가지 경로가 있었습니다:

• /api/r-auth/?paramList=A&paramList=B
• /api/r-auth?paramList=A&paramList=B

슬래시 하나 차이인데, 서버 요청은 다르게 기록되고 있었고,
심지어 HTTP 308 리디렉션까지 일어나는 걸 보게 됐습니다.

 

■ 원인 분석 – trailingSlash 설정

저의 Next.js의 next.config.js에는 아래와 같은 설정이 있습니다:

// next.config.js
module.exports = {
  trailingSlash: true, // or false
};

설정 값의미예시

true	경로 끝에 슬래시 / 붙임	/about → /about/
false (기본값)	슬래시 없이 사용	/about/ → /about

 

trailingSlash: true로 설정하면,
슬래시가 없는 URL은 무조건 슬래시 있는 형태로 리디렉션됩니다.

즉, 다음 요청은 308을 유발합니다:

fetch('/api/r-auth?paramList=A') // ❌ → 308 → /api/r-auth/?paramList=A

 

공식문서: trailingSlash 옵션 – Next.js 공식 문서

next.config.js: trailingSlash | Next.js

 

■ 해결방법

• trailingSlash: true → 모든 경로 끝에 / 필수
• trailingSlash: false (기본값) → 슬래시 없는 URL 사용

(여담으로 저는 캐시를 지우지 않아서 308오류가 계속 발생했었습니다. 다른 분들은 캐시 지우고 확인해보시길,,,,)

■ 정리

 

• 슬래시가 설정과 다르면 308 리디렉션이 발생
• API 요청 시 슬래시 여부에 주의하지 않으면 불필요한 이중 요청
• 캐시가 문제를 은폐할 수 있으니 항상 새로고침 or 캐시 무효화 필요