Folder Structure
Please select your packages to see the folder structure of a newly scaffolded app with those selections. Further down, you will find a description of each entry.
prisma
The prisma
folder contains the schema.prisma
file which is used to configure the database connection and the database schema. It is also the location to store migration files and/or seed scripts, if used. See Prisma usage for more information.
public
The public
folder contains static assets that are served by the web server. The favicon.ico
file is an example of a static asset.
src/env
Used for environment variable validation and type definitions - see Environment Variables.
src/pages
The pages
folder contains all the pages of the Next.js application. The index.tsx
file at the root directory of /pages
is the homepage of the application. The _app.tsx
file is used to wrap the application with providers. See Next.js documentationβ for more information.
src/pages/api
The api
folder contains all the API routes of the Next.js application. See Next.js Api Routes Docsβ for info on api routes.
src/pages/api/auth/[...nextauth].ts
The [...nextauth].ts
file is the NextAuth.js authentication slug route. It is used to handle authentication requests. See NextAuth.js usage for more information on NextAuth.js, and Next.js Dynamic Routes Docsβ for info on catch-all/slug routes.
src/pages/api/trpc/[trpc].ts
The [trpc].ts
file is the tRPC API entrypoint. It is used to handle tRPC requests. See tRPC usage for more information on this file, and Next.js Dynamic Routes Docsβ for info on catch-all/slug routes.
src/server
The server
folder is used to clearly separate server-side code from client-side code.
src/server/auth.ts
The main entrypoint for server-side authentication logic. Here, we setup the NextAuth.js configuration options, perform module augmentation as well as provide some DX utilities for authentication such as retrieving the userβs session on the server-side. See NextAuth.js usage for more information.
src/server/db.ts
The db.ts
file is used to instantiate the Prisma client at global scope. See Prisma usage and best practices for using Prisma with Next.jsβ for more information.
src/server/api
The api
folder contains the tRPC server-side code.
src/server/api/routers
The routers
folder contains all your tRPC sub-routers.
src/server/api/routers/example.ts
The example.ts
file is an example tRPC router utilizing the publicProcedure
helper to demonstrate how to create a public tRPC route.
Depending on your chosen packages this router contains more or less routes to best demonstrate the usage to your needs.
src/server/api/trpc.ts
The trpc.ts
file is the main configuration file for your tRPC back-end. In here we:
- Define context used in tRPC requests. See tRPC usage for more information.
- Export procedure helpers. See tRPC usage for more information.
src/server/api/root.ts
The root.ts
file is used to merge tRPC routers and export them as a single router, as well as the routerβs type definition. See tRPC usage for more information.
src/styles
The styles
folder contains the global styles of the application.
src/utils
The utils
folder is used to store commonly re-used utility functions.
src/utils/api.ts
The api.ts
file is the front-end entrypoint to tRPC. See tRPC usage for more information.
.env
The .env
file is used to store environment variables. See Environment Variables for more information. This file should not be committed to git history.
.env.example
The .env.example
file shows example environment variables based on the chosen libraries. This file should be committed to git history.
.eslintrc.cjs
The .eslintrc.cjs
file is used to configure ESLint. See ESLint Docsβ for more information.
next-env.d.ts
The next-env.d.ts
file ensures Next.js types are picked up by the TypeScript compiler. You should not remove it or edit it as it can change at any time. See Next.js Docsβ for more information.
next.config.mjs
The next.config.mjs
file is used to configure Next.js. See Next.js Docsβ for more information. Note: The .mjs extension is used to allow for ESM imports.
postcss.config.cjs
The postcss.config.cjs
file is used for Tailwind PostCSS usage. See Tailwind PostCSS Docsβ for more information.
prettier.config.mjs
The prettier.config.mjs
file is used to configure Prettier to include the prettier-plugin-tailwindcss for formatting Tailwind CSS classes. See the Tailwind CSS blog postβ for more information.
tsconfig.json
The tsconfig.json
file is used to configure TypeScript. Some non-defaults, such as strict mode
, have been enabled to ensure the best usage of TypeScript for Create T3 App and its libraries. See TypeScript Docsβ or TypeScript Usage for more information.
drizzle.config.ts
The drizzle.config.ts
file is used to configure drizzle kit. See the documentationβ for more information.