Headless CMS에서 가져온 이미지들 최적화 - Next Image

세상에... PHP계에만 있다가 JS로 들어온 나에게는 아직도 부족함이 많다.

Headless CMS에서 미리 입력해둔 html(이미지포함) 컨텐츠를 API로 가져와서 Frontend (Next)에서 렌더링할 때 전부 dangerouslySetInnerHTML 을 이용해서 태그들을 뿌려주면 이미지들이 최적화 되지 않는다. 1MB짜리 이미지가 있으면 그대로 1MB모두를 다운로드한다.

(img->Image태그로 변환해도 제대로 이미지 최적화가 되지 않는 것이었다.)

Next JS의 Image optimization을 제대로 활용하지 못하는 것 같아서 너무도 아쉬웠는데...

yarn add html-react-parser

이런 좋은 것이 있을 줄이야...
이것을 통해 dangerouslySetInnerHTML 쓰지 않고,

• 아래 링크의 저자분은 워드프레스에서 가져온 것을 위해 아래의 함수를 미리 작성했음.

    const replaceImage = {
        replace: ({ name, attribs, children }) => {
            if (name === "img") {
                return (
                    <Image
                        src={attribs.src}
                        width={attribs.width | 640}
                        height={attribs.height | 640}
                        alt={attribs.alt ? attribs.alt : "Blog post image"}
                        priority={true}
                    />
                );
            }
        }
    };

그리고 하단 뿌려주는 부분에서 parse() 로 뿌려주니 제대로 img -> Image 태그로 변환되어 제대로 Image Optimization이 동작함을 확인함... 너무 감사...

{/* 일상적으로 뿌려주는데는 문제가 없었지만 이미지 최적화를 위해서는 아래의 작업이 필요... 
<div dangerouslySetInnerHTML={{ __html: post.wr_content }}
    className='text-base text-stone-900 text-justify leading-7' /> 
*/}
    
<div className='text-base text-stone-900 text-justify leading-7'>
    {parse(post.wr_content, replaceImage)}
</div>

감사합니다. 주님...

아래 링크에서 힌트를...

https://dev.to/kasperaamodt/next-js-optimize-blog-posts-183m