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
- Conclusion
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.
// They add things like NextAuth.js and integrate Prisma and tRPC for you.
import NextAuth from "next-auth";
import Providers from "next-auth/providers";
import { PrismaClient } from "@prisma/client";
import { createRouter } from "@trpc/server";
Code language: JavaScript (javascript)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.
Setup Prisma
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
Setup NextAuth.js
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.
# .env file
DISCORD_CLIENT_ID=your_discord_client_id
DISCORD_CLIENT_SECRET=your_discord_client_secret
NEXTAUTH_SECRET=your_nextauth_secret
Code language: PHP (php)tRPC in Action
If your app includes tRPC, you can find examples of how tRPC queries work in src/pages/index.tsx and src/server/api/routers/example.ts.
// src/pages/index.tsx
import { createTRPC
Client } from '@trpc/client';
import { AppRouter } from 'src/server/api';
const client = createTRPCClient<AppRouter>({
url: '<http://localhost:3000/api/trpc>',
});
export async function getServerSideProps() {
const date = await client.query('getDate');
return {
props: {
date,
},
};
}
// src/server/api/routers/example.ts
import { createRouter } from '@trpc/server';
import { z } from 'zod';
export const exampleRouter = createRouter().query('getDate', {
resolve: async () => {
const date = new Date().toISOString();
return date;
},
});
Code language: JavaScript (javascript)Conclusion
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.
