MDX 블로그에서 새로운 Next.js 이미지 구성 요소를 사용하는 방법

2021년 여름 업데이트

Vercel은 이제 이미지 최적화를 다시 한 번 개선한 Next.js 11을 출시했습니다released. 따라서 이미지를 직접 가져오는 한 이미지 크기를 수동으로 지정할 필요가 없습니다.

import Image from "next/image";
import picture from "/profile-picture.jpg";

export default function Home() {
  return <Image src={picture} alt="Profile Picture" />;
}

따라서 MDX 엔진이 MDX 파일에서 React 구성 요소 가져오기를 지원하는 한 이미지 최적화의 이점을 누리기 위해 해야 할 일은 다음과 같습니다.

// blog/blog-post.mdx
import Image from "next/image";
import picture from "/profile-picture.jpg";

# Title
Some Markdown

<Image src={picture} alt="Profile Picture" />

소개

10월 Vercelreleased 자동 이미지 최적화를 위한 구성 요소가 포함된 Next.js 10. 이 구성 요소는 렌더링되는 크기로 이미지를 동적으로 제공하거나 이미지를 지연 로딩하는 것과 같은 몇 가지 스마트 기술을 사용하여 로딩 시간을 줄입니다.

Vercel은 다음/이미지 구성 요소를 HTML<img> 요소의 드롭인 교체로 알립니다.

<img src="/profile-picture.jpg" width="400" height="400" alt="Profile Picture">

다음으로 대체됨

import Image from 'next/image'

<Image src="/profile-picture.jpg" width="400" height="400" alt="Profile Picture">

next/image 누적 레이아웃 이동을 방지하려면 개발자가 이미지의 너비와 높이를 지정해야 합니다. 이미지에 with 및 height 속성을 지정하지 않으면 브라우저는 이미지가 로드될 때까지 이미지가 차지하는 공간을 알 수 없습니다. 로드된 이미지를 표시하려면 공간이 필요하기 때문에 이미지 아래의 콘텐츠 위치가 변경됩니다.


Source

현상 유지

내 문서blog는 MDX로 ​​작성되었으며 Next.js SSG(정적 사이트 생성)는 빌드 시 이를 렌더링합니다. Webpackfile-loader을 사용하면 특정 기사의 디렉토리에 이미지가 있고 일반 파일처럼 이미지를 가져올 수 있습니다. 그런 다음 빌드 시 공용 Next.js 폴더로 이동되고 공용 URL이 가져오기 문과 함께 반환됩니다.

// Import image like any source code file
import progressBar from "./progress-bar.png";
// progressBar -> /static/media/progress-bar.b95cd6c9d38c5d8c614c8946d1c36baf.png

// Usage
<img src={progressBar} alt="Progress bar without any labelling" />;

@mdx-js/react의 MDXProvider는 MDX 파일의 모든 <img> 요소를 <Image> 구성 요소 양식 Chakra UI에 매핑하여 일부 스타일을 적용합니다.

import { Image } from "@chakra-ui/core";

const components = {
  img: (props) => <Image rounded="lg" {...props} />,
};

export default components;

file-loader에 대한 내 Webpack 구성은 다음과 같습니다.

config.module.rules.push({
  test: /\.(png|jpe?g|gif|mp4)$/i,
  use: [
    {
      loader: "file-loader",
      options: {
        publicPath: "/_next",
        name: "static/media/[name].[hash].[ext]",
      },
    },
  ],
});

다음/이미지로 마이그레이션

next/image는 드롭인 교체로 작동하므로 모든 MDX 파일의 <img> 요소를 next/image 구성 요소로 변경하고 너비 및 높이 소품을 추가하기만 하면 됩니다. 그러나 이것은 모든 단일 MDX 파일을 수동으로 편집하고 모든 단일 이미지의 해상도를 결정하는 것을 의미합니다. 그래서 대신 자동으로 수행하는 방법을 찾기로 결정했습니다. Next.js 블로그는 정적 사이트 생성을 사용하므로 빌드 시 이미지의 해상도를 감지하는 스크립트를 쉽게 실행할 수 있습니다.

이미 file-loader를 사용하고 있었기 때문에 가져온 모든 이미지에 대해 일부 사용자 지정 코드를 실행할 수 있도록 약간 수정하여 해상도를 감지할 수 있습니다. 이 콜백 메서드의 반환 값은 React 코드의 import 문을 통해 액세스할 수 있습니다. file-loader의 이 수정된 버전을 enhanced-file-loader이라는 이름으로 NPM에 게시했습니다.

이것은 내 이미지의 너비와 높이를 결정하기 위해 image-size 패키지에서 함수를 호출하는 업데이트된 Next.js 구성입니다.

const sizeOf = require("image-size");

config.module.rules.push({
  test: /\.(png|jpe?g|gif)$/i,
  use: [
    {
      loader: "enhanced-file-loader",
      options: {
        publicPath: "/_next",
        name: "static/media/[name].[hash].[ext]",
        generateMetadata: (path) => {
          return sizeOf(path);
        },
      },
    },
  ],
});

단순화를 위해 MDX 파일을 약간 조정하기로 결정했습니다. 그러나 이것은 이론적으로 <img> 의 src 소품을 통해 모든 것을 라우팅할 수 있으므로 선택 사항입니다.

// Import image like any source code file
import progressBar from "./progress-bar.png";
// progressBar:
// { url: "/static/media/progress-bar.HASH.png", metadata: { width: 1000, height: 5000 } }

// Usage
<img {...progressBar} alt="Progress bar without any labelling" />;

마지막으로 MDX에서 React 구성 요소로 태그를 매핑하는 파일에서 next/image 구성 요소를 사용할 수 있습니다.

import { Image } from "@chakra-ui/core";

const components = {
  img: (props) => <NextImage width={props.metadata.width} height={props.metadata.height} {...props} />,
};

export default components;

결론

이것이 내 Next.js 블로그에 이미지 최적화를 추가하기 위해 한 모든 작업입니다. 이 새로운 Next.js 기능의 이점을 계속 누리면서 추가 노력 없이 새 이미지를 추가할 수 있습니다. 그러나 이것은 단순히 이것을 구현하기로 선택한 방법입니다. 나는 Next.js와 Webpack 커스터마이즈에 대해 상당히 익숙하지 않으므로 제 조언을 약간만 받아들입니다. 이 작업을 수행하는 더 좋은 방법이 있을 수 있습니다. 이 작업을 수행하는 다른(아마도 더 나은) 방법을 찾았다면 알려주십시오.