まえがき

本当に使い始めで間違いが多いかもしれません。スマヌ。

T3とは?

私も最近使い始めたばかりなのですが、Nextjsでテンプレートを作ってくれるツールみたいで、create-next-appやcreate-react-appと似たようなものっぽいです。
一番の違いとしては、NextjsからDBに接続するときに使うPrismaやDrizzle、さらにtrpcやTailwindCSSの設定も自動でやってくれます。

今までは手動で設定していたので環境構築だけでもかなり時間がかかっていたのですが、こういうツールがあると便利ですね。

使い方

yarn create t3-app

自分はyarnをいつも使っているのでこれでいきますが、npm,pnpm,bunにも対応しています。bunに対応しているのはすごいですね。bunはリリースしてからそんなに経っていない記憶。

実行するといくつか質問されるので答えます

質問は

プロジェクト名
Typescript or Javascript
TailwindCSSを使うか
tRPCを使うか
NextAuth(認証用ライブラリ)を使うか
ORMは何にするか
AppRouterを使うか
DBは何を使うか(Postgresなど)
Gitの設定をするか
yarn で実行するか(yarn createで実行したため)
import文のエイリアス

作成できるとこんな感じで表示されます。

テスト動作

起動してみますー。

と思ったんですが、テンプレそのままだとダメっぽい

StackoverFlowから

上記では.envファイルの変数名を変更していますが、私の環境の場合は.envファイルの構成や配置場所をいろいろ工夫しないとダメでした。

具体的には、

.env.exampleファイルを削除し.envのみに
src/env.jsを変更

env.jsにかんしてはなぜかDiscordの変数読み込みをしている部分があったので消しました

import { createEnv } from "@t3-oss/env-nextjs";
import { z } from "zod";

export const env = createEnv({
  /**
   * Specify your server-side environment variables schema here. This way you can ensure the app
   * isn't built with invalid env vars.
   */
  server: {
    DATABASE_URL: z.string().url(),
    NODE_ENV: z
      .enum(["development", "test", "production"])
      .default("development"),
    NEXTAUTH_SECRET:
      process.env.NODE_ENV === "production"
        ? z.string()
        : z.string().optional(),
    NEXTAUTH_URL: z.preprocess(
      // This makes Vercel deployments not fail if you don't set NEXTAUTH_URL
      // Since NextAuth.js automatically uses the VERCEL_URL if present.
      (str) => process.env.VERCEL_URL ?? str,
      // VERCEL_URL doesn't include `https` so it cant be validated as a URL
      process.env.VERCEL ? z.string() : z.string().url()
    ),
-    DISCORD_CLIENT_ID: z.string(),
-   DISCORD_CLIENT_SECRET: z.string(),
  },

  /**
   * Specify your client-side environment variables schema here. This way you can ensure the app
   * isn't built with invalid env vars. To expose them to the client, prefix them with
   * `NEXT_PUBLIC_`.
   */
  client: {
    // NEXT_PUBLIC_CLIENTVAR: z.string(),
  },

  /**
   * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
   * middlewares) or client-side so we need to destruct manually.
   */
  runtimeEnv: {
    DATABASE_URL: process.env.DATABASE_URL,
    NODE_ENV: process.env.NODE_ENV,
    NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
    NEXTAUTH_URL: process.env.NEXTAUTH_URL,
-    DISCORD_CLIENT_ID: process.env.DISCORD_CLIENT_ID,
-   DISCORD_CLIENT_SECRET: process.env.DISCORD_CLIENT_SECRET,
  },
  /**
   * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
   * useful for Docker builds.
   */
  skipValidation: !!process.env.SKIP_ENV_VALIDATION,
  /**
   * Makes it so that empty strings are treated as undefined. `SOME_VAR: z.string()` and
   * `SOME_VAR=''` will throw an error.
   */
  emptyStringAsUndefined: true,
});

起動後はいつもの通り
http://localhost:3000/
オープンです

開くとこんな感じ。

Nextjsとおんなじ感じですね

あとがき

t3は結構がっつりフルスタックでやる人向けのツールっぽいです。ただめちゃ便利なので今後はガンガン活用したいですね。

参考サイト

公式

開発者(?)のYoutube