repository·main·Indexed 12 days ago
https://github.com/t3-oss/create-t3-appA modular CLI for scaffolding full-stack, typesafe Next.js applications. The T3 Stack integrates Next.js, tRPC, Tailwind CSS, TypeScript, and database ORMs like Prisma or Drizzle, along with NextAuth.js for authentication.
create-t3-app is a CLI tool designed to streamline the setup of a modular T3 Stack application.
Unlike a static template, create-t3-app is a generator that builds your project based on your specific needs. Each piece of the stack is optional. It is not intended to be an all-inclusive template; instead, it provides the core infrastructure, and you are expected to bring your own libraries for specific needs like state management or deployment.
A newly scaffolded T3 App using the Next.js App Router follows a specific organizational pattern to separate client, server, and configuration concerns.
Key directories include:
src/app: Contains Next.js routes and layouts.src/server: Contains server-only logic (database, API, auth).src/trpc: Contains the setup for calling tRPC from both Server and Client components.src/env: Handles environment variable validation and types.public: Holds static assets like favicon.ico.prisma: Contains schema.prisma and database migrations (if using Prisma).src/server/db: Contains Drizzle client and schema (if using Drizzle).A newly scaffolded T3 App using the Next.js Pages Router follows a specific organizational pattern to separate client-side, server-side, and configuration logic.
prisma/: Contains schema.prisma for database configuration and schema definition. Also stores migrations and seed scripts.public/: Holds static assets like favicon.ico.src/env/: Handles environment variable validation and provides TypeScript definitions.src/pages/: Contains all Next.js pages. index.tsx is the homepage, and _app.tsx wraps the application with providers.src/server/: Contains code strictly intended for the server side to ensure clear separation from client code.src/styles/: Contains global CSS/styles.src/utils/: Stores reusable utility functions..env: Stores sensitive environment variables. Do not commit this to git..env.example: A template of required environment variables. Commit this to git.next.config.mjs: Next.js configuration (uses .mjs for ESM support).tsconfig.json: TypeScript configuration with recommended defaults like strict mode enabled..eslintrc.cjs: ESLint configuration.next-env.d.ts: Automatically managed Next.js TypeScript definitions. Do not edit or remove.The T3 Stack is a web development stack focused on simplicity, modularity, and full-stack typesafety. It is not a monolithic template, but a modular CLI that allows you to pick and choose components.
Core technologies typically included in a T3 Stack project:
t-object pattern. This change affects how you define and access your tRPC router and procedures in the scaffolded application.The T3 Stack is a collection of technologies bootstrapped by create-t3-app. If you are new to these tools, you should consult their official documentation to understand how they work within your project:
The src/app directory follows the Next.js App Router convention.
src/app/page.tsx: The homepage of your application.src/app/layout.tsx: Used to wrap the application with providers (e.g., Auth, Query Client).src/app/api/auth/[...nextauth]/route.ts: The NextAuth.js authentication slug route used to handle auth requests.src/app/api/trpc/[trpc]/route.ts: The tRPC API entrypoint used to handle tRPC requests.Create T3 App uses @t3-oss/env-nextjs and zod to validate environment variables at both runtime and buildtime via src/env.js. This ensures that the application will not build or run if required variables are missing or invalid.
The createEnv function defines schemas for three categories:
server: Variables accessible only on the server side.client: Variables accessible on the client side (typically prefixed with NEXT_PUBLIC_).runtimeEnv: A mapping that explicitly links process.env keys to the schema. This manual destructuring is required to prevent Next.js from stripping variables out of the bundle during certain build processes.import { createEnv } from "@t3-oss/env-nextjs";
import { z } from "zod";
export const env = createEnv({
server: {
NODE_ENV: z.enum(["development", "test", "production"]),
},
client: {
// NEXT_PUBLIC_CLIENTVAR: z.string(),
},
runtimeEnv: {
NODE_ENV: process.env.NODE_ENV,
},
});The prisma folder is the central location for database configuration.
prisma/schema.prisma: Used to configure the database connection and define the database schema.The project follows three core principles (Axioms) that guide its development and the types of tools it includes:
zustand, redux) unless they are essential to the core stack integration (like NextAuth.js or Prisma).tRPC because they are easy to migrate away from if necessary.The following services are recommended for various parts of your stack: