Attention: This page is 29 days older than the English version and might be outdated. If you're a native speaker of this language and would like to contribute to the project, please consider updating this page to match the latest English version.
You can also view the English version of this page.
フォルダ構造
以下でパッケージを選択してみてください。すると、その選択したパッケージで新たに初期構成を生成したアプリケーションのフォルダ構造が表示されます。もっと下には各エントリーの説明があります。
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.cjs
Tailwind の PostCSS の利用には、postcss.config.cjs
ファイルが使用されます。詳しくは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 を参照してください。