The T3 Stack is a modern and modular web development stack, created by Theo, with a focus on simplicity, modularity, and full-stack typesafety. The stack has been designed with customization in mind, allowing developers to swap in and out components based on the specific needs of their project. This means each part is optional, and the “template” for a T3 Stack application is generated based on your specific needs.
Table of Contents
- Core Components of T3 Stack
- Philosophy of T3 Stack
- Embracing New Technologies
- Typesafety in T3 Stack
- Setup Prisma
- Setup NextAuth.js
- tRPC in Action
Core Components of T3 Stack
The core components of the T3 Stack are Next.js and TypeScript. Tailwind CSS is also typically included. If backend functionality is required, tRPC, Prisma, and NextAuth.js are excellent additions to the stack. The stack comes with a CLI tool named
create-t3-app, built by experienced T3 Stack developers to streamline the setup of a T3 Stack application.
npx create-t3-app my-app
Philosophy of T3 Stack
The T3 Stack is an opinionated project with a set of core beliefs around building and decision making. The team behind T3 Stack believe that everything added to
create-t3-app should solve a specific issue that exists within the core technologies included.
Embracing New Technologies
The T3 Stack embraces the use of bleeding-edge technology, using riskier tech in less risky parts. The team wouldn’t bet on risky new database tech but happily bet on tRPC since it’s just functions that are trivial to move off.
Typesafety in T3 Stack
The ultimate goal of the Create T3 App will provide the quickest way to start a new full-stack, typesafe web application. The team takes typesafety seriously, as it improves productivity and helps ship fewer bugs.
If your app includes Prisma, you will need to run
npx prisma db push from the root directory of your application. This command will sync your Prisma schema to your database and will generate the TypeScript types for the Prisma Client based on your schema.
npx prisma db push
If your app includes NextAuth.js, you will need to perform some initial setup, starting with the
DiscordProvider that NextAuth.js offers. You will need a Discord account and will need to create a new application on Discord’s developer applications page. From there, you will need to add your application’s Client ID and Secret to your
.env file and set up a redirect URL for authentication. Finally, you will need to set the
NEXTAUTH_SECRET in your
# .env file DISCORD_CLIENT_ID=your_discord_client_id DISCORD_CLIENT_SECRET=your_discord_client_secret NEXTAUTH_SECRET=your_nextauth_secretCode language: PHP (php)
tRPC in Action
If your app includes tRPC, you can find examples of how tRPC queries work in
In conclusion, the T3 Stack offers a modular and typesafe full-stack solution for web development. It embraces leading-edge technology and maintains a strict focus on solving specific problems with its core technologies.
With the powerful tools it offers, such as Next.js, TypeScript, Prisma, tRPC, and NextAuth.js, developers have the opportunity to build efficient, scalable, and maintainable web applications. The T3 Stack, with its flexibility and commitment to typesafety, is an exciting tool in the modern web development landscape.