정적으로 자원을 활용하기위해 Next.js 앱 자체에서 관리하는 public directory에 파일을 넣으면 바로바로 사용가능하다! public directory에 sbl.jpg 파일을 넣고
아무 page에서 아래와같이 작성하면,
<img src="/sbl.jpg" width={100} ></img>
이게 당장 보이긴 보이는데 EsLint를 잘 적용했다면 컴파일러가 경고를 많이하는걸 볼 수 있다.
에러 1. Using <img> could result in slower LCP and higher bandwidth. Consider using <Image /> 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-elementeslint @next/next/no-img-element
참조 공식문서
https://nextjs.org/docs/messages/no-img-element
Next는 slower LCP와 higher bandwidth 때문에 img 태그를 사용하는것을 말린다.
LCP
LCP"는 "Largest Contentful Paint"의 약자로, 웹 페이지의 사용자 경험을 측정하는 웹 성능 지표중 하나인데, 페이지가 얼마나 빨리 로드되는지를 나타낸다.
slower LCP는 그래서 로딩 속도가 느리다는 말이다.
Bandwidth
대역폭을 의미한다. 데이터 전송속도와 용량을 나타내는 요소인데, 대역폭이 높을 수록 더 많이, 더 빠르게 데이터 전송이 가능하다!
그러니까 higher bandwidth는 높은 대역폭으로 이미지를 클라이언트에게 전송한다는 말이겠지?
ok 그래서 어떻게 해야하냐,
img 태그 대신 next/Image 태그를 사용하면 된다.
import Image from 'next/image'
function Home() {
return (
)
}
export default Home
next/Link를 import하던 것 처럼 next/image를 import해서 사용하면 된다. 위는 예제, 그래서 img를 Image태그로 변경했다.
에러 2. img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.eslintjsx-a11y/alt-textView Problem (Alt+F8)Quick Fix... (Ctrl+.)
에러 1을 해결하는과정에서 예제코드를 자세히봤다면 알겠지만, alt 태그가 있다. alt태그는 대체 텍스트로 뭔지 대강 아니까 지나가자.. alt 텍스트를 지정해줘야겠다.
그나저나 img건 Image건 아래 사진처럼 엄청나게 신경쓰이는 런타임에러가 발생했을것이다.
Unhandled Runtime Error
**Error: Hydration failed because the initial UI does not match what was rendered on the server.
See more info here: https://nextjs.org/docs/messages/react-hydration-error**
공식문서도 읽어보고 검색도 해본결과
그냥 경로로 지정한 내 이미지를 lazy loading(Image 태그의 기본 옵션) 하려고 하니, 해당 클라이언트 컴포넌트가 pre-render(SSR) 하려고하니까 안된다 이거다.
왜안되는지는 솔직히 지금 여기에 시간쏟을게 아닌거같아서 나중에 보충하고,
암튼 그래서 SSR하려고하는데 문제가 생긴다고하니까
내 페이지를 client component라고 Next한테 알려줘야한다.
"use client";
import Link from "next/link";
import Image from "next/image";
export default function Home({ children }: { children: React.ReactNode }) {
return (
<h1>
이렇게 파일 최상단에 작성하면 서버에서 렌더링 하지않고 일단 보내주게된다.
client, server component에 대해서는 다음글에.
아무 page에서 아래와같이 작성하면,
<img src="/sbl.jpg" width={100} ></img>
이게 당장 보이긴 보이는데 EsLint를 잘 적용했다면 컴파일러가 경고를 많이하는걸 볼 수 있다.
에러 1. Using <img> could result in slower LCP and higher bandwidth. Consider using <Image /> 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-elementeslint @next/next/no-img-element
참조 공식문서
https://nextjs.org/docs/messages/no-img-element
Next는 slower LCP와 higher bandwidth 때문에 img 태그를 사용하는것을 말린다.
LCP
LCP"는 "Largest Contentful Paint"의 약자로, 웹 페이지의 사용자 경험을 측정하는 웹 성능 지표중 하나인데, 페이지가 얼마나 빨리 로드되는지를 나타낸다.
slower LCP는 그래서 로딩 속도가 느리다는 말이다.
Bandwidth
대역폭을 의미한다. 데이터 전송속도와 용량을 나타내는 요소인데, 대역폭이 높을 수록 더 많이, 더 빠르게 데이터 전송이 가능하다!
그러니까 higher bandwidth는 높은 대역폭으로 이미지를 클라이언트에게 전송한다는 말이겠지?
ok 그래서 어떻게 해야하냐,
img 태그 대신 next/Image 태그를 사용하면 된다.
import Image from 'next/image'
function Home() {
return (
)
}
export default Home
next/Link를 import하던 것 처럼 next/image를 import해서 사용하면 된다. 위는 예제, 그래서 img를 Image태그로 변경했다.
에러 2. img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.eslintjsx-a11y/alt-textView Problem (Alt+F8)Quick Fix... (Ctrl+.)
에러 1을 해결하는과정에서 예제코드를 자세히봤다면 알겠지만, alt 태그가 있다. alt태그는 대체 텍스트로 뭔지 대강 아니까 지나가자.. alt 텍스트를 지정해줘야겠다.
그나저나 img건 Image건 엄청나게 신경쓰이는 런타임에러가 발생했을것이다.
Unhandled Runtime Error
**Error: Hydration failed because the initial UI does not match what was rendered on the server.
See more info here: https://nextjs.org/docs/messages/react-hydration-error**
공식문서도 읽어보고 검색도 해본결과
그냥 경로로 지정한 내 이미지를 lazy loading(Image 태그의 기본 옵션) 하려고 하니, 해당 클라이언트 컴포넌트가 pre-render(SSR) 하려고하니까 안된다 이거다.
왜안되는지는 솔직히 지금 여기에 시간쏟을게 아닌거같아서 나중에 보충하고,
암튼 그래서 SSR하려고하는데 문제가 생긴다고하니까
내 페이지를 client component라고 Next한테 알려줘야한다.
"use client";
import Link from "next/link";
import Image from "next/image";
export default function Home({ children }: { children: React.ReactNode }) {
return (
<h1>
이렇게 파일 최상단에 작성하면 서버에서 렌더링 하지않고 일단 보내주게된다.
client, server component에 대해서는 다음글에.
