広告 Next.js プログラミング

T3インストールから起動まで【TypeScript】

T3とは

T3(T3 Stack)とは、Next.js、TypeScript、TailwindCSSをベースとした開発スタックです。

その他に下記のようなオプションもあります。

  • NextAuth.js（認証）
  • tRPC（API）
  • Prisma / Drizzle（ORM）

これらを使うことで、クライアント、サーバーサイドともにTypeScriptを使用した開発（いわゆるフルスタック）が可能となります。

今回はDBも用意していない、まっさらな状態から開発環境を整えました。

しかし、環境構築の段階で少し詰まってしまったので防備録として残しておきます。

ポイント

公式のFirst Stepsでは表示言語を日本語にするとDBの項目のうち、下記が消えます。

  • MySQL, PostgreSQL
  • Drizzle

DBも一から構築する方は日本語に切り替えずに環境構築を進めましょう。

環境

  • WSL2 : 2.2.4.0
  • Docker Desktop : 4.31.1
  • yarn : 1.22.22
  • npm : 10.7.0

T3のプロジェクト作成手順

公式のインストール手順に沿ったら途中で詰まりましたが、

下記の手順でプロジェクトを始めることができました。

  1. yarn create t3-app
  2. sudo ./start-database.sh
  3. npx prisma db push
  4. TypeScriptサーバーの再起動
    • Ctrl + Shift + P
    • TypeScript: Restart TS Server
  5. NextAuthの設定
    • DiscordからClientID, ClientSecretを取得する
  6. NEXTAUTH_SECRETの設定
  7. localhostの起動

今回、私が詰まったのは

でした。詰まった点と解消方法を以下に記します。

DBの準備

yarn crate t3-app が完了し、プロジェクトルートで ./start-database.sh を実行したところ下記のエラーが発生しました。

permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Get "http://%2Fvar%2Frun%2Fdocker.sock/v1.45/containers/json?filters=%7B%22name%22%3A%7B%22pocket-money-postgres%22%3Atrue%7D%7D": dial unix /var/run/docker.sock: connect: permission denied

permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Get "http://%2Fvar%2Frun%2Fdocker.sock/v1.45/containers/json?all=1&filters=%7B%22name%22%3A%7B%22pocket-money-postgres%22%3Atrue%7D%7D": dial unix /var/run/docker.sock: connect: permission denied

awk: warning: escape sequence `\/' treated as plain `/'

docker: permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Head "http://%2Fvar%2Frun%2Fdocker.sock/_ping": dial unix /var/run/docker.sock: connect: permission denied.

See 'docker run --help'.

Dockerに接続する際に権限がないため、エラーが発生したようです。

Dockerにユーザーを登録する方法もありますが、今回は下記のコマンドで実行に成功しました。

sudo ./start-database.sh

実行する際にWSL側で管理者権限として実行したら問題ないようです。

NEXTAUTH_SECRETの設定

FirstStepには以下の説明があります。

Set the NEXTAUTH_SECRET in .env. In development any string will work, for production see the note in .env on generating a secure secret.

悩んでいる人
悩んでいる人

NEXTAUTH_SECRETを設定するのはわかったけど、どうやって？

この説明だけではわからなかったのですが、.env内のコメントに方法が書かれてありました。

  1. openssl rand -base64 32
  2. NEXTAUTH_SECRETのコメントアウトを解除し、出力結果を入力

これで晴れて開発スタートすることができるようになりました！

あとは好きなように開発をすすめていくだけです。お疲れ様でした！



-Next.js, プログラミング
-, , , , ,