Vercel

VercelでSSG（静的サイト生成）を使用している場合、画像名は変わらず中身だけが変更された場合に、その変更を反映させる

VercelでSSG（静的サイト生成）を使用している場合、画像名は変わらず中身だけが変更された場合に、その変更を反映させる方法について説明します。

VercelでSSG（静的サイト生成）を使用している場合、画像名は変わらず中身だけが変更された場合に、その変更を反映させる方法について説明します。

#1. ビルドキャッシュの無効化

Vercelはデプロイごとにビルドをキャッシュするため、画像が更新されてもその変更が反映されないことがあります。ビルドキャッシュを無効にすることで、画像の変更を反映させることができます。以下の手順でビルドキャッシュを無効にします。

Vercelのプロジェクト設定を変更する

  1. Vercelのダッシュボードにログインし、対象のプロジェクトを選択します。
  2. 左側のメニューから「Settings」を選択します。
  3. 「General」セクションで、「Build & Development Settings」を見つけます。
  4. 「Build Cache」オプションをオフにします。

#2. 画像ファイルにバージョンを付与する

画像のURLにバージョンを付与してキャッシュをバイパスする方法もあります。これにより、ブラウザが新しいバージョンの画像を取得するようになります。

例として、next.config.jsを変更してバージョン付きのURLを生成します。

const withPlugins = require('next-compose-plugins');
const withImages = require('next-images');

module.exports = withPlugins([withImages], {
  // その他の設定
  webpack(config) {
    config.module.rules.push({
      test: /\.(jpe?g|png|gif|svg)$/,
      loader: 'file-loader',
      options: {
        name: '[path][name].[hash].[ext]',
      },
    });

    return config;
  },
});

これにより、画像ファイルの名前にハッシュが追加され、ファイルの内容が変更されるたびに異なる名前が生成されます。

#3. インクリメンタル静的再生成 (ISR) の利用

Next.jsのインクリメンタル静的再生成を使用することで、変更があったページのみを再生成することができます。これにより、画像の変更も反映されます。

ISRを使用するためには、getStaticPropsでrevalidateを設定します。

// pages/index.tsx

import { GetStaticProps } from 'next';

export const getStaticProps: GetStaticProps = async () => {
  // データ取得や画像の変更チェックなど

  return {
    props: {
      // ページのプロパティ
    },
    revalidate: 60, // 60秒ごとに再生成
  };
};

const HomePage: React.FC = () => {
  // ページコンポーネント
  return (
    <div>
      <h1>Welcome to my Next.js App</h1>
      {/* 画像の使用 */}
      <img src="/path/to/image.jpg" alt="Example" />
    </div>
  );
};

export default HomePage;

これにより、指定した秒数ごとにページが再生成され、画像の変更が反映されます。

#まとめ

画像名が変わらず中身だけを変更した場合、VercelのSSGで変更を反映させる方法として、ビルドキャッシュの無効化、画像ファイルにバージョンを付与、インクリメンタル静的再生成（ISR）の利用があります。これらの方法を適用することで、画像の変更を迅速に反映させることができます。

タグ一覧