NextJS×Cloudinaryでアルバムを作る

かいと

このテンプレートを使って、アルバムを作ってみる

かいと

まずはCloudinaryのアカウントを作りました。
Googleアカウントで作成できる

作成が完了すると、API KEYや URL、ID等が取得できるため控えておく。

かいと

VercelのテンプレートからDeployに進んでGitHubと連携した。
Project名を入力して控えておいた以下の項目も入力します。

かいと

Deployを押したら、GitHubにProjectができているのでローカルにCloneする

かいと

libraryのインストールをして、立ち上げてみる

terminal

 pnpm i
 pnpm dev

かいと

cloud_nameが取得できないとエラーが発生した
環境変数が足らなかったので、env.localに追加する

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
CLOUDINARY_FOLDER=

かいと

次は、画像のドメインをNextJSから許可していなかったため次の1行を追加した

next.config.js

module.exports = {
  images: {
    formats: ["image/avif", "image/webp"],
+    domains: ["res.cloudinary.com"],
    remotePatterns: [
      {
        protocol: "https",
        hostname: "res.cloudinary.com",
        port: "",
        pathname: "/my-account/**",
      },
    ],
  },
};

かいと

表示できたので最低限のゴールとする