본문 바로가기

Next.js4

[Next.js14.0.2] Yarn berry v4 적용 후 체감 성능 비교(feat. Yarn berry v3, yarn, 배포: vercel) ※ 비교한 내용만 있을 뿐 적용 방법은 포함되어 있지 않습니다. ※ Next.js 14.0.2 버전이며, Vercel이 아닌 다른 곳에 배포 시 결과가 다를 수 있습니다. 비교 대상: yarn berry v3, yarn 테스트 배포 사이트: Vercel 테스트 항목: dependency 최초 설치 속도 git에 대한 부하 Vercel에 배포 시 CI 속도 dependency가 추가 됐을 때 dependency 변경 없을 때 Yarn dependency 최초 설치 속도 Yarn berry v3보다 빠름 ( Yarn berry v3는 처음 dependency를 설치 할 때 캐시를 같이 추가하기 때문으로 보임) git에 대한 부하 node_modules에 패키지들이 있으며, gitIgnore에 있으므로 git.. 2023. 11. 28.
[Error] Next.js14.0.3에서 three/drei 라이브러리 에러 💣Attempted import error: 'webgl-sdf-generator' does not contain a default export (imported as 'createSDFGenerator') 에러 환경: Window IDE: Vscode 프레임워크 버전: Next.js14.0.3 오류 난 라이브러리 이름/버전: @react-three/drei: 9.75.0 최근 업데이트한 Next.js 14.0.3에서 three/drei를 import하여 사용만 해도 위와 같은 에러 메세지가 나옴. dev모드인 경우 log에 계속 에러가 나오고 있는 상황이며, createSDFGenerator를 사용하지 않는 컴포넌트는 동작함. vercel에 테스트 배포를 실험해 본 결과, 아래 사진과 같이 error를.. 2023. 11. 27.
Next.js 13 에서 NextResponse 사용 방법 해당 글은 App Router 방식을 따르고 있습니다. cookies response의 Set-Cookie 헤더를 읽거나 변경한다. set(name, value) name과 value에 값을 넣어 쿠키를 설정한다. // /home 들어오는 요청이 주어지면 let response = NextResponse.next(); // 배너를 숨기도록 쿠키 설정 response.cookies.set('show-banner', 'false; HttpOnly; Secure;'); // 옵션은 값 옆에 ; 을 붙이면 된다 // 위 코드는 Response에 `Set-Cookie:show-banner=false; HttpOnly; Secure; path=/home` 헤더가 있다와 같은 말이다. return response; .. 2023. 5. 17.
Next.js에서 Next-Auth의 AuthOptions구성 할 때, Callbacks 옵션에 타입주기 해당 글을 작성할 때 각 라이브러리 버전입니다. Next.js : 13.3.4 TypeScript : 5.0.4 Next-Auth : 4.21.1 Next.js를 하면서 Next-Auth 라이브러리를 사용하면 소셜로그인을 정말 쉽게 구현할 수 있다. 소셜 로그인을 구현하는 만큼 일반 로그인도 쉽게 구현할 수 있는데, 구현할 때 CredentialsProvider를 사용하게 된다. 로그인 방식에는 크게 두 가지 방식이 있는데, 첫 번째는 Session을 이용하는 방법, 두 번째는 JWT를 사용하는 방법이 있다. CredentialsProvider을 사용하게 되면 무조건 JWT방식을 사용하게 되니 Session을 이용해서 만들고 싶은 분은 Next-Auth 삽질할 필요 없이 따로 개발을 하면 될 거 같다. .. 2023. 5. 7.