export에서next/image 사용하기

44469 단어 Next.jstech

개시하다


아마 많은 분들이 아실 거예요.
Next.js의 주요 기능입니다.next/image는 기본적으로 next export에서 사용할 수 없다.[1]
Vercel을 사용할 수 없는 항목 등에서
그래도나는 js를 사용하고 싶은 상황이 있다고 생각한다.
이때 next/image의 편의성과 우수성을 알게 되면
처음부터 이미지 구성 요소를 만들면 뼈가 부러져요...
이러한 생각으로 구축할 때 이미지를 최적화하다next export에 next/image 기능이 있는 구성 요소를 생성했습니다.
만약 같은 생각을 가진 사람이 있다면 반드시 참고해 주십시오
더 좋은 방법과 가까운 운용 방침 등의 댓글을 얻었으면 좋겠어요!

이 보도가 전달할 수 있는 내용


유감스럽게도 공식next/image을 사용할 수 없기 때문에 구축할 때 이미지를 최적화합니다next export도 next/image의 기능을 사용할 수 있는 비공식 구성 요소에 대한 소개.

Next.js와는 사상이 다를 것 같아요.


먼저 했습니다. 이 구성 요소는 Next입니다.js, Vercel의 생각과 다른 점을 주의하세요.
https://nextjs.org/docs/migrating/from-gatsby#image-component-and-image-optimization
우리 공식 문서에서 말한 바와 같다
구축할 때 이미지를 최적화하는 해결 방안은
이미지 수가 증가함에 따라 구축 시간이 비례적으로 증가하는 단점.
따라서 이른바 정적 접대 서비스를 사용하는 것 이외에
나는 기본적으로 수요에 따라 진행된 이미지 최적화를 사용하는 것이 비교적 좋을 것이라고 생각한다.

이루어지다


제가 중요한 부분에 대한 해설을 허락해 주세요.
코드의 전체 내용은 이쪽 창고를 보세요.
https://github.com/dc7290/next-export-image

responsieve-loader를 사용하여 이미지 최적화


이번에 구축할 때 이미지 최적화
Next.js가 웹 패키지를 핸드백에 사용했기 때문에 loader 기능을 사용하고 싶습니다.
따라서 next/image에 사용된'스펀지형 이미지'를 실현하는 데 필요한
여러 크기의 이미지를 생성할 수 있다는 관점에서responsive-loader.
https://github.com/dazuaz/responsive-loader
이 프로그램 라이브러리는 이미지 처리에서 사용할 수 있다sharp구축 시간도 빠른 것도 추천의 포인트다.
Next.js에서 웹 패키지 설정을 하려면 건드려야 합니다. next.config.js
/**
 * @type {import('next/dist/next-server/server/config-shared').NextConfig}
 */
const config = {
  reactStrictMode: true,
  images: {
    disableStaticImages: true,
  },
  webpack: (config) => {
    config.module.rules.push({
      test: /\.(jpe?g|png|webp)$/i,
      use: {
        loader: "responsive-loader",
        options: {
          name: "[path][name].[hash].[width].[ext]",
          outputPath: "static/chunks/images/",
          publicPath: "/_next/static/chunks/images/",
          sizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
          placeholder: true,
          adapter: require("responsive-loader/sharp"),
        },
      },
    });

    return config;
  },
};

module.exports = config;
이렇게 설정합니다.
옵션의 설정을 간단하게 설명해 드릴게요.
  • name: 이미지 이름이 어떻게 됩니까
  • outputPath: .next 디렉터리에서 그림을 출력
  • publicPath: 탭 등 이미지를 가져올 때 사용하는 경로
  • sizes: 생성된 이미지의 크기
  • placeholder: 출력 차지 문자
    • 입니다.
  • placeholder Size: 플레이어에 사용되는 이미지 크기
  • adapter: 기본jimp을 사용하지 않은 상태에서 덮어쓸 수 있음
    • .
    따라서 가져오기jpg, png, webp 시responsive-loader에서 처리합니다.

    구성 요소 설치


    공식 Image 구성 요소와 같은 부분은 생략됨
    전체 코드는 다음과 같습니다.
    const ExportImage = ({
  src,
  sizes,
  alt,
  priority = false,
  loading,
  lazyBoundary = "200px",
  className,
  placeholder = "empty",
  objectFit,
  objectPosition,
  onLoadingComplete,
  wrapperClassName,
  ...all
}: Props) => {
  //
  // ~~~省略~~~
  //

  const {
    placeholder: blurDataURL,
    width,
    height,
    srcSet,
    src: outSrc,
  } = require(`~/src/images/${src}`);
  const serSetWebp = require(`~/src/images/${src}?format=webp`).srcSet;

  //
  // ~~~省略~~~
  //

  let imgAttributes: {
    src: string;
    srcSet?: string;
    serSetWebp?: string;
    sizes?: string;
  } = {
    src: emptyDataURL,
    srcSet: undefined,
    serSetWebp: undefined,
    sizes: undefined,
  };

  if (isVisible) {
    imgAttributes = {
      src: outSrc,
      srcSet,
      serSetWebp,
      sizes,
    };
  }

  return (
    <span className={wrapperClassName} style={wrapperStyle}>
      {sizerStyle && (
        <span style={sizerStyle}>
          {sizerSvg && (
            <img
              style={{
                maxWidth: "100%",
                display: "block",
                margin: 0,
                border: "none",
                padding: 0,
              }}
              alt=""
              aria-hidden={true}
              src={`data:image/svg+xml;base64,${toBase64(sizerSvg)}`}
            />
          )}
        </span>
      )}
      <picture>
        <source srcSet={imgAttributes.serSetWebp} type="image/webp" />
        <img
          {...rest}
          src={imgAttributes.src}
          srcSet={imgAttributes.srcSet}
          sizes={imgAttributes.sizes}
          decoding="async"
          className={className}
          ref={(img) => {
            ref(img);
            handleLoading(img, outSrc, layout, placeholder, onLoadingComplete);
          }}
          style={{ ...imgStyle, ...blurStyle }}
          alt={alt}
        />
      </picture>
      <noscript>
        <img
          {...rest}
          src={outSrc}
          srcSet={srcSet}
          sizes={sizes}
          decoding="async"
          style={imgStyle}
          className={className}
          loading={loading ?? "lazy"}
          alt={alt}
        />
      </noscript>

      {priority ? (
        <Head>
          <link
            key={
              "__nimg-" +
              imgAttributes.src +
              imgAttributes.serSetWebp +
              imgAttributes.sizes
            }
            rel="preload"
            as="image"
            href={imgAttributes.serSetWebp ? undefined : imgAttributes.src}
            imagesrcset={imgAttributes.serSetWebp}
            imagesizes={imgAttributes.sizes}
          ></link>
        </Head>
      ) : null}
    </span>
  );
};

