📌

Next.jsとTailWindCSS、NextAuth.js、Prismaを使用した掲示板

2022/12/10に公開

https://github.com/HRTK92/next-boards

このサイトは、Next.jsとtailwindcss、nextauth、prismaを使用して作成した掲示板です。

技術的な特徴

  • Next.js: サーバーサイドレンダリングを提供するJavaScriptフレームワーク
  • TailWindCSS: CSSフレームワーク
  • NextAuth.js: Next.js用の認証ライブラリ
  • Prisma: データベースを扱うためのORMツール

主な機能

  • ユーザー登録
  • ログイン
  • 名前の変更
  • スレッドの作成
    • パブリックスレッド
    • プライベートスレッド
    • タグ付け

使い方

  1. リポジトリをクローンする
git clone https://github.com/HRTK92/next-boards.git
  1. パッケージをインストールする
yarn install
  1. 環境変数を設定する
.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_IDLINE_CLIENT_SECRETは、LINEログインのクライアントIDとクライアントシークレットを指定します。
NEXTAUTH_URLは、NextAuthのURLを指定します。
NEXT_PUBLIC_SITE_NAMEは、サイト名を指定します。

  1. 開発サーバーを起動する
yarn dev

苦労した点

ログインしたユーザーのみがスレッドを観覧できるようにするには、どうすればいいのかという点で苦労しました。
https://next-auth.js.org/tutorials/securing-pages-and-api-routes
unstable_getServerSessionを使用することで、APIを使用する際にログインしているかどうかを判定できるようになりました。

GitHubで編集を提案

Discussion