Next.js 15 & React 19 마이그레이션

[saseungmin]

• next auth 버전업데이트 후 확인하기
  • chore: next 15 & react 19 #260 (comment)
• vite-plugin-svgr svg type error 버전 업데이트 후 확인
  • chore: next 15 & react 19 #260 (comment)
• usehook-ts type error
  • [BUG] Compatibility with React v19 juliencrn/usehooks-ts#602
• react-snowfall
  • chore: Update to support CR react cahilfoley/react-snowfall#82

[saseungmin]

react-pdf

next 15에서 server component에서 ssr false옵션의 dynamic import 사용 불가능

• 이게 뭔가 문제냐

기존에 react-pdf를 사용하기 위해서 ssr false로 dynamic import를 서버컴포넌트에서 사용하고 있었음.

• 그럼 dynamic import를 사용하지 말아볼까?

Export encountered an error on /projects/[id]/page: /projects/41, exiting the build.
Error occurred prerendering page "/projects/75". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Promise.withResolvers is not a function

바로 에러 발생.
Promise.withResolvers??
node v22부터 지원. -> node v22로 업데이트

로컬에서는 문제없는 것 같아서 dynamic import 제거 후 vercel 배포 시도.

➤ YN0000: │ canvas@npm:2.11.2 STDERR node-pre-gyp ERR! build error 
➤ YN0000: │ canvas@npm:2.11.2 STDERR node-pre-gyp ERR! stack Error: Failed to execute '/node22/bin/node /vercel/path0/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --update-binary --module=/vercel/path0/node_modules/canvas/build/Release/canvas.node --module_name=canvas --module_path=/vercel/path0/node_modules/canvas/build/Release --napi_version=9 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v127' (1)

어림도 없지.
바로 에러 발생. github issue ㄱㄱ

• react-pdf withResolvers issue
• vercel canvas error
• node-canvas issue

이게 무람. react-pdf의 pdfjs-dist는 canvas의 dependency로 사용

"pdfjs-dist@npm:4.4.168":
  version: 4.4.168
  resolution: "pdfjs-dist@npm:4.4.168"
  dependencies:
    canvas: "npm:^2.11.2"
    path2d: "npm:^0.2.0"
  dependenciesMeta:
    canvas:
      optional: true
    path2d:
      optional: true
  checksum: ###...
  languageName: node
  linkType: hard

근데 canvas는 node v22에서 작동하지않음.
그럼 언제 지원해? -> release note ㄱㄱ

• v3 rc버전 진행중..

vercel issue에 뭔가 그 전에 install을 하는 해결방법은 있긴한데... 저게 nice한 방법? no.
polyfill 사용? no..
다시 node 20으로 내리자..
재밌네..

react-pdf v9에서 Promise.withResolvers를 사용하려고 node 22를 사용.
pdfjs-dist의 canvas는 node 22에서 충돌.
어쩔...?

그냥 내리고 client component에서 dynamic import ssr false로 사용하도록 새로운 컴포넌트 생성 후 사용.
node 22지원할때까지 기다리자.

[saseungmin]

local에서 실행시 종종 next/image 에러 발생

• https://stackoverflow.com/questions/79148751/next-js-15-image-optimization-timeout-error-resolved-after-restart-pc
• fix(next/image)!: set upstream timeout to 7 seconds vercel/next.js#65821