feat: Next.js와 이미지 최적화_240509

[dusunax]

• 이전 작업 - #7

Todo

• [x] 이미지 최적화
  • [x] 로컬 이미지에 blur placeholder 추가
  • [x] AVIF 사용하도록 설정
• [x] 이미지 로딩 레이아웃 쉬프트 개선
  • [x] witdh, hight 조정
• [ ] ~페이지네이션~ => 추후 작업

---

Next.js와 이미지 최적화_240509

• 주제: CLS, FCP 개선
• 문서읽기: 틈틈이
• 작업 시간: 8시반~11시반

이미지 최적화 레퍼런스

• [x] https://nextjs.org/docs/app/building-your-application/optimizing/images
• [x] https://www.youtube.com/watch?v=IU_qq_c_lKA
• [x] https://oliveyoung.tech/blog/2023-06-09/nextjs-image-optimization/
• [ ] https://fe-developers.kakaoent.com/2022/220714-next-image/
• [x] https://velog.io/@pds0309/nextjs-최소한의-이미지-최적화하기
• [ ] https://docs.google.com/presentation/d/12kpH3kBcj691NH0Z05Yj0Wa--JjMUTDaprf-R_7gN2g/edit#slide=id.g22cd1445457_0_0

1. 👀 next/image 문서 살펴보기

• next/image: https://nextjs.org/docs/app/building-your-application/optimizing/images
  • 장치 크기에 맞춘 이미지 크기
  • AVIF, WebP 이미지 형식
  • CLS 발생 방지 (width, height)
  • 기본 레이지 로드
  • 이미지 리사이징

    Asset Flexibility: On-demand image resizing, even for images stored on remote servers 👈 이 부분 확인하기

• 로더 Loader
  • 이미지의 URL을 생성하는 기능
  • srcset(크기별 url set) 자동 생성
  • 커스텀 로더 작성 가능
  • https://nextjs.org/docs/app/api-reference/components/image#loader
  • LCP element에 priority 지정할 수 있음 <Image ... priority />
  • 이미지 크기 조정

    • Automatically, using a static import
    • Explicitly, by including a width and height property
    • Implicitly, by using fill which causes the image to expand to fill its parent element.

  • fill 사용 시 부모 엘리먼트 사이즈이며 object-fit, object-position 설정 가능

2. 👀 Make Your Image Loading Blurry in Next.js

https://medium.com/@Furki4_4/make-your-image-loading-blurry-in-next-js-0f0e5bf3dc7c

문서에 명시된 대로 동적 이미지에 대한 Image 구성 요소의 BlurDataUrl 속성에 dataURL을 전달해야 합니다. dataURL은 기본적으로 base64 형식으로 흐린 이미지 데이터를 보유하는 문자열입니다.

• 라이브러리 사용: sharp, ~plaiceholder:commonJS~

3. 👀 placeholder 문서

• 반환값 확인하기: https://plaiceholder.co/docs

[dusunax]

240509 작업 내용

이미지 타입

• image: AVIF 타입, 3~14kb (avif 지원하지 않는 브라우저에서는 next/image가 자동으로 이미지 타입을 webp로 바꿉니다)
• placeholder: data:image/png;base64, 10px짜리

PNG 슬라이드에 next/image placeholder blur 적용

• 시연: slow 3G

https://github.com/dusunax/blog/assets/94776135/deb0e81c-3d55-4350-a8b4-ae5fd5a0423f

PNG 슬라이드 상세 페이지에 blur 적용

• 시연: slow 3G

https://github.com/dusunax/blog/assets/94776135/f957ebc4-4a98-497a-9e68-e1f09874a573

PNG 리스트만 퍼포먼스 확인

PDF 리스트까지 퍼포먼스 확인 (유의미.. 한가?)

• pdf 썸네일 리스트 개선 방안 모색이 필요합니다.
• best prectice 점수 하락은 deprecated된 라이브러리 때문입니다(개선 예정)

오늘 만난 오류

오류A

• placeholder blur를 적용하려면 Base64 이미지 필요

• Make Your Image Loading Blurry in Next.js

문서에 명시된 대로 동적 이미지에 대한 Image 구성 요소의 BlurDataUrl 속성에 dataURL을 전달해야 합니다. dataURL은 기본적으로 base64 형식으로 흐린 이미지 데이터를 보유하는 문자열입니다.

라이브러리 사용: sharp, plaiceholder: commonJS

• plaiceholder가 commonJS 라이브러리이기 때문에 next.config을 mjs로 변경했습니다
  • 현재 next.config.mjs

    
    // next.config.mjs
    import withPlaiceholder from "@plaiceholder/next";
    import withImages from "next-images";
    import { withContentlayer } from "next-contentlayer";
    /** @type {import('next').NextConfig} */

const nextConfig = withImages({ experimental: { appDir: true, }, images: { formats: ["image/avif", "image/webp"], }, webpack: (config) => { config.resolve.alias.canvas = false; return config; }, });

export default withPlaiceholder(withContentlayer(nextConfig));

### 오류B
- 서버 컴포넌트 async/await 에러 => 타입스크립트 에러입니다.
  ![image](https://github.com/dusunax/blog/assets/94776135/5415ace0-821e-441e-b1e2-0be9edb88ba5)
  - [Next.js 문서](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-server-with-fetch) To use async/await in a Server Component with TypeScript, you'll need to use TypeScript 5.1.3 or higher and @types/react 18.2.8 or higher.
![image](https://github.com/dusunax/blog/assets/94776135/f26630ed-ed05-4b48-8fdd-1947b6509478)
  - 또는 구 버전에서는 아래의 주석으로 에러를 무시헀었습니다 (이전 공식 문서를 참조하는 레퍼런스에서 찾아볼 수 있습니다.) 
  ```tsx
  {/* @ts-expect-error Async Server Component */}

- 버전업을 해도 왠지 타입 오류가 해결되지 않아서 두 번째 방법으로 주석을 추가한 상태입니다.

오류C

• 클라이언트 컴포넌트에서 node:fs, node:path를 사용하려 했을 때 발생
• 서버 컴포넌트에서 getPlaceholderList 함수를 사용해서 패칭을 진행합니다.

[dusunax]

Next Todo

• [ ] S3에 PDF 슬라이드 썸네일 이미지 보관 // 람다 리사이징
  • PDF 썸네일의 경우 > 리소스 다운로드 자체에 시간이 걸리기 때문에, 썸네일 이미지를 생성해서 외부에 저장하는 과정이 필요할 것으로 보입니다.
• [ ] 버그픽스 #9
• [ ] 페이지네이션 => 추후 작업