← Images / images / optimization / transformations

Integrace s frameworky

Next.js

Transformace obrázků lze automaticky použít s integrací Next.js <Image /> komponenta ↗.

Chcete-li používat transformace obrázků, definujte globální image loader nebo více vlastních loaderů pro každý <Image /> komponenta.

Next.js si vyžádá obrázek se správnými parametry šířky a kvality.

Transformace obrázků budou zajišťovat ukládání do mezipaměti a doručování optimálního formátu klientovi.

Global Loader

Chcete-li použít Images s all obrázky své aplikace, definujte globální loaderFile ↗ pro vaši aplikaci.

Přidejte následující nastavení do next.config.js soubor umístěný v kořenovém adresáři vaší aplikace Next.js.

module.exports = {
	images: {
		loader: "custom",
		loaderFile: "./imageLoader.ts",
	},
};

Dále vytvořte imageLoader.ts soubor v zadané cestě (relativně ke kořenu vaší aplikace Next.js).

import type { ImageLoaderProps } from "next/image";

const normalizeSrc = (src: string) => {
	return src.startsWith("/") ? src.slice(1) : src;
};

export default function cloudflareLoader({
	src,
	width,
	quality,
}: ImageLoaderProps) {
	const params = [`width=${width}`];
	if (quality) {
		params.push(`quality=${quality}`);
	}
	if (process.env.NODE_ENV === "development") {
		return `${src}?${params.join("&")}`;
	}
	return `/cdn-cgi/image/${params.join(",")}/${normalizeSrc(src)}`;
}

Vlastní loadery

Alternativně definujte loader pro každý <Image /> komponenta.

import Image from "next/image";

const normalizeSrc = (src) => {
	return src.startsWith("/") ? src.slice(1) : src;
};

const cloudflareLoader = ({ src, width, quality }) => {
	const params = [`width=${width}`];
	if (quality) {
		params.push(`quality=${quality}`);
	}
	if (process.env.NODE_ENV === "development") {
		return `${src}?${params.join("&")}`;
	}
	return `/cdn-cgi/image/${params.join(",")}/${normalizeSrc(src)}`;
};

const MyImage = (props) => {
	return (
		<Image
			loader={cloudflareLoader}
			src="/me.png"
			alt="Picture of the author"
			width={500}
			height={500}
			{...props}
		/>
	);
};