概要

目次

今回はGoogleのロゴの画像を表示するよう実装します。
以下画像は実装後の結果です。

開発環境

OS:Windows10
IDE:VSCode

"@next/font": "13.1.5",
"autoprefixer": "10.4.14",
"eslint": "8.39.0",
"eslint-config-next": "13.3.1",
"next": "13.3.1",
"postcss": "8.4.23",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.8.0",
"tailwindcss": "3.3.2"

実装のポイント

next.jsのimageコンポーネントを使って画像を表示します。
参照元のサイトの画像を使えるようにnext.config.jsで設定をします。

コード部分

app/page

page.jsx

import HomeHeader from "@/components/HomeHeader"
+import Image from "next/image";

export default function Home() {

  return (
   <>
    <HomeHeader />
+    <div className="flex flex-col items-center mt-24">
+      <Image
+            width="300"
+            height="100"
+src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/640px-Google_2015_logo.svg.png"
+          />
+    </div>
   </>
  )
}

nextconfig

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
+  images: {
+    domains: ["upload.wikimedia.org"],
+  },
}
module.exports = nextConfig

参考

Next.js Imageコンポーネント

ドメインからの画像を取得する設定

その他

Udemy

githubコミット分