概要
目次
今回は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コミット分