next update (10-11) 과 next/Image 사용하기

728x90

next/Image를 사용하여 blur 처리를 하고 싶었는데 해당 props들은 11버전부터 사용가능하였다.

그래서 12 최신버전으로 버전업데이트를 했지만 12부터는 웹팩 5를 쓴다는 것..

그래서 웹팩쪽에서 node설정 쪽에서 에러가 나서 해당 코드를 처리해 주어야 하지만

지금의 프로잭트는 cra로 되어 있어서 webpage.config 파일을 수정하는 것은 힘들었다.

그렇기 때문에 Image에서 원하는 기능들을 추가하서 사용할 수 있는 버전이 11이었고, 해당 버전은 webpack 5를 꺼둘 수 있었다. (12부터는 아예 4를 지원 안함)

그래서 우선은 11버전으로 업데이트하고 리액트와 디팬던시까지 업데이트 후에

next.config.js에서

webpack5: false,

라고 우선 지정해주었다.

npm outdated // 현재 버전과 해당 라이브러리 버전 비교
npm outdated --global 
npm update // outdated 에 해당하는 라이브러리 update

// dev dependencies (dependencies to devDependencies)
npm install --save-dev <name> 
npm i <name> -D 

// devDependencies to dependencies
npm i <name> -P

const shimmer = (w, h) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="g">
      <stop stop-color="#333" offset="20%" />
      <stop stop-color="#222" offset="50%" />
      <stop stop-color="#333" offset="70%" />
    </linearGradient>
  </defs>
  <rect width="${w}" height="${h}" fill="#333" />
  <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
  <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
</svg>
`;

const toBase64 = (str) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));

const ImgContainer = ({ src, width, height }) => {
  return (
    <div>
      <Image
        alt="detailpage img"
        src={src}
        width={width}
        height={height}
        blurDataURL={`data:image/svg+xml;base64,${toBase64(shimmer(width, height))}`}
        placeholder="blur"
      />
    </div>
  );
};

이와 같이 로딩시 블러처리와 함께 블러 처리시 보여줄 것 또한 설정할 수 있게 되는데

blurDateUrl같은 경우 jpg, png, gif, svg 등을 지원한다.

cra eject 없이 오버라이드해서 노드 설정 부분을 지울 수 있는 방법을 찾아봐야겠다.

참고

How to Polyfill node core modules in webpack 5 **

https://stackoverflow.com/questions/64557638/how-to-polyfill-node-core-modules-in-webpack-5

devDependencies to dependencies

https://stackoverflow.com/questions/46903002/move-a-module-from-devdependencies-to-dependencies-in-npm-package-json

eject 없이 cra 의 webpack.config 수정하기

https://velog.io/@code-bebop/eject-%EC%97%86%EC%9D%B4-CRA%EC%9D%98-webpack.config-%EC%88%98%EC%A0%95%ED%95%98%EA%B8%B0

image lazy load

https://www.sizplay.dev/TIL/image-lazy-load-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC/