Next.jsとのimgixの統合
このガイドでは、imgixとNext.jsを統合して画像最適化をシームレスに処理する方法を説明します。Next.jsはimgixをカスタムローダーとしてサポートしており、imgixの強力な画像処理機能を直接Next.jsアプリケーションで活用できます。
前提条件
Next.jsプロジェクトとimgixを統合する前に、以下の条件を満たしていることを確認してください：
- Next.jsプロジェクトがセットアップされ、実行されていること。
- imgixアカウントとアクティブなソースが設定されていること。
設定
Next.jsでimgixを使用するには、next.config.jsファイルを変更してimgixをカスタム画像ローダーとして追加する必要があります。
imgixローダーの定義
まず、プロジェクトのルートディレクトリに画像をどのように処理するかを指定するローダーファイルを作成します：
loader.js
export default function imgixLoader = ({ src, width, quality }) => {
const url = new URL(`https://your-subdomain.imgix.net${src}`)
const params = url.searchParams
params.set("auto", params.getAll("auto").join(",") || "format")
params.set("fit", params.get("fit") || "max")
params.set("w", params.get("w") || width.toString())
return url.href
}画像コンポーネントの設定を更新
次に、next.config.jsファイルでimgixをカスタム画像ローダーとして指定します：
next.config.js
module.exports = {
images: {
remotePatterns: [
{
protocol: "https",
hostname: "your-subdomain.imgix.net",
},
],
loader: "custom",
loaderFile: "./loader.js",
},
}画像コンポーネントの使用
これで、Next.jsの<Image>コンポーネントを使用してimgix経由で画像を読み込むことができます。プロジェクトでの実装方法は以下の通りです：
import Image from "next/image"
const MyImage = () => (
<Image
src="/path/to/image.jpg"
alt="画像の説明"
width={800}
height={600}
sizes="(max-width: 768px) 100vw, 50vw"
/>
)
export default MyImage詳細情報
Next.jsでの画像読み込みの設定に関する詳細情報は、Next.jsドキュメントのnext.config.js画像設定に関するセクションを参照してください。