The T3 Stack

The “T3 Stack” is a web development stack made by Theo↗ focused on simplicity, modularity, and full-stack typesafety.

The core pieces are Next.js↗ and TypeScript↗. Tailwind CSS↗ is almost always included. If you’re doing anything resembling backend, tRPC↗, Prisma↗, and NextAuth.js↗ are great additions too.

You may have noticed that there are a… lot of pieces. That’s by design. Swap pieces in and out as you need - this stack is modular at its core

So… what is create-t3-app? A template?

Kind of? create-t3-appis a CLI built by seasoned T3 Stack devs to streamline the setup of a modular T3 Stack app. This means each piece is optional, and the “template” is generated based on your specific needs.

After countless projects and many years on this tech, we have lots of opinions and insights. We’ve done our best to encode them into this CLI.

This is NOT an all-inclusive template. We expect you to bring your own libraries that solve the needs of YOUR application. While we don’t want to prescribe solutions to more specific problems like state management and deployment, we do have some recommendations listed here.

---

Setup Create T3 App

Now you knew what is create-t3-app

So Now we will create our first t3 app

first you must run the command that creates the app structure

# npm
npm create t3-app@latest

# yarn
yarn create t3-app

# pnpm
pnpm create t3-app@latest

# bun
bun create t3-app@latest

Answer your questions as you want but answer it as we answer it to complete the post with us:

   ___ ___ ___   __ _____ ___   _____ ____    __   ___ ___
  / __| _ \ __| /  \_   _| __| |_   _|__ /   /  \ | _ \ _ \
 | (__|   / _| / /\ \| | | _|    | |  |_ \  / /\ \|  _/  _/
  \___|_|_\___|_/‾‾\_\_| |___|   |_| |___/ /_/‾‾\_\_| |_|


│
◇  What will your project be called?
│  first-t3-app
│
◇  Will you be using TypeScript or JavaScript?
│  TypeScript
│
◇  Will you be using Tailwind CSS for styling?
│  Yes
│
◇  Would you like to use tRPC?
│  No
│
◇  What authentication provider would you like to use?
│  NextAuth.js
│
◇  What database ORM would you like to use?
│  Prisma
│
◇  Would you like to use Next.js App Router?
│  Yes
│
◇  What database provider would you like to use?
│  PostgreSQL
│
◇  Should we initialize a Git repository and stage the changes?
│  Yes
│
◇  Should we run 'npm install' for you?
│  Yes
│
◇  What import alias would you like to use?
│  @/

Folder Structure

Command npm create t3-app@latest Creates some folder each of them have a reason for creating it so let's discover why these folders have created:

The Folder Structure:

.
├─ public
│  └─ favicon.ico
├─ prisma
│  └─ schema.prisma
├─ src
│  ├─ env.js
│  ├─ pages
│  │  ├─ _app.tsx
│  │  ├─ api
│  │  │  └─ auth
│  │  │     └─ [...nextauth].ts
│  │  └─ index.tsx
│  ├─ server
│  │  ├─ auth.ts
│  │  └─ db.ts
│  └─ styles
│     └─ globals.css
├─ .env
├─ .env.example
├─ .eslintrc.cjs
├─ .gitignore
├─ next-env.d.ts
├─ next.config.js
├─ package.json
├─ postcss.config.cjs
├─ prettier.config.js
├─ README.md
├─ tailwind.config.ts
└─ tsconfig.json

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(app) 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/server

The server folder is used to clearly separate server-side code from client-side code.

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/styles

The styles folder contains the global styles of the application.

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

Now, the end of our article don't forget to follow, like and support us with a comment 💖