Next.js11에서 정적 HTML을 생성하려고하면 next/image 또는 <img/> 태그와 관련된 오류가 발생했습니다.

무엇을 하려고 하는가

무엇이 있었는지

자세한 내용은 다음과 같습니다.

next/image 사용

사이트에 로고를 설치하려면

import Image from 'next/image'

const Logo = () =>  (
  <Image
    src="/logo.svg"
    alt="logo"
    width={128}
    height={128}
 />
)

export default Logo

↑ 이런 파일을 만들었습니다.

로컬 환경에서는 next dev를 실행 중이며 문제없이 로고가 표시됩니다.

정적 HTML을 생성하기 위해 next build && next export를 실행하면

↑ 오류가 발생했습니다.

확실히 Basic Features: Image Optimization | Next.js

The next/image component's default loader is not supported when using next export. However, other loader options will work.

라고 적혀 있습니다.

img 태그 사용

여기서 next/image 대신 <img> 태그를 사용하여

const Logo = () =>  (
  <img
    src="/logo.svg"
    alt="logo"
    width="128"
    height="128"
 />
)

export default Logo

logo 컴포넌트를 ↑ 이렇게 다시 작성했습니다.

다시 next build && next export를 실행하면



<img> 태그 대신 next / image를 사용하는 오류이 발생했습니다.

Error: Do not use <img>. Use Image from 'next/image' instead. - Next.js using html tag <img /> ( with styled components ) - Stack Overflow에 따르면

From Next.js 11, ESLint is supported out-of-the-box and a new set of rules is now provided, including the @next/next/no-img-element rule.

라는 의미로

{
  "extends": ["next", "next/core-web-vitals"],
+  "rules": {
+    "@next/next/no-img-element": "off"
+  }
}

로 설정하면 <img> 태그를 사용할 수 있습니다.

결론

정적 HTML을 생성 할 때 next / image를 사용할 수 없더라도 이미지를 최적화하려면 어떻게해야합니까?

Image optimization for static NextJS sites를 참조하여 next-optimized-images을 사용했습니다.

yarn add next-optimized-images imagemin-svgo

↑ 패키지를 설치하고(svg만 최적화를 대상으로 하는 예)

+ const withOptimizedImages = require('next-optimized-images')

- module.exports = {
+ module.exports = withOptimizedImages({
   reactStrictMode: true,
   trailingSlash: true,
+  handleImages: ['svg'],
- }
+ })

next.config.js 를 ↑ 이렇게 수정하고, next build && next export 를 실행해 완성입니다.

참고

• Advanced Features: 정적 HTML 내보내기 | Next.js
• Basic Features: Image Optimization | Next.js
• Error: Do not use <img>. Use Image from 'next/image' instead. - Next.js using html tag <img /> ( with styled components ) - Stack Overflow
• Image optimization for static NextJS sites
• 정적 웹사이트 호스팅  | Cloud Storage |  Google Cloud