Next.js 미리보기 링크가 운영에서만 404가 났을 때 고친 순서

처음 보인 증상

관리자에서 글을 저장한 뒤 미리보기 버튼을 누르면 로컬에서는 바로 상세 페이지가 열렸다. 그런데 운영 서버에서는 같은 버튼이 /admin/posts/... 아래로 붙으면서 404가 났다. 처음에는 동적 라우트 파일을 의심했지만, 실제 원인은 링크를 만드는 기준 URL이 화면 위치에 따라 달라지는 코드였다.

헷갈렸던 지점은 router.push(slug)처럼 짧게 쓴 코드가 생각보다 오래 살아남았다는 것이다. 목록 페이지에서는 우연히 맞았고, 편집 페이지에서는 상대 경로가 되어버렸다.

먼저 재현 주소를 그대로 적었다

브라우저에서 보이는 주소를 복사해서 세 줄로 나눴다.

• 현재 관리자 주소
• 클릭 후 이동한 주소
• 원래 기대한 공개 글 주소

이렇게 적으니 라우트가 없는 문제가 아니라 상대 경로 조합 문제라는 게 바로 보였다.

링크 생성 코드를 절대 경로로 바꿨다

관리자 화면에서는 사용자가 어디에 있든 공개 글은 항상 /posts/{slug}로 가야 했다. 그래서 버튼에 들어가는 값을 만들 때 앞에 슬래시를 강제로 붙였다.

function getPostPath(slug: string) {
  return `/posts/${encodeURIComponent(slug)}`;
}

배포 환경에서 도메인까지 포함해야 하는 공유 링크는 별도 함수로 분리했다.

const siteUrl = process.env.NEXT_PUBLIC_SITE_URL ?? "https://blog.example.com";
const publicUrl = new URL(getPostPath(slug), siteUrl).toString();

확인할 때 본 기준

수정 뒤에는 버튼만 누르지 않고 아래 순서로 확인했다.

• 관리자 목록에서 미리보기 클릭
• 편집 페이지 안에서 미리보기 클릭
• 새 탭으로 열기
• 복사한 URL을 시크릿 창에서 열기

시크릿 창 확인을 넣은 이유는 관리자 세션 때문에 보이는 페이지와 실제 공개 페이지가 다를 수 있어서다.

마무리 기록

동적 라우트 문제처럼 보여도, 운영에서만 깨지는 링크는 상대 경로부터 보는 게 빠를 때가 있었다. 특히 관리자 페이지처럼 URL 깊이가 자주 바뀌는 화면에서는 slug만 넘기지 말고 공개 경로를 만드는 함수를 하나로 모아두는 편이 덜 헷갈린다.