はじめに
Convexでチャットアプリをつくるのは手軽だったが、GoogleのFirebaseも同じようなツールであるため、同じようなアプリをつくって、比較することにします。
「Building a Real-Time Chat App with Firebase and Next.js」という記事を見つけたので、こちらを参考に進めてみます。詳細は、元ネタの方を参照してください。
また、記事で紹介しているソースはこちら
開発
以下のツールを使います
- Next.js：Reactフレームワーク
- Firebase Firestore：リアルタイムデータベース
- Tailwind CSS：スタイリング用
- shadcn/ui：事前構築済みのUIコンポーネント
- Zod：メッセージの実行時バリデーション
Firebaseコンソールからプロジェクトを作成する
プロジェクトにFirestoreを追加する
テストモードで開始する
プロジェクトの設定を開き、マイアプリを表示する
</>をクリックし、ウェブアプリを作成する
Firestone コレクションを作成する
- collection名：chat-app-collectionで作成した
Nextjsアプリを作成する
% npx create-next-app@latest my-chat-app
Need to install the following packages:
create-next-app@15.4.6
Ok to proceed? (y)
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
Creating a new Next.js app in *****/my-chat-app.
Using npm.
Initializing project with template: app-tw
Installing dependencies:
- react
- react-dom
- next
Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- @tailwindcss/postcss
- tailwindcss
added 59 packages, and audited 60 packages in 29s
11 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Initialized a git repository.
Success! Created my-chat-app at *****/my-chat-app
% cd my-chat-appFirebaseアプリ作成時に、firebaseConfigが表示されるので、.env.localに以下の形式で保存する
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
NEXT_PUBLIC_FIREBASE_COLLECTION=chat-app-collectionFirebase SDK初期化のコードを、次の内容でlib/firebase.tsとして作成する
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
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,
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
export { db };Zodライブラリによるメッセージスキーマの宣言
Zodは、TypeScriptを第一に考えたスキーマの宣言とバリデーションを行うライブラリです。これは、アプリケーションの実行時（ランタイム）に、データが想定通りの構造や型を持っているかを厳密にチェックするために使われます。
TypeScriptにも型システムがありますが、これはコンパイル時にのみ有効です。しかし、アプリケーションが外部からデータを受け取る際（例：APIレスポンス、フォーム入力）には、データが実際に正しいかどうかを実行時に検証する必要があります。Zodは、このランタイムでのチェックを簡単に行うために存在します。
import { z } from "zod"
import { Timestamp } from "firebase/firestore"
export const messageSchema = z.object({
id: z.string(),
text: z.string().min(1),
sender: z.string(),
timestamp: z.instanceof(Timestamp),
})
export type Message = z.infer<typeof messageSchema>githubのソースを使って動作確認する
% git clone https://github.com/Mumma6/firebase-chat-app.git
% cd firebase-chat-app
% touch .env.local
.env.localの内容をコピペする
% npm install
% npm run build
% npm run dev
localhost:3000 を２つ立ち上げて、チャットできることを確認
Firestoreのドキュメントを確認する
ソースコードの量はあまり多くなく動いているので、Firebase, Firestoneを使い、Nextjsでアプリを作るのも、悪くなさそうな印象を受けた。
今後、このソースコードを読み込み、また、Firebaseで認証も実装できるという話なので、引き続き調査をすすめる