Next.jsがビルドできない

Question

Next.jsで npm run build を実行すると
以下のメッセージが表示されます。
プロジェクト自体は、初期のチュートリアルを使っており
package.jsonを以下のように変更しただけです。
"build": "next build"
↓
"build": "next build && next export"

Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
  Possible solutions:
    - Use `next start` to run a server, which includes the Image Optimization API.
    - Use any provider which supports Image Optimization (like Vercel).
    - Configure a third-party loader in `next.config.js`.
    - Use the `loader` prop for `next/image`.
  Read more: https://nextjs.org/docs/messages/export-image-api
    at C:\temp\next\nextjs-starter\node_modules\next\dist\export\index.js:14:785
    at async Span.traceAsyncFn (C:\temp\next\nextjs-starter\node_modules\next\dist\telemetry\trace\trace.js:6:584)

解消方法を調べましたところ　リンク
default loaderで構成されているnext/image コンポネントを使っているから？だということでした。。

開発策は、いろいろあるみたいですが
Use the loader prop for next/image.
を使って解消したいのですがどれを修正したらいいかわかりません。

index.tsx

import Image from 'next/image'
～
 <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />

代わりに以下の指定しましたが、うまくいきませんでした。
<Image src="/123.jpg" alt="Logo" width={72} height={16} />

さらに以下の行を消すとbuildは成功します。
でも、これからImage を使えないので困ります。。
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />

Answer 1

next exportを使用する場合はNode.jsで動くデフォルトの画像最適化エンドポイントが使えませんので「外部サービスを使ってリサイズや最適化をしてね。」ということみたいです。

next/image | Next.js に書いてあるimgix, cloudinaryなどを使用するしかないのかと思います。