Jump to content

フォルダ構造 (Pages)

以下でパッケージを選択してみてください。すると、その選択したパッケージで新たに初期構成を生成したアプリケーションのフォルダ構造が表示されます。もっと下には各エントリーの説明があります。

  

prisma

prisma フォルダには、データベース接続とデータベーススキーマの設定に使用する schema.prisma ファイルが格納されています。 また、マイグレーションファイルやシードスクリプトを格納する場所でもあります(もし使用する場合)。 詳しくは、Prisma の使い方を参照してください。

public

publicフォルダには、Web サーバが提供する静的アセットが格納されています。favicon.icoファイルは静的アセットの一例です。

src/env

環境変数の検証や型定義に使用します。環境変数を参照。

src/pages

pagesフォルダには、Next.js アプリケーションのすべてのページが格納されます。pagesディレクトリの直下にある index.tsx ファイルは、アプリケーションのホームページとなります。_app.tsxファイルは、アプリケーションを各種プロバイダでラップするために使用されます。詳しくは、Next.js ドキュメントを参照してください。

src/pages/api

apiフォルダには、Next.js アプリケーションのすべての API ルーティングが格納されています。API ルートについては、Next.js Api Routes Docsを参照してください。

src/pages/api/auth/[...nextauth].ts

[...nextauth].tsファイルは、NextAuth.js の認証スラッグルートです。認証リクエストを処理するために使用されます。NextAuth.js の詳細については NextAuth.js usage を、キャッチオール/スラッグルートについては Next.js Dynamic Routes Docs を参照してください。

src/pages/api/trpc/[trpc].ts

[trpc].tsファイルは、tRPC API のエントリポイントです。このファイルは、tRPC リクエストを処理するために使用されます。このファイルの詳細についてはtRPC の使い方を、キャッチオール/スラッグルートの情報についてはNext.js Dynamic Routes Docs を参照してください。

src/server

serverフォルダは、サーバサイドのコードとクライアントサイドのコードを明確に分けるために使用されます。

src/server/auth.ts

サーバーサイドの認証ロジックのメインエントリポイントです。 ここでは、NextAuth.js の設定オプションモジュール拡張 と、サーバサイドでユーザのセッションを取得するなどの認証に関する DX ユーティリティを提供しています。詳しくは NextAuth.js usage をご覧ください。

src/server/db.ts

db.tsファイルは、グローバルスコープで Prisma クライアントをインスタンス化するために使用されます。詳しくは、Prisma の使い方Next.js で Prisma を使うためのベストプラクティスをご覧ください。

src/server/api

apiフォルダには、tRPC のサーバーサイドのコードが格納されています。

src/server/api/routers

routersフォルダには、すべての tRPC サブルーターが格納されています。

src/server/api/routers/example.ts

example.tsファイルは、publicProcedureヘルパーを利用した tRPC ルーターの例で、public な tRPC ルートを作成する方法を示しています。

このルーターには、あなたがどのパッケージを選択したかに応じて増減させたルーターが含められており、あなたが必要とする使用方法を示しています。

src/server/api/trpc.ts

trpc.tsファイルは、tRPC バックエンドのメイン設定ファイルです。この中で私たちは:

  1. tRPC リクエストで使用するコンテキストを定義しています。詳しくはtRPC の使い方を参照してください。
  2. プロシージャヘルパーをエクスポートしています。詳しくは、tRPC usage を参照してください。

src/server/api/root.ts

root.ts ファイルは、ルータの型定義と同様に、tRPC ルータをマージして 1 つのルータとしてエクスポートするために使用されます。詳しくはtRPC の使い方を参照してください。

src/styles

stylesフォルダには、アプリケーションのグローバルスタイルが格納されます。

src/utils

utilsフォルダは、よく再利用されるユーティリティ関数を置いておくために使用されます。

src/utils/api.ts

api.tsファイルは、tRPC のフロントエンドのエントリポイントです。詳しくはtRPC の使い方を参照してください。

.env

.envファイルは、環境変数を格納するために使用されます。詳しくは 環境変数 を参照してください。このファイルは、git 履歴にコミットする必要はありません。

.env.example

.env.example ファイルは、選択したライブラリに基づく環境変数の例を示しています。このファイルは git 履歴にコミットしておく必要があります。

.eslintrc.cjs

.eslintrc.cjsファイルは、ESLint の設定に使用されます。詳しくはESLint Docsを参照してください。

next-env.d.ts

next-env.d.tsファイルは、Next.js の型が TypeScript コンパイラに拾われるようにするためのファイルです。いつでも変化し得るものなので、削除や編集はしないでください。 詳細は Next.js Docs をご覧ください。

next.config.mjs

next.config.mjsファイルは、Next.js を設定するためのものです。詳しくはNext.js Docsを参照してください。注: .mjs という拡張子は、ESM でのインポートができるようにするために使用されます。

postcss.config.js

Tailwind の PostCSS の利用には、postcss.config.jsファイルが使用されます。詳しくはTailwind PostCSS Docsを参照してください。

prettier.config.mjs

prettier.config.mjsファイルは、Tailwind CSS クラスをフォーマットするために prettier-plugin-tailwindcss を含めるように Prettier を設定するために使用します。詳しくは Tailwind CSS ブログポスト を参照してください。

tsconfig.json

tsconfig.jsonファイルは、TypeScript を設定するために使用されます。Create T3 App とそのライブラリの TypeScript を最適に利用するために、strict modeのようないくつかの非デフォルトが有効になっています。詳細については、TypeScript ドキュメント または 使用法の TypeScript を参照してください。