Next.jsでAPIから取得した画像が表示できないエラー

はじめに

Next.jsでGoogleBooksAPIを使って本のサムネとタイトルを表示させようとしていました

エラー

そして現れたUnhandled Runtime Error

和訳するとこんな感じ

ホスト名 "books.google.com" は、next.config.jsのimagesの設定に含まれていません。

詳しくは公式ページを参考にしてね。とも書いてあります
https://nextjs.org/docs/messages/next-image-unconfigured-host

解決

公式サイトによると、nuxt.config.mjsにremotePatternsを追加する必要があるみたいです。

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "http",
        hostname: "books.google.com",
        port: "",
        pathname: "/books/**",
      },
    ],
  },
};

export default nextConfig;

無事、表示できました