📌
Next.jsとTailWindCSS、NextAuth.js、Prismaを使用した掲示板
このサイトは、Next.jsとtailwindcss、nextauth、prismaを使用して作成した掲示板です。
技術的な特徴
- Next.js: サーバーサイドレンダリングを提供するJavaScriptフレームワーク
- TailWindCSS: CSSフレームワーク
- NextAuth.js: Next.js用の認証ライブラリ
- Prisma: データベースを扱うためのORMツール
主な機能
- ユーザー登録
- ログイン
- 名前の変更
- スレッドの作成
- パブリックスレッド
- プライベートスレッド
- タグ付け
使い方
- リポジトリをクローンする
git clone https://github.com/HRTK92/next-boards.git
- パッケージをインストールする
yarn install
- 環境変数を設定する
.env
DATABASE_URL={DATABASE_URL}
SECRET={NEXTAUTH_SECRET}
LINE_CLIENT_ID=
LINE_CLIENT_SECRET=
NEXTAUTH_URL=
NEXT_PUBLIC_SITE_NAME=
DATABASE_URLは、MongoDBのURLを指定します。
SECRETは、NextAuthのシークレットキーを指定します。
LINE_CLIENT_IDとLINE_CLIENT_SECRETは、LINEログインのクライアントIDとクライアントシークレットを指定します。
NEXTAUTH_URLは、NextAuthのURLを指定します。
NEXT_PUBLIC_SITE_NAMEは、サイト名を指定します。
- 開発サーバーを起動する
yarn dev
苦労した点
ログインしたユーザーのみがスレッドを観覧できるようにするには、どうすればいいのかという点で苦労しました。
unstable_getServerSessionを使用することで、APIを使用する際にログインしているかどうかを判定できるようになりました。
Discussion