다국어 블로그 라우팅 문제 해결 계획

✨ 작업 정리 (2025.03.31)

오늘 한 작업

오늘 진행한 작업을 정리한 내용입니다.

• 문제없이 ABB 파일 빌드 완료
• 이제 Play Console에 ABB를 올려서 테스트해야 하는 단계
• 개인정보처리방침, 이용약관 사이트가 필요함
• 그래서 내가 만들어놓은 사이트를 이용해서 구축하려 했으나 문제에 봉착
• 현재 각 언어마다 preview, privacy-policy, terms-of-service를 만들어놓긴 했는데 연결이 안 됨
• Next.js 프로젝트에서 posts 디렉토리에는 preview, hello-world, dynamic-routing만 있어야 함
  • 그래야 메인에서 포스트 형식으로 다른 게 안 뜸
• 그래서 preview.md만 남겨두고, 각 preview_lang, privacy-policy_lang, terms-of-service_lang 파일들은 전부 링크로 접근하게 해야 함
• 최종 목적:
  • preview.md에서 선택한 언어에 따라 preview_lang으로 이동하게 하고
  • 그 안에서 선택한 언어에 따라 privacy-policy_lang, terms-of-service_lang을 링크로 접근하게 해야 함

1. 프로젝트 개요

• 프로젝트 목표: Next.js를 사용하여 다국어 지원 블로그를 구현. preview 페이지에서 언어 선택 시 해당 언어로 콘텐츠가 동적으로 변경되도록 설정. 이용약관 및 개인정보처리방침 링크를 통해 각 언어별로 해당 페이지에 접근 가능해야 함.
• 현재 상태:
  • preview 페이지에서 언어 선택 시 콘텐츠 변경 기능 구현 완료.
  • 이용약관 및 개인정보처리방침 링크 클릭 시 404 에러 발생 (라우팅 문제, 내일 해결 예정).
  • 언어별 콘텐츠 파일(src/data/[lang]/privacy-policy.md, src/data/[lang]/terms-of-service.md)은 이미 준비됨.
  • 링크는 추가되었으나, 사용자가 링크 경로가 이상하다고 판단.
