Folder Structure (Pages)

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.

  .
├─ public
│  └─ favicon.ico
├─ src
│  ├─ env.js
│  ├─ pages
│  │  ├─ _app.tsx
│  │  ├─ api
│  │  │  ├─ auth
│  │  │  │  └─ [...nextauth].ts
│  │  │  └─ trpc
│  │  │     └─ [trpc].ts
│  │  └─ index.tsx
│  ├─ server
│  │  ├─ auth.ts
│  │  ├─ db
│  │  │  ├─ index.ts
│  │  │  └─ schema.ts
│  │  └─ api
│  │     ├─ routers
│  │     │  └─ example.ts
│  │     ├─ trpc.ts
│  │     └─ root.ts
│  ├─ styles
│  │  └─ globals.css
│  └─ utils
│     └─ api.ts
├─ .env
├─ .env.example
├─ .eslintrc.cjs
├─ .gitignore
├─ db.sqlite (after `db:push`, sqlite only)
├─ drizzle.config.ts
├─ next-env.d.ts
├─ next.config.js
├─ package.json
├─ postcss.config.js
├─ prettier.config.js
├─ README.md
├─ start-database.sh (mysql or postgres only)
├─ tailwind.config.ts
└─ tsconfig.json

`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 code that is only used on the server.

`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`

The

db

folder contains the Drizzle client and schema. Note that drizzle also requires the

drizzle.config.ts

file (see below).

`src/server/db/index.ts`

The

index.ts

file is used to instantiate the Drizzle client at global scope. See Drizzle usage and best practices for using Drizzle with Next.js↗ for more information.

`src/server/db/schema.ts`

The

schema.ts

file is used to define the database schema. See Drizzle usage and best practices for using Drizzle 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.

`db.sqlite (sqlite only)`

The

db.sqlite

file contains your development database. This file is only created after running the

db:push

parseCommandLine, and ignored by git.

`drizzle.config.ts`

The

drizzle.config.ts

file is used to configure drizzle kit. See the documentation↗ 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.js`

The

postcss.config.js

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.

`start-database.sh (mysql or postgres only)`

The

start-database.sh

file is used to start the database. Please see the comments inside the file for information on how to start the database with your operating system.

`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.