ランダムに猫の画像を表示するシンプルで楽しい Next.js アプリケーションです。
このプロジェクトは、公開 API から猫の画像をランダムに取得して表示します。Next.js と React の基本的な使い方を学ぶのに最適なチュートリアルアプリケーションです。
デモ: https://random-cat-seven-gamma.vercel.app
以下がインストールされていることを確認してください：
- Node.js: v18 以上
- npm: v9 以上（または yarn、pnpm、bun）
- リポジトリをクローン
git clone <repository-url>
cd random-cat- 依存パッケージをインストール
npm install- 環境変数を設定（必要な場合）
.env.local ファイルをプロジェクトルートに作成します：
# .env.local
# 必要な環境変数を追加してください注: このプロジェクトでは特に必須の環境変数はありませんが、API キーが必要になった場合はここに記述します。
- 開発サーバーを起動
npm run devブラウザで http://localhost:3000 を開くと、アプリケーションが表示されます。
random-cat/
├── app/ # Next.js App Router
│ ├── page.tsx # ホームページ
│ ├── layout.tsx # ルートレイアウト
│ └── globals.css # グローバルスタイル
├── public/ # 静的ファイル
├── .env.local # 環境変数（.gitignore で除外）
├── package.json # プロジェクト設定
├── next.config.ts # Next.js 設定
└── tsconfig.json # TypeScript 設定
| コマンド | 説明 |
|---|---|
npm run dev |
開発サーバーを起動（ホットリロード対応） |
npm run build |
本番用にビルド |
npm start |
本番サーバーを起動 |
npm run lint |
ESLint で静的解析を実行 |
- フレームワーク: Next.js 15+
- 言語: TypeScript
- UI: React 19+
- スタイリング: CSS / Tailwind CSS
- フォント: Geist Font Family
- プロジェクトルートに
.env.localファイルを作成
touch .env.local- 必要な環境変数を追加
# 例：API キーが必要な場合
NEXT_PUBLIC_API_URL=https://api.example.com
NEXT_PUBLIC_API_KEY=your_api_key_here
# 次のような接頭辞の使い分けに注意
# - NEXT_PUBLIC_: ブラウザで使用される（フロントエンド）
# - それ以外: サーバーのみで使用（バックエンド）- コード内で使用
// ブラウザで安全に使用可能
const apiKey = process.env.NEXT_PUBLIC_API_KEY;Vercel でホストされている場合：
- Vercel ダッシュボード にアクセス
- プロジェクトを選択 → Settings
- Environment Variables から環境変数を追加
- 自動的にデプロイが再実行されます
Next.js についてもっと学びたい方：
最も簡単にデプロイできます：
- Vercel にアクセス
- GitHub リポジトリを接続
- デフォルト設定でデプロイ
自動的に本番環境が構築され、Git にプッシュするたびに自動デプロイされます。
Next.js デプロイメントドキュメント を参照してください。
npm run dev -- -p 3001別のポートで起動できます。
.env.localファイルが作成されているか確認- 開発サーバーを再起動（Ctrl+C で停止 →
npm run devで再起動） - ブラウザのキャッシュをクリア
このプロジェクトは MIT License の下で公開されています。
バグレポートやご質問は、GitHub Issues で報告してください。
このプロジェクトは、サバイバルTypeScript のチュートリアル 「Next.jsで猫画像アプリを作ろう」 を参考に作成しました。
Happy Coding! 🎉