• 사용 기술:
  • Next.js 15.0.2
  • TypeScript
  • Firebase Hosting (배포 환경: https://pingandpongweb.web.app)

2. 구현된 기능: preview 페이지에서 언어 선택 시 콘텐츠 변경

2.1. 초기 문제 (라우팅 관련)

• 문제 1: /api/preview/[lang] 경로 404 에러:
  • 초기에는 preview 페이지에서 언어 선택 시 /api/preview/[lang] 경로로 요청을 보내도록 설정되어 있었음.
  • 하지만 실제 API 라우트 파일이 src/app/api/preview/[lang]/route.ts에 존재하지 않거나, 경로가 잘못 설정되어 404 에러 발생.
  • 사용자가 실제로 사용 중인 API 라우트 경로가 src/app/api/[lang]/route.ts임을 확인.
  • 이는 /api/[lang] 경로로 매핑되므로, /api/preview/[lang] 대신 /api/[lang]로 요청 경로를 수정해야 함.

2.2. 해결 과정 (라우팅 관련)

• 해결 1: API 라우트 경로 수정:
  • 사용자가 src/app/api/[lang]/route.ts 경로를 사용 중이라고 밝힘.
  • src/app/posts/[slug]/page.tsx와 src/app/_components/language-selector.tsx에서 fetch 호출 경로를 /api/preview/[lang]에서 /api/[lang]로 수정.
  • 예: lang = "en"일 경우 /api/preview/en 대신 /api/en으로 요청.
  • 이를 통해 src/app/api/[lang]/route.ts 파일이 올바르게 요청을 처리하도록 설정.
• 해결 2: fetch 호출 경로 안정화:
  • 서버 컴포넌트에서 fetch 호출 시 상대 경로(/api/[lang])를 사용하면 Next.js 서버 환경에서 URL 파싱이 실패하여 TypeError: fetch failed 에러 발생.
  • 이를 해결하기 위해 절대 URL을 사용하도록 수정.
  • 환경 변수를 통해 동적으로 URL 설정: .env.local 파일에 NEXT_PUBLIC_API_BASE_URL=http://localhost:3000 추가.
  • 배포 환경에서는 NEXT_PUBLIC_API_BASE_URL=https://pingandpongweb.web.app으로 설정 예정.

2.3. 결과

• /api/[lang] 경로로의 요청이 성공적으로 처리됨.
• preview 페이지에서 언어 선택 시 해당 언어의 콘텐츠가 정상적으로 로드됨.

3. 미해결 문제: 이용약관 및 개인정보처리방침 링크 404 에러 (라우팅 문제)

3.1. 문제 설명

• preview 페이지에서 언어 선택 시 표시되는 콘텐츠에 포함된 링크(이용약관, 개인정보처리방침)를 클릭하면 404 에러 발생.
• 링크 예시:
  • 영어: /en/privacy-policy, /en/terms-of-service
  • 한국어: /ko/privacy-policy, /ko/terms-of-service
• 사용자가 언어별 콘텐츠 파일(src/data/[lang]/privacy-policy.md, src/data/[lang]/terms-of-service.md)은 이미 준비되었고, 링크도 추가했다고 언급.
• 사용자가 링크 경로가 이상하다고 판단.
• 현재 각 언어마다 preview, privacy-policy, terms-of-service를 만들어놓긴 했는데 연결이 안 됨.
• Next.js 프로젝트에서 posts 디렉토리에는 preview, hello-world, dynamic-routing만 있어야 함.
  • 그래야 메인에서 포스트 형식으로 다른 게 안 뜸.
• 그래서 preview.md만 남겨두고, 각 preview_lang, privacy-policy_lang, terms-of-service_lang 파일들은 전부 링크로 접근하게 해야 함.
• 최종 목적:
  • preview.md에서 선택한 언어에 따라 preview_lang으로 이동하게 하고
  • 그 안에서 선택한 언어에 따라 privacy-policy_lang, terms-of-service_lang을 링크로 접근하게 해야 함.

3.2. 문제 원인 분석

• 페이지 라우트 누락:
  • Next.js에서 /en/privacy-policy와 같은 경로는 src/app/[lang]/privacy-policy/page.tsx와 같은 파일로 처리되어야 함.
  • 하지만 src/app/[lang]/privacy-policy/page.tsx 또는 src/app/[lang]/terms-of-service/page.tsx 파일이 존재하지 않음.
  • 따라서 해당 경로로 접근 시 404 에러 발생.
• 동적 라우트 설정 문제:
  • src/app/[lang]/ 디렉토리 구조가 없거나, generateStaticParams로 동적 경로가 생성되지 않음.
  • [lang] 동적 라우트를 사용하여 언어별 페이지를 처리하려면, 해당 경로에 대한 페이지 파일과 정적 경로 생성 로직이 필요.
• 링크 경로 문제:
  • 사용자가 링크 경로가 이상하다고 언급.
  • 현재 preview 페이지의 콘텐츠 파일(src/data/[lang]/preview_[lang].md)에 포함된 링크 경로(/[lang]/privacy-policy, /[lang]/terms-of-service)가 올바른지 확인 필요.
  • 링크 경로가 잘못된 경우(예: /en/privacy와 같이 오타, 또는 /privacy-policy/en과 같이 구조적 문제), 404 에러 발생 가능.
  • 링크 경로가 올바르더라도, 해당 경로에 매핑되는 페이지 파일이 없으면 404 에러 발생.
  • 현재 posts 디렉토리 구조와의 충돌 가능성:
    • posts 디렉토리에는 preview, hello-world, dynamic-routing만 있어야 하므로, privacy-policy와 terms-of-service는 별도의 라우팅 구조(/[lang]/privacy-policy, /[lang]/terms-of-service)로 분리해야 함.

3.3. 해결 계획 (내일 작업 예정, 2025년 4월 1일)

3.3.1. 링크 경로 검증 및 수정

• 현재 링크 경로 확인:
  • src/data/[lang]/preview_[lang].md 파일에 포함된 링크 경로 확인.
  • 예: 영어 콘텐츠(src/data/en/preview_en.md)에서 링크가 /en/privacy-policy와 /en/terms-of-service로 설정되어 있음.
  • 한국어 콘텐츠(src/data/ko/preview_ko.md)에서 링크가 /ko/privacy-policy와 /ko/terms-of-service로 설정되어 있음.
  • 링크 경로가 /en/privacy와 같이 오타가 있거나, /privacy-policy/en과 같이 구조적으로 잘못된 경우 수정 필요.
  • 또한, posts 디렉토리와의 충돌을 피하기 위해 링크 경로가 /posts/en/privacy-policy와 같이 설정되어 있다면, /en/privacy-policy로 수정.
• 링크 경로 수정:
  • 링크 경로가 /[lang]/privacy-policy와 /[lang]/terms-of-service 형식이어야 함.
  • 예: /en/privacy-policy, /ko/terms-of-service.
  • 만약 링크 경로가 잘못된 경우(예: /en/privacy-policy/와 같이 불필요한 슬래시 포함, 또는 /en/privacyPolicy와 같이 대소문자 문제), 올바른 경로로 수정.
  • 수정 후 링크 경로가 Next.js의 라우팅 구조와 일치하는지 확인.

3.3.2. 동적 라우트 설정

• src/app/[lang]/privacy-policy/page.tsx와 src/app/[lang]/terms-of-service/page.tsx 파일을 생성하여 언어별 라우팅 설정.
• [lang] 동적 라우트를 사용하여 /[lang]/privacy-policy와 /[lang]/terms-of-service 경로를 처리.
• generateStaticParams를 사용하여 지원하는 모든 언어(ko, en, ja, de, fr, it, es)에 대해 정적 경로 생성.
  • 예: { lang: "ko" }, { lang: "en" } 등.
• 이를 통해 /en/privacy-policy, /ko/terms-of-service와 같은 경로가 올바르게 라우팅되도록 설정.
• posts 디렉토리와 분리된 라우팅 구조를 설정하여, posts 디렉토리에는 preview, hello-world, dynamic-routing만 남도록 유지.

3.3.3. 콘텐츠 파일 확인

• 사용자가 언어별 콘텐츠 파일(src/data/[lang]/privacy-policy.md, src/data/[lang]/terms-of-service.md)을 이미 준비했다고 언급.
• 모든 지원 언어(ko, en, ja, de, fr, it, es)에 대해 파일이 존재하는지 확인.
• 파일 경로가 src/app/[lang]/privacy-policy/page.tsx와 src/app/[lang]/terms-of-service/page.tsx에서 올바르게 로드될 수 있는지 확인.
  • 예: src/data/en/privacy-policy.md, src/data/ko/terms-of-service.md 등.

3.3.4. 라우팅 테스트

• 로컬 테스트:
  • 개발 서버 실행 후 http://localhost:3000/en/privacy-policy와 http://localhost:3000/ko/terms-of-service에 접속하여 404 에러가 발생하지 않는지 확인.
  • preview 페이지에서 링크 클릭 시 해당 경로로 이동하는지 확인.
  • 각 경로에서 해당 언어의 콘텐츠가 올바르게 표시되는지 확인.
• 배포 테스트:
  • 빌드 후 Firebase Hosting에 배포.
  • https://pingandpongweb.web.app/en/privacy-policy와 https://pingandpongweb.web.app/ko/terms-of-service에 접속하여 라우팅이 정상적으로 동작하는지 확인.
  • preview 페이지에서 링크 클릭 시 404 에러 없이 이동하는지 확인.

3.3.5. 추가 고려사항

• 라우팅 에러 처리:
  • 지원하지 않는 언어(예: /xx/privacy-policy)로 접근 시 404 에러를 적절히 처리.
  • notFound() 함수를 사용하여 404 페이지로 리다이렉트.
• SEO 최적화:
  • 각 페이지에 대해 generateMetadata를 구현하여 언어별 메타데이터(제목, 설명 등) 설정.
  • Open Graph 및 Twitter 카드 이미지 경로가 올바르게 설정되도록 metadataBase 설정 추가.
• 링크 경로 일관성:
  • 모든 언어의 콘텐츠 파일에서 링크 경로가 일관되게 설정되었는지 확인.
  • 예: /en/privacy-policy와 /ko/privacy-policy 형식이 모든 파일에서 동일해야 함.

4. 다음 단계

• 내일(2025년 4월 1일) 작업으로, 이용약관 및 개인정보처리방침 링크의 404 에러를 해결.
• 링크 경로를 검증하고 수정하여 올바른 경로로 설정.
• 동적 라우트를 설정하여 /[lang]/privacy-policy와 /[lang]/terms-of-service 경로가 정상적으로 라우팅되도록 구현.
• 라우팅 설정 후 테스트를 통해 모든 언어에서 이용약관 및 개인정보처리방침 페이지가 정상적으로 표시되는지 확인.
• 추가적으로 SEO 최적화 및 에러 처리 로직을 강화하여 사용자 경험 개선.