Zenn
🏰

ざっくりT3 Stack入門 - 環境構築

2024/03/08に公開
Next.js
環境構築
T3 Stack
tech

web入門者のけめるです。
webサービスを作りたく、T3 Stackについて入門してみたのでそのメモです。

T3 Stackについて

https://create.t3.gg

フルスタック（フロントエンドもバックエンドもいける的）なNext.jsベースのフレームワークです。

以下の技術・フレームワークが統合されています：

参考:公式ドキュメント

https://create.t3.gg/ja/usage/first-steps

pnpmのインストール

npm, yarnでもいいですがpnpmの方が速いらしいので。
以下のページを参考にインストール。

https://pnpm.io/installation

windowsの場合:

powershellにてインストール。

iwr https://get.pnpm.io/install.ps1 -useb | iex

macの場合:

多分terminalにてインストール。

curl -fsSL https://get.pnpm.io/install.sh | sh -

環境構築

T3 Stackの環境構築をして、ローカルで実行していきます。

powershell/terminalにてプロジェクトを作りたいディレクトリに移動したのち、以下を実行します。

pnpm create t3-app@latest

実行後、いろいろな質問が聞かれますが、すべてデフォルトを選択していきます。プロジェクト名は任意で。

これでプロジェクトが作成できたので、使いたいエディタ(VSCodeとか)で開きます。

ファイル構造

.
├─ public
│  └─ favicon.ico
├─ prisma
│  └─ schema.prisma
├─ src
│  ├─ env.js
│  ├─ pages
│  │  ├─ _app.tsx
│  │  ├─ api
│  │  │  ├─ auth
│  │  │  │  └─ [...nextauth].ts
│  │  │  └─ trpc
│  │  │     └─ [trpc].ts
│  │  └─ index.tsx
│  ├─ server
│  │  ├─ auth.ts
│  │  ├─ db.ts
│  │  └─ api
│  │     ├─ routers
│  │     │  └─ example.ts
│  │     ├─ trpc.ts
│  │     └─ root.ts
│  ├─ styles
│  │  └─ globals.css
│  └─ utils
│     └─ api.ts
├─ .env
├─ .env.example
├─ .eslintrc.cjs
├─ .gitignore
├─ next-env.d.ts
├─ next.config.js
├─ package.json
├─ postcss.config.cjs
├─ prettier.config.js
├─ README.md
├─ tailwind.config.ts
└─ tsconfig.json
  • .envにてデータベースや認証システムの設定等を行います。
  • 念のため、.gitignoreにて.envが登録されていることを確認してください。
  • pages/にてクライアント側のコードを、server/にてサーバー側のコードを書きます。

ローカル環境の実行（失敗）

開いたらエディタのコマンドプロンプトを起動し、以下を実行します。

pnpm run dev

エラーが出るはずです。

❌ Invalid environment variables: { DISCORD_CLIENT_ID: [ 'Required' ] }
file:///C:/<省略...>  
        throw new Error("Invalid environment variables");

上記のエラーが出てればOKです。

このエラーはNextAuthのログイン認証機能が正しく設定されていないために発生します。NextAuthを導入している際は、ローカル環境でもまずこの設定を始める必要があります。

T3 StackではGoogleやGitHubなどのいろんな認証方法を利用できますが、デフォルトでは設定が一番シンプルなDiscordになっていますので、今回はDiscordで設定してみます。

Discordの認証設定

  1. Discordアカウントを登録します。

https://discord.com

  1. 登録後、https://discord.com/developers/applications　に移動し、右上の「New Application」をクリックします。

  2. アプリケーションの名前を付け、利用規約に同意します。

  3. 「Settings → OAuth2」に移動します。

  4. 「Client ID」をコピーし、.envにてDISCORD_CLIENT_ID=の右側に貼り付けます。

  5. 「Reset Secret」をクリックし、Discordのパスワードを入力して認証したら、新しいシークレット情報をコピーし、.envにてDISCORD_CLIENT_SECRET=の右側に貼り付けます。

  6. 「Add Redirect」をクリックし、http://localhost:3000/api/auth/callback/discord と入力します。

  1. 以下を実行し、生成された文字列を.envのNEXTAUTH_SECRET=の右側に貼り付けます。
openssl rand -base64 32
  1. ローカルの場合、NEXTAUTH_URL=の右側に"http://localhost:3000"を貼り付けます。

ローカルの場合、これでDiscordの設定は終了です。

.env
# When adding additional environment variables, the schema in "/src/env.js"
# should be updated accordingly.

# Prisma
# https://www.prisma.io/docs/reference/database-reference/connection-urls#env
DATABASE_URL=""

# Next Auth
# You can generate a new secret on the command line with:
# openssl rand -base64 32
# https://next-auth.js.org/configuration/options#secret
NEXTAUTH_SECRET="<7.生成した文字列>"
NEXTAUTH_URL="http://localhost:3000"

# Next Auth Discord Provider
DISCORD_CLIENT_ID="<5.クライアントID>"
DISCORD_CLIENT_SECRET="<6.シークレットパスワード>"

supabaseの設定

このままsupabaseにてDB（データベース）の登録をしていきましょう。

https://supabase.com/

  1. 上記サイトにアクセスし、アカウント登録します。
  2. ログインしたら「Dashboard」にて「New Project」を選択します。
  3. 以下の様な画面で、プロジェクト名、DBのパスワード（後で必要）、Region（日本ならTokyoを選択）を埋めていきます。
  4. 「Project Settings → Database」に移動し、URIをコピーします。
  5. .envにて、DATABASE_URL=に貼り付けます。URI内の[YOUR-PASSWORD]という文字列の部分に先ほどの3のパスワードを入力します。
.env
DATABASE_URL="<5.URI>"
  1. prisma/schema.prismaにて、dbの内容をsupabase用に修正します。provider = "postgresql"に変更します。
schema.prisma
datasource db {
  provider = "postgresql"
  // NOTE: When using mysql or sqlserver, uncomment the @db.Text annotations in model Account below
  // Further reading:
  // https://next-auth.js.org/adapters/prisma#create-the-prisma-schema
  // https://www.prisma.io/docs/reference/api-reference/prisma-schema-reference#string
  url      = env("DATABASE_URL")
}
  1. そのまま下のUserの@db.Textをすべてアンコメントします。
schema.prisma
// Necessary for Next auth
model Account {
  id                String  @id @default(cuid())
  userId            String
  type              String
  provider          String
  providerAccountId String
  refresh_token     String? @db.Text
  access_token      String? @db.Text
  expires_at        Int?
  token_type        String?
  scope             String?
  id_token          String? @db.Text
  session_state     String?
  user              User    @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
}
  1. この状態で以下を実行します。
pnpm prisma db push

これでdbのpushが完了し、supabase上に反映されていると成功です！

supabaseの「table editor」にてprismaに登録されているデータ型が存在することを確認してください！

この状態で以下を実行し、起動するか確認して下さい。

pnpm run dev

「Sign In」からDiscord認証によるログインが可能です！

おわりに

T3 Stackとsupabaseを使えばかなり楽に認証付きのシステムが作れる気がします。

機会があれば次は具体的なアプリの設計についてまとめたいと思います。

Discussion