Next.js 13 + NextAuth + Prisma with PlanetScale MySQL project.
planetscale-mysql-prisma-nextauth-nextjs-app は、Next.js を使用した認証付きのウェブアプリケーションのベースとして構築されたプロジェクトです。このプロジェクトでは、NextAuth を使用して簡単に認証を統合できます。 また先進的なサーバーレスMySQLプラットフォームのPlanetScaleをデータベースと利用しており、ブログ機能を構築しています。
このプロジェクトでは、いくつかの主要なパッケージとライブラリを使用します。それぞれについて、それぞれについて詳しく説明します。
-
Next.js（公式リンク： Next.js：
Next.jsは、Webアプリケーションを構築するための人気のReactフレームワークです。サーバーサイド・レンダリング、ルーティング、その他の機能を備えています。
-
NextAuth（公式リンク： NextAuth.js：
NextAuthは、Next.jsアプリケーションのための認証ライブラリです。認証プロバイダの統合を簡略化し、柔軟な認証システムを提供します。
NextAuthの主な特徴は以下のとおりです：
- マルチプロバイダ対応： Google、GitHub、Facebookなど、さまざまな認証プロバイダを統合できます。アプリケーションごとに異なる認証オプションを簡単に設定できます。
- セッション管理： NextAuthにはセッション管理が組み込まれており、アプリケーションのユーザーセッションや認証状態を簡単に管理できます。
- カスタム認証： NextAuthでは、カスタム認証のフローや動作を定義することができます。アプリケーション固有のニーズに合わせて、ユーザー認証と認可の仕組みをカスタマイズできます。
- Secure by default： クロスサイトリクエストフォージェリ（CSRF）やクロスサイトスクリプティング（XSS）などの一般的なセキュリティ問題を防ぐなど、セキュリティのベストプラクティスに従っています。
- JWT (JSON Web Tokens) サポート： NextAuth は、セキュアな認証と認可のために JSON Web トークンをサポートしています。
- 認証コールバック： 認証コールバックを定義して、認証プロセスの動作を制御することができます。たとえば、サインイン成功後のリダイレクト動作をカスタマイズできます。
-
@heroicons/react (公式リンク： Heroicons)：
Heroiconsは、Webプロジェクトで使用できる、フリーでMITライセンスの高品質なSVGアイコンのセットです。heroicons/react`パッケージを使用すると、Reactアプリケーションでこれらのアイコンを簡単に使用できます。
-
classnames（公式リンク： classnames)：
classnames` ライブラリは、クラス名を条件付きで結合するためのシンプルなユーティリティを提供します。Reactコンポーネントのクラスを動的に追加または削除するためによく使用されます。
-
tailwindcss (公式リンク： Tailwind CSS)：
Tailwind CSSはユーティリティファーストのCSSフレームワークで、クラスを組み合わせることでユーザーインターフェイスを素早く構築できます。カスタマイズ性が高く、迅速な開発に最適です。
-
daisyui（公式リンク： DaisyUI)：
DaisyUIは、Tailwind CSSのためのUIコンポーネントライブラリです。美しくカスタマイズ可能なコンポーネントのセットを追加し、プロジェクトのデザインを強化します。
-
prettier（公式リンク： Prettier)：
Prettierは、一貫したスタイルになるようにコードを自動的に整形する、意見を反映したコード整形ツールです。きれいで一貫性のあるコードベースを維持するためによく使われます。
このプロジェクトを実行するには、以下の手順に従ってください。
-
プロジェクトをクローンまたはダウンロードして、プロジェクトディレクトリに移動します。
git clone https://github.com/MSK1206/planetscale-mysql-prisma-nextauth-nextjs-app -
プロジェクトディレクトリで以下のコマンドを実行して、依存関係をインストールします。
npm install -
プロジェクトディレクトリで以下のコマンドを使用して、開発サーバーを起動します。
npm run dev -
ブラウザで http://localhost:3000 にアクセスして、プロジェクトを確認します。
当リポジトリではデプロイ先をVercelを想定しています。 Vercelでのデプロイをする場合は
pakeage.json
または、Vercelの
Build Command
の適宜変更が必要です。
例：pakeage.json
// pakeage.jsonに追記する場合
{
"name": "vercel-postgres-prisma-nextauth-nextjs-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "prisma generate && prisma db push && next build",
"start": "next start",
"lint": "next lint"
},
//...省略例：Vercel Build Command
prisma generate && prisma db push && next build
