언어 전환 버튼에서 현재 경로를 유지한 채 로케일만 바꾸는 방법

언어 전환 버튼 누르면 항상 홈으로 튕겨나가는 게 불편해서, 보던 페이지 그대로 언어만 바꿔주게 고쳐봤어요. img-compressor 저장소의 components/LanguageSwitcher.tsx 얘기예요.

경로 문자열을 그냥 직접 치환했어요

const switchLocale = (newLocale: Locale) => {
  const newPathname = pathname.replace(\`/\${currentLocale}\`, \`/\${newLocale}\`);
  router.push(newPathname);
};

별도 라우팅 매핑 테이블 없이, 지금 경로 문자열에서 /ko 같은 언어 프리픽스만 /en으로 바꿔서 다시 push해요. /ko/image-compression-benchmark-method를 보고 있었다면 /en/image-compression-benchmark-method로 이동해서, 같은 글의 다른 언어 버전으로 연결돼요.

이 치환이 안전한 이유

이 코드는 localePrefix: 'always' 미들웨어 설정이랑 짝을 이뤄요. 모든 경로가 반드시 /ko나 /en으로 시작한다는 규칙이 있어서, String.prototype.replace가 처음 찾은 /ko가 항상 경로의 언어 프리픽스라고 믿을 수 있어요. replace는 기본적으로 첫 번째 일치 항목만 바꾸니까, 만약 언어 프리픽스가 맨 앞에 고정 안 돼있었다면 슬러그 중간에 우연히 같은 문자열이 있을 때 엉뚱한 곳을 바꿔버릴 위험이 있었을 거예요.

이 방식의 한계

이 구현은 "같은 페이지의 다른 언어 버전이 나머지 경로까지 완전히 똑같다"는 것도 전제로 깔고 있어요. 만약 나중에 언어별로 슬러그 자체를 다르게 번역해야 하는 상황이 오면(한국어 슬러그랑 영어 슬러그가 다른 문자열이 되는 경우), 이 단순 치환은 슬러그 매핑 테이블로 갈아엎어야 해요. 지금은 슬러그를 언어랑 무관하게 똑같이 유지하는 정책이라 이 문제가 아직 안 터졌어요.