개요회사에서 “Next.js에서 서버사이드로 다국어를 어떻게 처리하는지, SEO까지 포함해서 실제로 동작하는지” 확인해달라는 요청을 받았다.우리 회사 환경은 다르지만 Next.js에서 관례적으로 어떻게 하는지를 먼저 정리하고, 최소 규모로 PoC(검증용 데모)를 만들어서 직접 테스트해봤다.1. 회사 요청사항을 내가 이해한 방식요구사항을 “검증 가능한 체크리스트”로 바꾸면 아래 정도였다.서버사이드 렌더링(SSR) 시점에 이미 해당 언어 콘텐츠가 HTML로 내려오는가?검색엔진(특히 Google)이 언어별 페이지를 각각 인덱싱할 수 있는 구조인가?같은 페이지라도 언어가 다르면 URL이 다르게 존재해야 한다.hreflang / canonical / sitemap 같은 SEO 신호가 제대로 나가는지 확인클라이언트..

Next.js 15 프로젝트를 Vercel에 올려 두고 자동 배포를 쓰고 있었는데어느 날 Vercel에서 보안 관련 메일이 한 통 왔다.Security Update: Two additional React Server Components vulnerabilitiesCVE-2025-55184, CVE-2025-55183 (React Server Components, Next.js 영향) 내용을 요약하면App Router 엔드포인트로 악의적인 HTTP 요청을 보내면서버 프로세스가 뻗어 CPU를 소모하게 만드는 DoS 취약점 (CVE-2025-55184)Server Actions의 컴파일된 소스 코드가 응답으로 나올 수 있는 취약점 (CVE-2025-55183)React2Shell 사건 이후 RSC 쪽을 집중적..

Next.js 15로 개인 프로젝트를 만들다가, 메인 화면에 가벼운 애니메이션 하나 넣고 싶어서 LottieFiles + lottie-react 조합을 써봤다.처음에는 "json 파일 하나 내려받아서 컴포넌트에 박으면 되겠지" 하고 가볍게 시작했는데, 막상 TypeScript랑 같이 쓰다 보니 타입 에러 한 번 제대로 맞고 정리하게 됐다.이 글은LottieFiles에서 애니메이션 고르는 과정Next.js에서 lottie-react 설치하고 붙인 방법내가 당했던 JSON 타입 관련 에러와 해결 방법1. LottieFiles에서 애니메이션 고르기나는 LottieFiles에서 무료 애니메이션을 하나 골라서 가져왔다.1-1. LottieFiles 접속사이트에 접속하면 이런 메인 화면이 나온다.회원 가입 후 로그..

1편에서 E2E로 다이얼로그 여닫기 같은 UI 동작을 눌러 봤다면,2편은 "페이지를 타고 들어가서 API까지 같이 확인해 보기" 쪽에 더 가깝다. Next.js 15 프로젝트를 만들고 Playwright를 붙이다가,"특정 페이지에서 API 요청이 진짜 잘 나가는지"까지 같이 보고 싶어졌다.Playwright 공식 문서를 보다가 API 테스트 기능이 있는 걸 발견했고,그 과정을 기록해 둔 글이다.Playwright API test 개념 확인baseURL 설정해서 경로만으로 요청 보내기목록 API, 상세 API 테스트 코드 예시테스트하면서 헷갈린 포인트 간단 메모참고한 문서들은 이쪽이다.Playwright API Testinghttps://playwright.dev/docs/api-testing1. base..

Next.js 15를 공부하면서 "이왕 하는 김에 테스트도 손에 익혀 보자" 싶어서Playwright를 같이 붙이기 시작했다.이번 글은 거창한 튜토리얼이라기보다는"처음 깔고, 최소한의 설정을 하고, 내 페이지 하나를 실제로 눌러 본 기록"에 가깝다.결론 먼저Next.js 15 프로젝트에 Playwright를 붙이는 것만 보면 어렵지 않았다pnpm create playwright로 설치하면 초기 설정 파일까지 한 번에 만들어 준다playwright.config.ts에서 dev 서버만 Next에 맞게 지정해 주면 바로 테스트를 돌릴 수 있다getByTestId를 쓰면 Tailwind 기반 UI에서도 꽤 편하게 요소를 찾을 수 있다pnpm exec playwright show-report로 HTML 리포트를 ..

Next.js 15를 공부하다가 params랑 searchParams를 예전처럼 동기 코드처럼 쓰다가 경고를 하나 맞았다.처음에는 그냥 타입스크립트 경고 정도겠거니 했는데, 에러 메시지를 끝까지 읽어 보니 이제 Next.js 15에서는 요청 관련 API들이 비동기로 바뀌었다는 걸 알게 됐다.내가 실제로 만난 에러 상황 정리왜 이런 경고가 뜨는지Codemod로 어떻게 자동 변환했는지최종적으로 코드를 어떻게 정리했는지1. 처음 본 에러 메시지서버 콘솔에 딱 이 에러가 찍혔다.Error: Route "/shop/[id]" used `params.id`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/d..