export default ExportImage;
    자세히 볼게요.
    우선, srcprop을 통해 이미지 이름을 수신합니다
    어셈블리에서 이미지를 가져옵니다.
    const {
  placeholder: blurDataURL,
  width,
  height,
  srcSet,
  src: outSrc,
} = require(`~/src/images/${src}`);
const serSetWebp = require(`~/src/images/${src}?format=webp`).srcSet;
    Dell 데이터 기반next/image도 마찬가지로 구성요소를 구현했습니다.
    공식과 달리 픽처 라벨로 이루어진다.
    이 구성 요소는 구축할 때 이미지 처리를 합니다
    웹 및 원본 확장자의 이미지를 추출하기 위해 사용자 에이전트를 볼 필요가 없기 때문이다
    안전하게 픽처 라벨로 나눠졌어요.
    return (
  <span className={wrapperClassName} style={wrapperStyle}>
    {sizerStyle && (
      <span style={sizerStyle}>
        {sizerSvg && (
          <img
            style={{
              maxWidth: "100%",
              display: "block",
              margin: 0,
              border: "none",
              padding: 0,
            }}
            alt=""
            aria-hidden={true}
            src={`data:image/svg+xml;base64,${toBase64(sizerSvg)}`}
          />
        )}
      </span>
    )}
    <picture>
      <source srcSet={imgAttributes.serSetWebp} type="image/webp" />
      <img
        {...rest}
        src={imgAttributes.src}
        srcSet={imgAttributes.srcSet}
        sizes={imgAttributes.sizes}
        decoding="async"
        className={className}
        ref={(img) => {
          ref(img);
          handleLoading(img, outSrc, layout, placeholder, onLoadingComplete);
        }}
        style={{ ...imgStyle, ...blurStyle }}
        alt={alt}
      />
    </picture>
  </span>
);
    그리고 priorityprop이 true일 때 읽기 지연이 없습니다
    proeload의 기능은 다음과 같다.
    <Head>
  <link
    key={
      "__nimg-" +
      imgAttributes.src +
      imgAttributes.serSetWebp +
      imgAttributes.sizes
    }
    rel="preload"
    as="image"
    href={imgAttributes.serSetWebp ? undefined : imgAttributes.src}
    imagesrcset={imgAttributes.serSetWebp}
    imagesizes={imgAttributes.sizes}
  ></link>
</Head>
    이 점도 공식과 다르다(이것은 단점이다)
    웹 및 원래 확장자에 따라 이미지 URL이 달라지는 제작 시 이미지 처리
    preload를 만들 그림만 웹 페이지로 만들어야 합니다.
    보태다
    물론 웹 페이지와 원시 확장자의 이미지는preload를 진행할 수 있다
    심지어 필요 없는 그림을 불러와서 본말이 뒤바뀌었다.
    따라서 이번 구성 요소는 웹에만 preload를 진행합니다.
    이 점도 정부 영상 처리 수단이다. 비록 영상의 요구는 같지만
    되돌아오는 그림은 다르다. 이런 방법은 우수하다고 느낀다.

    끝맺다


    여기까지 읽어주셔서 감사합니다!
    설명이 부족하거나 잘못된 점이 있으면 반드시 댓글이나 트위터에 남겨주세요!
    Next.js의 목표 방향성과 세계관이 매우 이상적이라고 생각할 때가 많다. 비록 우수한 틀이지만
    이번처럼 export 하고 싶지만 사용할 수 있는 기능이 제한된다는 점은 사람마다 다를 수 있다.
    이런 사람들에게 이번 기사는 약간 넥스트다.js를 사용하는 상자를 늘리는 데 도움이 되었으면 좋겠습니다.

    금후


    앞으로 라이브러리에서 이번과 같은 구성 요소를 제공할 수 있을 것 같습니다.
    다음 프로그램 라이브러리는 업데이트가 중단된 후에도 대량의 다운로드가 있습니다
    issue를 보면 구축할 때의 이미지 처리를 확인하는 수요가 적지 않습니다.
    https://github.com/cyrilwanner/next-optimized-images
    이 점을 감안하면 방향성은 좀 다르지만 우리 구성 요소 같은 것을 제공할 수 있다면
    아마 많은 분들이 쓰실 것 같아요, 웃음.
    실력이 될지 모르겠지만, 그때 꼭 써줬으면 좋겠어요.
    각주
    외부 이미지 공급자를 사용하면 이 제한을 받지 않습니다.↩︎
    vim에서 코드 행미에 점수를 붙이는 몇 가지 방법
    Laavel 입문·지령비망록

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage