T3 Stack入門！コメントシステム(コメント、いいね、ページネーション)を構築しよう！【3/4】T3 Stackを使用してアプリを開発したい方向けのシリーズ第三弾です

今回は、T3 Stackを利用してコメントシステムを構築します。
T3 StackはNext.js、TypeScript、tRPC、Prisma、TailwindCSS、NextAuth.jsを組み合わせたフルスタックのWeb開発スタックで、前回はこのスタックを利用してアプリ開発の基盤となるブログシステムを構築しました。
今回のコメントシステム構築編では、コメントの投稿、編集、削除機能に加えて、いいね機能とページネーション機能も実装します。
これにより、ユーザー間やユーザーとコンテンツクリエイター間の交流が活発になり、コミュニティのエンゲージメントが向上します。
いいね機能を通じて、ユーザーは他のユーザーのコメントに対する肯定的なフィードバックを簡単に提供でき、これによりポジティブなコミュニティの文化を促進します。
ページネーション機能は、大量の記事やコメントを効率的にナビゲートし、ユーザーが必要な情報を容易にアクセスできるようにします。
T3 Stackを利用したコメントシステム構築に興味がある方は、ぜひ参考にしてください。

■解説記事
https://zenn.dev/hathle/books/t3-stack-comment-book

■認証システム構築編【1/4】
https://youtu.be/hwxMoKAbk-M

■ブログシステム構築編【2/4】
https://youtu.be/F9fxUCcV3Uk

■コメントシステム構築編【3/4】
https://youtu.be/LidWFe0OlII

■サブスクシステム構築編【4/4】
https://youtu.be/jyDbkUIIZfE

■LINEお友達登録
個別にメッセージできます。
講座のソースコードも用意しています。
https://lin.ee/NKoTJnV

■目次
00:00 Intro
01:18 ブログシステム構築
01:40 Prisma
02:48 コメント投稿
07:49 コメント一覧
11:43 コメント編集
16:32 コメント削除
18:33 コメントいいね
24:29 投稿一覧ページネーション
30:10 ユーザー投稿一覧ページネーション
33:17 コメント一覧ページネーション
36:25 完成

■学習内容
・コメントを投稿、編集、削除する方法
・コメントにいいね機能を実装する方法
・投稿一覧、コメント一覧、ユーザーの投稿一覧にページネーション機能を実装する方法

■機能
・コメント一覧
・コメント投稿
・コメント編集
・コメント削除
・コメントいいね
・投稿一覧ページネーション
・コメント一覧ページネーション
・ユーザーの投稿一覧ページネーション

■フルスタックチャンネルQ&Aサイト
https://www.fullstackchannel.com/

■自己紹介
プログラミング講師のはるです。
大学では数学とプログラミングを専攻し、8年間車載開発に携わりました。
英語は得意ではありませんでしたが、国際カンファレンスに出席することがきっかけで英語を学び、30歳の新たな挑戦として海外に行くことを決意しました。
映画好きだったこともあり、カナダのバンクーバーでVFXを学び、モントリオールでハリウッド映画の製作に携わり、現在は、東京を拠点にして、独立しています。

Next.jsを使用したフルスタック開発が得意です。

お仕事など気軽にご連絡ください。
よろしくお願いいたします。

■SNS
Twitter : https://twitter.com/hathle
Website : https://harusoft.net/
Zenn : https://zenn.dev/hathle

■タグ
#nextjs
#t3stack
#prisma
#shadcn
#nextauth
#react
#supabase
#フルスタック
#エンジニア
#プログラミング