Firestoreの使い方を実例で解説｜データを保存する方法・コレクションとドキュメント、フィールドとは何か？(Next.js) addDoc collectionの使い方

npx create-next-app@latest test-firestore

cd test-firestore
npm install firebase

mkdir lib
ni lib/firebase.js

NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSy...
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-app.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-app-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-app.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=123456789
NEXT_PUBLIC_FIREBASE_APP_ID=1:12345:web:abc123

import { initializeApp, getApps } from "firebase/app";
import { getFirestore } from "firebase/firestore"; //Firestoreの読み込み
import { getAuth } from "firebase/auth";　// Authも使う場合

//process.envで環境変数を読み込む
const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

// Next.jsは開発中に何度もリロードされるため、二重初期化を防ぐこの書き方が推奨されます
const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];

const db = getFirestore(app);
const auth = getAuth(app);

export { app, db, auth };

"use client";

import { useState } from "react";
import { db } from "@/lib/firebase";
import { collection, addDoc, serverTimestamp } from "firebase/firestore";

export default function Home() {
  // 入力値を管理するための「ステート」
  const [formData, setFormData] = useState({ name: "", email: "" });
  const [loading, setLoading] = useState(false);
  const [status, setStatus] = useState("");

  const handleSave = async (e) => {
    e.preventDefault(); // フォーム送信時のページリロードを防ぐ
    
    if (!formData.name || !formData.email) {
      setStatus("⚠️ 名前とメールアドレスを入力してください");
      return;
    }

    setLoading(true);
    setStatus("送信中...");
    
    try {
      // 入力された formData をそのまま保存
      await addDoc(collection(db, "users"), {
        name: formData.name,
        email: formData.email,
        createdAt: serverTimestamp(),
      });
      
      setStatus("✅ 保存に成功しました！");
      setFormData({ name: "", email: "" }); // 送信後にフォームを空にする
    } catch (e) {
      console.error(e);
      setStatus("❌ 保存に失敗しました");
    } finally {
      setLoading(false);
    }
  };

  return (
    <main className="flex min-h-screen flex-col items-center justify-center bg-gray-50 p-6">
      <div className="w-full max-w-md overflow-hidden rounded-2xl bg-white shadow-xl">
        <div className="bg-blue-600 p-6 text-center text-white">
          <h1 className="text-2xl font-bold">ユーザー登録</h1>
          <p className="mt-2 opacity-90">Firestoreへ保存します</p>
        </div>

        <form onSubmit={handleSave} className="p-8 space-y-4">
          {/* 名前入力 */}
          <div>
            <label className="block text-sm font-medium text-gray-700">お名前</label>
            <input
              type="text"
              value={formData.name}
              onChange={(e) => setFormData({...formData, name: e.target.value})}
              className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none text-black"
              placeholder="山田 太郎"
            />
          </div>

          {/* メール入力 */}
          <div>
            <label className="block text-sm font-medium text-gray-700">メールアドレス</label>
            <input
              type="email"
              value={formData.email}
              onChange={(e) => setFormData({...formData, email: e.target.value})}
              className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none text-black"
              placeholder="example@test.com"
            />
          </div>

          <button
            type="submit"
            disabled={loading}
            className={`w-full rounded-lg py-3 font-semibold text-white transition-all ${
              loading ? "bg-gray-400" : "bg-blue-600 hover:bg-blue-700"
            }`}
          >
            {loading ? "送信中..." : "データベースに保存"}
          </button>

          {status && (
            <div className={`mt-4 rounded p-3 text-center text-sm ${
              status.includes("成功") ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"
            }`}>
              {status}
            </div>
          )}
        </form>
      </div>
    </main>
  );
}

"use client";

import { useState } from "react";

  const [formData, setFormData] = useState({ name: "", email: "" });
  const [loading, setLoading] = useState(false);
  const [status, setStatus] = useState("");

  const handleSave = async (e) => {
    e.preventDefault(); // フォーム送信時のページリロードを防ぐ
    
    if (!formData.name || !formData.email) {
      setStatus("⚠️ 名前とメールアドレスを入力してください");
      return;
    }

    setLoading(true);
    setStatus("送信中...");

import { db } from "@/lib/firebase";
import { collection, addDoc, serverTimestamp } from "firebase/firestore";

await addDoc(collection(db, "users"), {
        name: formData.name,
        email: formData.email,
        createdAt: serverTimestamp(),
      });

const docRef = await addDoc(collection(db, "コレクション名"), { 
  フィールド名: 値 
});