Next.jsに画像を貼る

シリーズのトップは↓こちら

前回の記事は↓こちら

たまたまプライベートで人にTypeScriptでAppRouterなNext.jsを叩き込む機会がありまして、せっかくなので再びこの場をお借りしていっしょに復習します。

前前回のポイント（再掲）（抜粋）

• npm run dev
  • （作ってる途中の）Next.jsを動かす
  • だいたいhttp://localhost:3000で見れる
• src/app/pages.tsx
  • ここがページの内容になる
  • これからはここにオリジナリティーを出す
• TSXでは<>と</>で囲むとひとまとめにできる
  • フラグメントといいます

今回のポイント

• 画像を貼る方法はいくつかある
  • そのうち２つを紹介
    • public/画像のファイル名のように配置する方法
    • 画像をimportして使う方法
• TSXのHTMLみたいな部分で変数や値を使うときは{と}で囲む
  • これはよく使います！

画像を準備する

これでいいや、名前は短いほうが入力が楽です。

これを２箇所に置きます。
私はpublic/icon_in_public.pngとsrc/app/icon_in_app.pngとしました。

共通：準備＋確認

src/app/page.tsxを開きます。

src/app/page.tsx（抜粋）

import Image from "next/image";

上のほうにこの行がまだあることを確認します。この行があるからこそNext.jsらしく画像を貼れます。無ければ書いておきます。

方法その１：publicフォルダに入れる方法

src/app/page.tsx（抜粋）

  return (
    <>
      Hello World
      <Image src="/icon_in_public.png" alt="icon" width={50} height={50} />
    </>

↑このように、<>と</>の間のきりのいいところに、<Image src="/画像のファイル名" alt="画像の説明" width={お好みのサイズ感（幅）} height={お好みのサイズ感（高さ）} />のように書きます。幅と高さは必須です。省略できません。

方法その２：importして使う方法

src/app/page.tsx（抜粋）

import icon from './icon_in_app.png';

↑このようにimport なんか名前をつける from './画像のファイル名';

src/app/page.tsx（抜粋）

  return (
    <>
      Hello World
      <Image src={icon} alt="icon" />
    </>

↑このように、<>と</>の間のきりのいいところに、<Image src={さっきつけた名前} alt="画像の説明" />のように書きます。幅と高さは必須ではありません。省略できます。

TSXのHTMLみたいな部分では、変数や値を{と}で囲むことによって、その場で使うことができます。

両方やってみる

src/app/page.tsx

import Image from "next/image";
import icon from './icon_in_app.png';

export default function Home() {
  return (
    <>
      Hello World
      <Image src="/icon_in_public.png" alt="icon" width={50} height={50} />
      <Image src={icon} alt="icon" />
    </>
  );
}

せっかくなので両方やってみました。

忘れずに保存して、npm run devを動かしていなければ動かして、ブラウザで確認してみます。

このような画面が出ました。画像が２つ表示されていますね🎉

今回はここまでにしました✨

今回のポイント

• 画像を貼る方法はいくつかある
  • そのうち２つを紹介
    • public/画像のファイル名のように配置する方法
    • 画像をimportして使う方法
• TSXのHTMLみたいな部分で変数や値を使うときは{と}で囲む
  • これはよく使います！

参考