Jump to content

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/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.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 を参照してください。


Recent Contributors To This Page