目標
- Next.jsでの状態管理の必要性を理解する。
- Zustandを使って軽量かつ効率的な状態管理を実装する。
- ブログに「いいね」機能を追加してユーザー体験を向上させる。
1. 企業向けアプリにおける状態管理の重要性
企業向けアプリでは、ユーザーインタラクションが増えるため、状態管理が不可欠です。Next.jsではContext APIやReduxも使えますが、Zustandは軽量でシンプルなAPIを提供し、Server Componentsとの相性も良好です。このエピソードでは、ブログに「いいね」機能を追加して状態管理を体験します。
2. Zustandのインストール
Zustandをプロジェクトに導入します。
手順：
ターミナルで以下を実行：
npm install zustand
3. Zustandストアの作成
「いいね」機能を管理するストアを設計します。
lib/store.tsの作成：
import { create } from 'zustand';
type LikeState = {
likes: { [postId: string]: number };
addLike: (postId: string) => void;
};
export const useLikeStore = create<LikeState>((set) => ({
likes: {},
addLike: (postId) =>
set((state) => ({
likes: { ...state.likes, [postId]: (state.likes[postId] || 0) + 1 },
})),
}));
4. 「いいね」機能の実装
ブログの投稿に「いいね」ボタンを追加し、Zustandで状態を管理します。
app/page.tsxの編集：
'use client';
import { useLikeStore } from '../lib/store';
import { supabase } from '../lib/supabase';
export default function Home() {
const { likes, addLike } = useLikeStore();
const fetchPosts = async () => {
const { data } = await supabase
.from('posts')
.select('*')
.order('created_at', { ascending: false });
return data || [];
};
const posts = await fetchPosts();
return (
<div className="min-h-screen flex flex-col items-center bg-gray-100 py-8">
<h1 className="text-4xl font-bold text-blue-600 mb-8">データベースからの投稿</h1>
<ul className="space-y-4 max-w-2xl w-full">
{posts.map((post) => (
<li key={post.id} className="bg-white p-4 rounded shadow">
<a href={`/posts/${post.id}`} className="text-xl font-semibold text-blue-500 hover:underline">
{post.title}
</a>
<p className="text-gray-600">{post.content}</p>
<button
onClick={() => addLike(post.id)}
className="mt-2 bg-blue-500 text-white px-4 py-1 rounded hover:bg-blue-600"
>
いいね ({likes[post.id] || 0})
</button>
</li>
))}
</ul>
</div>
);
}
注意：
-
'use client'を追加して、Zustandがクライアント側で動作するように設定。 - 現状はローカル状態のみ。後のエピソードでSupabaseと同期可能。
実践：いいね付きブログ
- 投稿リスト：各投稿に「いいね」ボタンを追加。
- 状態管理：Zustandでリアルタイムに「いいね」数を更新。
確認：
-
npm run devで起動し、http://localhost:3000で「いいね」ボタンをクリックして数が変化するか確認。
エピソード2の終了
- Zustandを使って状態管理を導入しました。
- ブログにインタラクティブな「いいね」機能を追加しました。
次回のエピソード：GraphQLとApollo Clientを統合し、データ処理を強化します。
この記事が役に立ったと思ったら、ぜひ「いいね」を押して、ストックしていただければ嬉しいです！次回のエピソードもお楽しみに！