0

Vercel にデプロイすると、このエラーが発生します

ビルド エラーが発生しました 14:34:33.017 エラー: 指定された images.domains は、無効な値 () を受け取った文字列の配列である必要があります。

画面にローカルで画像を表示するために、次の設定を行いました。

module.exports = {
  env: {
    NEXT_PUBLIC_STRAPI_URL: process.env.NEXT_PUBLIC_STRAPI_URL,
    NEXT_PUBLIC_IMAGES_DOMAIN: process.env.NEXT_PUBLIC_IMAGES_DOMAIN,
  },
  publicRuntimeConfig: {
    NEXT_PUBLIC_STRAPI_URL: process.env.NEXT_PUBLIC_STRAPI_URL,
    NEXT_PUBLIC_IMAGES_DOMAIN: process.env.NEXT_PUBLIC_IMAGES_DOMAIN,
  },

  images: {
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96],
    domains: [process.env.NEXT_PUBLIC_IMAGES_DOMAIN],
    path: "/_next/image",
    loader: "default",
  },

  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });

    return config;
  },
};

私のenv.localにこれを入れました

NEXT_PUBLIC_STRAPI_URL= ...
NEXT_PUBLIC_IMAGES_DOMAIN=localhost

私は自分の画像を取得せずに呼び出します

const Potato = ({ assets}) => { 
 <Image
   src={process.env.NEXT_PUBLIC_STRAPI_URL + assets.hat.svg.url}
   width={assets.hat.svg.width}
   height={assets.hat.svg.height}
 />
}

ローカルで画像を表示できますが、アプリをローカルで実行すると、console.log にもこのエラーが表示されます。方法や理由はわかりません。私の画像は問題なくロードされるので。これが Vercel が機能しない理由かもしれませんが、この 2 つが関連しているかどうかはわかりません。 ここに画像の説明を入力

上記のすべての設定は、このビデオからほぼ正確にコピーして貼り付けたものです (10 ～ 16 分から見てください): youtube

これまでに試したこと: Vercel の環境変数に NEXT_PUBLIC_IMAGES_DOMAIN を追加し、Heroku バックエンドの名前を値として (NEXT_PUBLIC_STRAPI_URL で行ったのと同じように)、正常にデプロイされましたが、500 サーバー エラーが発生しました。しかし、それを修正する方法もわかりません。

4

1 に答える 1