Next.jsで猫画像ジェネレーターを作ろう

Next.jsを使って猫画像ジェネレーターを作成する方法について、この記事では詳しく解説します。

1. はじめに

猫画像ジェネレーターは、ランダムに猫の画像を表示してくれるシンプルなWebアプリケーションです。Next.jsを使った実装方法を学ぶことで、Webアプリケーション開発やAPIの利用方法について理解を深めることができます。

2. プロジェクトの準備

まず、Next.jsプロジェクトをセットアップしましょう。

npx create-next-app cat-image-generator
cd cat-image-generator

pages/index.jsを開いて、以下のように編集します。

import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>猫画像ジェネレーター</title>
        <meta name="description" content="Next.jsで作成した猫画像ジェネレーター" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>猫画像ジェネレーター</h1>
      </main>

      <footer className={styles.footer}>© 2023 by Wrtn Technologies</footer>
    </div>
  );
}

3. APIの利用

猫画像ジェネレーターでは、The Cat APIを使ってランダムな猫画像を取得します。pages/api/getCatImage.jsを以下のように作成します。

import axios from "axios";

export default async function handler(req, res) {
  try {
    const response = await axios.get("https://api.thecatapi.com/v1/images/search");
    res.status(200).json(response.data);
  } catch (error) {
    res.status(500).json({ error: "Failed to fetch cat image" });
  }
}

4. コンポーネントの作成

components/CatImage.jsxというファイルを作成し、以下のコードを追加します。

import React from "react";
import Image from "next/image";

const CatImage = ({ url }) => (
    <div className="cat-image">
        <Image src={url} alt="猫の画像" width={500} height={500} />
    </div>
);

export default CatImage;

5. ジェネレーター機能の実装

さらに、pages/index.jsを編集して、ジェネレーター機能を実装します。

import { useState } from "react";
import CatImage from "../components/CatImage";

export default function Home() {
  // ...（中略）...

  const [catImageUrl, setCatImageUrl] = useState(null);

  const fetchCatImage = async () => {
    const response = await fetch("/api/getCatImage");
    const data = await response.json();
    setCatImageUrl(data[0].url);
  };

  return (
    <div className={styles.container}>
      {/* ...(中略)... */}

      <main className={styles.main}>
        <h1 className={styles.title}>猫画像ジェネレーター</h1>
        {catImageUrl && <CatImage url={catImageUrl} />}
        <button onClick={fetchCatImage}>画像を変更</button>
      </main>

      {/* ...(中略)... */}
    </div>
  );
}

6. スタイルの適用

最後に、猫画像ジェネレーターに適切なスタイルを適用しましょう。styles/Home.module.cssを編集してください。

/* ... (中略) ... */

.main {
  /* ...(中略)... */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cat-image {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 20px;
}

button {
  padding: 10px 20px;
  background-color: #0070f3;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0051bf;
}

7. まとめ

これで、Next.jsを使った猫画像ジェネレーターの作成が完了しました。新しい技術やAPIを使ってプロジェクトを実装し、さまざまな機能やデザインを追加することで、スキルを向上させることができます。Happy coding!

AIko Code Symphony