#nextjs7
- DOMMatrix is not defined: Next.js SSR 에러 하나 잡은 이야기
Next.js 프로젝트에 PDF 뷰어(react-pdf)를 붙였더니, 페이지를 열 때마다 콘솔에 이런 에러가 찍혔다. PDF 미리보기 화면을 아직 열지도 않았는데 왜 홈 화면만 들어가도 에러가 났을까. 원인을 따라가 보니 SSR(서버 사이드 렌더링)의…
- Next.js Server Function 에러 메시지가 프로덕션에서 사라지는 이유
개발 환경에서는 "이미 사용 중인 아이디입니다" 같은 에러 메시지가 잘 뜨는데,프로덕션에 배포하면 갑자기 이런 메시지로 바뀐 경험이 있을 것이다. An error occurred in the Server Components render.The spec…
- 서버가 호출하는 API와 브라우저가 호출하는 API는 다르다 : NEXTJS
Next.js로 개발하다 보면 이런 상황을 마주친다. 분명히 서버에서 API를 잘 호출하고 있는데, 같은 주소를 클라이언트 컴포넌트에서 쓰면 요청이 실패한다. 로컬에서는 둘 다 되던 코드가, 배포하고 나면 클라이언트 쪽만 망가진다. 이 글은 그 원인 …
- Next.js 캐싱의 기본값과 동적 렌더링 전환 조건
Next.js 공식 문서(Glossary)는 다음과 같이 명시한다. 즉, Request-time API를 사용하지 않는 컴포넌트는 기본적으로 빌드 시점에 HTML을 생성해 캐싱한다. dynamic 옵션의 기본값인 'auto'에 대한 설명도 같은 방향이…
- Next.js의 redirect() vs router.push() — nginx 리버스 프록시 + basePath 환경에서의 함정
Next.js App Router에서 로그인 후 대시보드로 이동시키는 코드를 작성할 때, 가장 먼저 떠오르는 방법은 Server Action에서 redirect()를 호출하는 것이다. 로컬에서는 잘 동작한다. 그런데 nginx 리버스 프록시 뒤에 배포…
- Vue 개발자가 Next.js를 배우며 겪은 혼란: Server Component와 Client Component 이해하기
Vue와 Nuxt에 익숙한 개발자로서 Next.js를 처음 접했을 때, 가장 혼란스러웠던 부분은 "왜 데이터를 fetch 했는데 화면이 업데이트되지 않는가?"였습니다. Vue에서는 당연하게 작동하던 반응형 시스템이 Next.js에서는 전혀 다른 방식으…
- Prisma로 Next.js 블로그 만들기: 데이터베이스 설정부터 마이그레이션까지
PostgreSQL과 Next.js로 블로그를 만들면서 Prisma ORM을 처음 도입하게 되었습니다. MySQL을 주로 사용하던 입장에서 새로운 도구를 배우는 과정에서 겪은 시행착오와 해결 방법을 공유합니다. Prisma는 Node.js와 TypeS…