next.js 13 image 에러 2가지(혹은 4가지) 해결방법

1. Type 'StaticImageData' is not assignable to type 'string'.

뜻

정적 이미지 데이터 타입은 문자열 타입에 할당될 수 없다 ->src속성은 string을 기대하고있는데 다른녀석이 와버렸다(?)

원인

태그에 src속성으로 이미지 주소를 부여할 때 import 된 이름으로 가져올 때 발생

import example from '../../public/example.png';
...
const Component=()=>{
return(
    <img src={example}> 
    )
}

해결방법

example.src로 접근하면 해결

next.js13에서 이미지를 import구문으로 불러오면 객체형태의 StaticImageData가 들어온다.

console.log로 import 해오는 이름을 찍어보면 객체 형태인걸 확인할 수 있다.

console.log(example)

//example output
{
    blurDataURL: '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fexample.f5698af2.png&w=8&q=70';
    blurHeight: 1;
    blurWidth: 8;
    height: 183;
    src: '/_next/static/media/example.f5698af2.png';
    width: 1000;
}

2.Using `

` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element

[no-img-element | Next.js

No img element Prevent usage of element due to slower LCP and higher bandwidth. An element was used to display an image instead of from next/image. Use next/image to improve performance with automatic Image Optimization. Note: If deploying to a managed hos

nextjs.org](https://nextjs.org/docs/messages/no-img-element)

뜻

img 태그를 사용하면 LCP(최대 컨텐츠 로딩 시간)이 느려지고, 대역폭 사용량이 높아질 수 있다.그래서 next/image에서 제공하는 Image 컴포넌트를 사용하면 알아서 최적화 해준다. 뒤에는 돈얘기. 자세한건 공식문서 참고바람.

원인

이미지는 최적화가 필요한데, next/image에서 제공해주는 Image컴포넌트를 사용하지않고, img 태그를 사용해서 발생하는 warning.

해결방법

import Image from 'next/image' 후에 img 태그를 Image컴포넌트로 교체하면 된다.

그런데, 만약 코드가 이렇게 되어있다면

<Image src={example.src}>

error가 또 나온다.

Image컴포넌트에 src props의 type은 string 혹은 StaticImageData를 받게 되어있다.

export interface StaticImageData {
    src: string;
    height: number;
    width: number;
    blurDataURL?: string;
    blurWidth?: number;
    blurHeight?: number;
}

type을 확인해보면 이런 데이터가 필요한데, src,height,width가 반드시 필요하다. (나머지는 옵셔널)

그래서 src만 넣게되면 width 값이 필요하다고 Error:Image with src "000" is missing required "width" property 에러를 나타내고

src, width까지만 넣으면 height도 넣으라고 한다. Error:Image with src "000" is missing required "height" property

Image컴포넌트에 src 속성값으로 staticImage를 바로 넣어주면 상관없지만,

src로 콕 찝어서 값을 넣어준다면 width, height속성도 꼭 추가 해야 한다.

그래야 build time에 next가 이미지 width, height를 알 수 있기 때문에 최적화가 가능하다.

키워드 해석

• LCP(Largest Contentful Paint)
  • Largest Contentful Paint (LCP)는 웹 페이지의 가장 큰 콘텐츠가 로드되어 화면에 나타나는 시간을 측정하는 웹 측정 지표
  • 최대 컨텐츠 로딩 시간이 길어지면, 최대 컨텐츠가 로딩 되기전에는 다른 컨텐츠는 브라우저에 보이지 않음.
  • LCP를 줄이는게 최적화의 길 중 하나...
    

    

• bandwidth(대역폭)
  • 브로드밴드 라는 이름에서 밴드(band)가 이 대역을 의미함.
  • 네크워크에서 데이터 전송 속도를 측정하는 단위인데, 초당 비트 단위로 표기됨.
  • 인터넷 서비스 제공자(ISP)가 제공하는 인터넷 회선이나 네트워크에서의 대역폭은 해당 회선이나 네트워크에서 한 번에 전송 가능한 데이터의 양을 결정
    • 국내 ISP 업체는 대표적으로 KT,SK 브로드밴드 ,LG U+,CJ 헬로비전 등등 인터넷업체 라 생각하면 편함.
  • 대역폭이 높을수록 더 많은 데이터를 빠르게 전송할 수 있고, 반대로 대역폭이 낮을 수록 데이터 전송속도가 느려진다.
  • 대역폭이 높을수록 초당 더 많은 비트단위를 처리할 수 있기때문에 속도가 올라가지만 데이터 전송 비용이 증가할 수 있다...
    반대로 대역폭이 낮을 수록 초당 더 적은 비트단위를 처리하기때문에 처리 속도가 줄어들지만 데이터 전송 비용이 감소할 수 있다.
  • 그래서 일반적으로 미디어 스트리밍 서비스나 고용량 다운로드같은 고품질의 빠른 데이터 전송이 필요한 영역은 높은 대역폭을 사용하고, 웹 앱의 이미지에는 대역폭 사용량을 최소화 하는 최적화 작업이 필요하다.
  • 대역폭을 줄이는것도 최적화의 길 중 하나...