The best of the full stack TypeScript ecosystem...

 The best of the full stack TypeScript ecosystem...

...but ONLY the parts you need

Take what you want and nothing more!

Typesafe From The Start

We made create-t3-app to do one thing: Streamline the setup of typesafe Next.js apps WITHOUT compromising modularity.

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. Check out our other recommendations for things like state management and deployment.

Next.js

Next.js offers a lightly opinionated, heavily optimized approach to creating applications using React. It's the industry standard and we're proud to build on top of it :)

Take what you want and nothing more!

Prisma

Prisma is the best way to work with databases in TypeScript. It provides a simple, type-safe API to query your database, and it can be used with most SQL dialects (and Mongo too!).

TypeScript

We firmly believe TypeScript will help you be a better web developer. Whether you're new to JS or a seasoned pro, the "strictness" of TypeScript leads to smoother building.

Tailwind CSS

Tailwind CSS is a utility-first CSS framework that helps you build beautiful, responsive designs without any extra configuration. It’s built with utility-first principles, and is completely customizable and extendable.

tRPC

If your frontend and backend are TypeScript, it's really hard to beat the DX of tRPC. Kinda like GraphQL but without the work - seriously this lib is magic.

NextAuth.js

When you need flexible, secure, and scalable auth, NextAuth.js is top notch. It ties into your existing database and provides a simple API to manage users and sessions.

npm create t3-app@latest

yarn create t3-app

pnpm create t3-app@latest

bun create t3-app@latest

DocumentationGitHub               

FAQ

Here are some commonly asked questions about Create T3 App.

What’s next? How do I make an app with this?

We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary.

If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our Discord↗ and ask for help.

• Next.js↗
• NextAuth.js↗
• Prisma↗
• Tailwind CSS↗
• tRPC↗
• Drizzle↗

How do I keep my app up to date?

Create T3 App is a scaffolding tool, not a framework. This means that once you initialize an app, it’s yours. There is no postinstall CLI tool similar to help you stay up to date. If you want to keep track of any improvements we make to the template, you could enable notifications for releases↗ on our repository. That being said it is not really necessary to implement every change we make to the template in your app.

What learning resources are currently available?

Although the resources listed below are some of the best that exist for the T3 Stack, the community (and Theo↗) recommend that you just start using the stack and learn along the way by building with it.

If you are considering Create T3 App, chances are you might have already used some of the parts of the stack. So why not just dive in head first and learn the other parts while you build something?

Now, we realize this path doesn’t work for everyone. So, if you feel like you’ve tried the recommendation and would still like some resources, or you just aren’t confident doing it by yourself and/or feel overwhelmed by the stack, checkout these awesome tutorials on Create T3 App:

Articles

Some of these might be outdated.

• A first look at Create T3 App↗
• Migrating your T3 App into a Turborepo↗
• Integrating Stripe into your T3 App↗

Videos

• From 0 to Production - The Modern React Tutorial (RSCs, Next.js, Shadui, Drizzle, TS and more)↗ (recommended) (updated 2024)*
• Jack Herrington - Build a Note Taking app with the T3 Stack↗
• Build a Twitter Clone with the T3 Stack - tRPC, Next.js, Prisma, Tailwind & Zod↗
• Build a Blog With the T3 Stack - tRPC, TypeScript, Next.js, Prisma & Zod↗
• Build a Live Chat Application with the T3 Stack - TypeScript, Tailwind, tRPC↗
• The T3 Stack - How We Built It↗
• An overview of the Create T3 App (Next, Typescript, Tailwind, tRPC, Next-Auth)↗

Why are there 

.js

 files in the project?

As per T3-Axiom #3, we treat typesafety as a first class citizen. Unfortunately, not all frameworks and plugins support TypeScript which means some of the configuration files have to be 

.js

 files.

We try to emphasize that these files are JavaScript for a reason, by explicitly declaring each file’s type (

cjs

 or 

mjs

) depending on what’s supported by the library it is used by. Also, all the 

js

 files in this project are still typechecked using a checkJs option in the compiler (tsconfig).

I’m struggling to add i18n to my app. Is there any reference I can use?

We have decided against including i18n by default in 

create-t3-app

 because it’s a very opinionated topic and there are many ways to implement it.

However, if you struggle to implement it and want to see a reference project, we have a reference repo↗ that shows how you can add i18n to a T3 App using next-i18next↗.

Should I use 

/app

 from Next.js 13 or the more mature 

/pages

 paradigm?

You have the option when scaffolding an app using Create T3 App to opt into the 

/app

 directory structure. As of the time of writing, this feature is generally considered mature enough to be used in production by the T3 stack community. For an explanation of why it took us so long to include, you can watch this video↗.

Nevertheless, if you strongly prefer to use the old 

/pages

 paradigm, that’s still an option. Porting over your existing router can be a monumental effort, so do not feel undue pressure to do so unnecessarily.

ℹ️

For a list of supported, planned, and worked on features in the 

/app

 dir, visit the beta Next.js docs↗.

Folder Structure

T3 Collection

credit:https://create.t3.gg/