DOCSEARCHbyAlgolia
Submit Docs

Create T3 App

website·Indexed 30 days ago

https://create-t3-app-docs.vercel.app/

An opinionated CLI for creating fullstack, type-safe web applications. The T3 Stack integrates Next.js, TypeScript, Prisma, NextAuth.js, and zod for environment variable validation.

Tokens
1.4K
Snippets
6
Records
14
Agent score
72%

What's inside T3 Stack

  1. Overview of the T3 Stack technologies

    The T3 Stack is a web development stack designed for simplicity, modularity, and full-stack typesafety. It is composed of the following core technologies:

    • NextJS: React framework for production.
    • tRPC: End-to-end typesafe APIs.
    • Tailwind CSS: Utility-first CSS framework.
    • TypeScript: Strongly typed JavaScript.
    • Prisma: Type-safe ORM for database access.
    • NextAuth.js: Authentication solution for Next.js.

  2. Overview of create-t3-app core principles

    create-t3-app is an opinionated starter for building fullstack, type-safe web applications. Its design is guided by three core beliefs: solving specific problems within its core technology stack (e.g., integrating NextAuth.js, Prisma, and tRPC rather than general state libraries), adopting 'bleeding edge' technology responsibly (prioritizing stability for databases while embracing innovation in API layers like tRPC), and ensuring end-to-end typesafety using TypeScript and tRPC.

  3. Understand Prisma ORM components

    Prisma is an open-source next-generation ORM consisting of three primary components: Prisma Client (a type-safe query builder for Node.js and TypeScript), Prisma Migrate (a tool for evolving database schemas), and Prisma Studio (a GUI for viewing and editing database data).

  4. Understand the T3 Stack technology choices

    The T3 Stack (via create-t3-app) is designed to provide a consistent and optimized developer experience by leveraging specific tools:

    • TypeScript: Used to reduce frustration and provide a more consistent experience than vanilla JavaScript through its strict type system.
    • Next.js: Chosen as the framework for React to provide an optimized approach to routing, API definitions, and image rendering.
    • tRPC, Prisma, and Tailwind CSS: Included as standard pieces for building application-like projects, though create-t3-app allows developers to selectively adopt only the pieces they need.

  5. Validate environment variables with Zod in Create-T3-App

    Create-T3-App uses Zod schemas to validate environment variables at both runtime and build-time. Validation is managed within the src/env directory using three primary files: schema.mjs (defines the schemas), server.mjs (validates server-side variables), and client.mjs (validates client-side variables). To ensure a build does not complete without required variables, every new environment variable must be defined in both the .env file and the corresponding Zod schema in schema.mjs.

  6. Initialize a new project with create-t3-app

    To start a new project using create-t3-app, run the command corresponding to your preferred package manager and follow the interactive prompts in the terminal.
    # Using npm
npx create-t3-app@latest

# Using yarn
yarn create t3-app

# Using pnpm
pnpm dlx create-t3-app@latest

  7. Use Prisma as an adapter for NextAuth.js

    If both NextAuth.js and Prisma are selected during the create-t3-app installation, the schema.prisma file is automatically populated with the required models to use Prisma as the database adapter for NextAuth.js authentication.

  8. Initialize a new T3 Stack project

    Use the create-t3-app CLI to bootstrap a new project based on the T3 Stack. This command will guide you through a setup process to configure your project's dependencies and structure.
    npx create-t3-app@latest

  9. Add and configure a new environment variable

    To add a new environment variable, you must update two locations:

    1. .env file: Add the variable using the standard NAME=VALUE format.
    2. src/env/schema.mjs: Add the variable to either serverSchema (for backend/server-side use) or clientSchema (for client-side use). Variables intended for the client must be prefixed with NEXT_PUBLIC_.
    # .env
POKEAPI_KEY=1234ABCD
    // src/env/schema.mjs
export const serverSchema = z.object({
  // ... other variables
  POKEAPI_KEY: z.string(),
});

  10. Use experimental or beta versions of create-t3-app

    Depending on your needs, you can target specific versions of the initializer:

    • Use create-t3-app@next to use the experimental v10 version of tRPC. Be aware that alpha versions of tRPC may contain API changes.
    • Use create-t3-app@beta to access the most recent development changes. This branch is more likely to contain bugs.
    # For tRPC v10 experimental
npx create-t3-app@next

# For the latest development branch
npx create-t3-app@beta

  11. Use type-safe environment variables in code

    To get auto-completion and type safety for environment variables in your editor, import the env object from the appropriate validation file. Use /env/server.mjs for server-side code and /env/client.mjs for client-side code. The env object contains the parsed and validated results of the Zod schema.
    // For server-side usage
import { env } from "@/env/server";

// For client-side usage
import { env } from "@/env/client";

  12. Understand the purpose of create-t3-app

    create-t3-app is a CLI tool designed to simplify the complex boilerplate required to set up the core T3 Stack technologies while maintaining the modularity of each piece. It is not an all-inclusive template; it provides the foundational architecture, and developers are expected to add their own additional libraries (e.g., state management) as needed.