フォルダ構造 (Pages)
以下でパッケージを選択してみてください。すると、その選択したパッケージで新たに初期構成を生成したアプリケーションのフォルダ構造が表示されます。もっと下には各エントリーの説明があります。
prisma
prisma
フォルダには、データベース接続とデータベーススキーマの設定に使用する schema.prisma
ファイルが格納されています。
また、マイグレーションファイルやシードスクリプトを格納する場所でもあります(もし使用する場合)。
詳しくは、Prisma の使い方を参照してください。
public
public
フォルダには、Web サーバが提供する静的アセットが格納されています。favicon.ico
ファイルは静的アセットの一例です。
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 バックエンドのメイン設定ファイルです。この中で私たちは:
- tRPC リクエストで使用するコンテキストを定義しています。詳しくはtRPC の使い方を参照してください。
- プロシージャヘルパーをエクスポートしています。詳しくは、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.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 を参照してください。