|
| 1 | +# Next.js + tRPC + Prisma Todo App |
| 2 | + |
| 3 | +A simple, clean todo application showcasing the integration of Next.js App Router, tRPC, and Prisma. |
| 4 | + |
| 5 | +## Tech Stack |
| 6 | + |
| 7 | +- **Next.js 15** - React framework with App Router |
| 8 | +- **tRPC 11** - End-to-end typesafe APIs |
| 9 | +- **Prisma** - Database ORM |
| 10 | +- **React Query** - Data fetching and caching |
| 11 | +- **TypeScript** - Type safety |
| 12 | +- **Tailwind CSS** - Styling |
| 13 | + |
| 14 | +## Project Structure |
| 15 | + |
| 16 | +``` |
| 17 | +src/ |
| 18 | +├── app/ |
| 19 | +│ ├── api/trpc/[trpc]/route.ts # tRPC API handler |
| 20 | +│ ├── layout.tsx # Root layout |
| 21 | +│ ├── page.tsx # Home page |
| 22 | +│ └── todos/page.tsx # Todo list page |
| 23 | +├── components/ |
| 24 | +│ └── providers.tsx # React Query & tRPC providers |
| 25 | +├── lib/ |
| 26 | +│ ├── db/ |
| 27 | +│ │ └── index.ts # Prisma client |
| 28 | +│ └── trpc/ |
| 29 | +│ ├── context.ts # tRPC context |
| 30 | +│ ├── index.ts # tRPC initialization |
| 31 | +│ └── routers/ |
| 32 | +│ ├── index.ts # Main router |
| 33 | +│ └── todo.ts # Todo routes |
| 34 | +└── utils/ |
| 35 | + └── trpc.ts # tRPC React client |
| 36 | +
|
| 37 | +prisma/ |
| 38 | +├── schema.prisma # Prisma schema |
| 39 | +└── generated/ # Generated Prisma client |
| 40 | +``` |
| 41 | + |
| 42 | +## Getting Started |
| 43 | + |
| 44 | +### 1. Install Dependencies |
| 45 | + |
| 46 | +```bash |
| 47 | +bun install |
| 48 | +``` |
| 49 | + |
| 50 | +### 2. Set Up Database |
| 51 | + |
| 52 | +Create a new [Prisma Postgres](https://www.prisma.io/docs/postgres/overview) database by executing: |
| 53 | + |
| 54 | +```terminal |
| 55 | +npx prisma init --db |
| 56 | +``` |
| 57 | + |
| 58 | +If you don't have a [Prisma Data Platform](https://console.prisma.io/) account yet, or if you are not logged in, the command will prompt you to log in using one of the available authentication providers. A browser window will open so you can log in or create an account. Return to the CLI after you have completed this step. |
| 59 | + |
| 60 | +Once logged in (or if you were already logged in), the CLI will prompt you to: |
| 61 | +1. Select a **region** (e.g. `us-east-1`) |
| 62 | +1. Enter a **project name** |
| 63 | + |
| 64 | +After successful creation, you will see output similar to the following: |
| 65 | + |
| 66 | +<details> |
| 67 | + |
| 68 | +<summary>CLI output</summary> |
| 69 | + |
| 70 | +```terminal |
| 71 | +Let's set up your Prisma Postgres database! |
| 72 | +? Select your region: ap-northeast-1 - Asia Pacific (Tokyo) |
| 73 | +? Enter a project name: testing-migration |
| 74 | +✔ Success! Your Prisma Postgres database is ready ✅ |
| 75 | +
|
| 76 | +We found an existing schema.prisma file in your current project directory. |
| 77 | +
|
| 78 | +--- Database URL --- |
| 79 | +
|
| 80 | +Connect Prisma ORM to your Prisma Postgres database with this URL: |
| 81 | +
|
| 82 | +prisma+postgres://accelerate.prisma-data.net/?api_key=... |
| 83 | +
|
| 84 | +--- Next steps --- |
| 85 | +
|
| 86 | +Go to https://pris.ly/ppg-init for detailed instructions. |
| 87 | +
|
| 88 | +1. Install and use the Prisma Accelerate extension |
| 89 | +Prisma Postgres requires the Prisma Accelerate extension for querying. If you haven't already installed it, install it in your project: |
| 90 | +npm install @prisma/extension-accelerate |
| 91 | +
|
| 92 | +...and add it to your Prisma Client instance: |
| 93 | +import { withAccelerate } from "@prisma/extension-accelerate" |
| 94 | +
|
| 95 | +const prisma = new PrismaClient().$extends(withAccelerate()) |
| 96 | +
|
| 97 | +2. Apply migrations |
| 98 | +Run the following command to create and apply a migration: |
| 99 | +npx prisma migrate dev |
| 100 | +
|
| 101 | +3. Manage your data |
| 102 | +View and edit your data locally by running this command: |
| 103 | +npx prisma studio |
| 104 | +
|
| 105 | +...or online in Console: |
| 106 | +https://console.prisma.io/{workspaceId}/{projectId}/studio |
| 107 | +
|
| 108 | +4. Send queries from your app |
| 109 | +If you already have an existing app with Prisma ORM, you can now run it and it will send queries against your newly created Prisma Postgres instance. |
| 110 | +
|
| 111 | +5. Learn more |
| 112 | +For more info, visit the Prisma Postgres docs: https://pris.ly/ppg-docs |
| 113 | +``` |
| 114 | + |
| 115 | +</details> |
| 116 | + |
| 117 | +Locate and copy the database URL provided in the CLI output. Then, create a `.env` file in the project root: |
| 118 | + |
| 119 | +Now, paste the URL into it as a value for the `DATABASE_URL` environment variable. For example: |
| 120 | + |
| 121 | +```bash |
| 122 | +# .env |
| 123 | +DATABASE_URL=prisma+postgres://accelerate.prisma-data.net/?api_key=ey... |
| 124 | +``` |
| 125 | + |
| 126 | +### 3. Initialize Database |
| 127 | + |
| 128 | +```bash |
| 129 | +# Generate Prisma client |
| 130 | +bun run db:generate |
| 131 | + |
| 132 | +# Push schema to database |
| 133 | +bun run db:push |
| 134 | +``` |
| 135 | + |
| 136 | +### 4. Run Development Server |
| 137 | + |
| 138 | +```bash |
| 139 | +bun run dev |
| 140 | +``` |
| 141 | + |
| 142 | +Open [http://localhost:3001](http://localhost:3001) in your browser. |
| 143 | + |
| 144 | +## Available Scripts |
| 145 | + |
| 146 | +- `bun run dev` - Start development server |
| 147 | +- `bun run build` - Build for production |
| 148 | +- `bun run start` - Start production server |
| 149 | +- `bun run db:generate` - Generate Prisma client |
| 150 | +- `bun run db:push` - Push schema changes to database |
| 151 | +- `bun run db:studio` - Open Prisma Studio |
| 152 | +- `bun run db:migrate` - Create database migration |
| 153 | + |
| 154 | +## How It Works |
| 155 | + |
| 156 | +### tRPC Setup |
| 157 | + |
| 158 | +The tRPC setup follows the official Next.js App Router pattern: |
| 159 | + |
| 160 | +1. **Server-side** (`src/lib/trpc/`): |
| 161 | + - `index.ts` - Initializes tRPC with context |
| 162 | + - `routers/` - Defines API endpoints |
| 163 | + - `context.ts` - Creates request context |
| 164 | + |
| 165 | +2. **Client-side** (`src/utils/trpc.ts`): |
| 166 | + - Creates tRPC React client using `@trpc/react-query` |
| 167 | + |
| 168 | +3. **API Route** (`src/app/api/trpc/[trpc]/route.ts`): |
| 169 | + - Handles HTTP requests to tRPC endpoints |
| 170 | + |
| 171 | +### Making Requests |
| 172 | + |
| 173 | +```tsx |
| 174 | +import { trpc } from '@/utils/trpc'; |
| 175 | + |
| 176 | +function TodoList() { |
| 177 | + // Query |
| 178 | + const todos = trpc.todo.getAll.useQuery(); |
| 179 | + |
| 180 | + // Mutation |
| 181 | + const createTodo = trpc.todo.create.useMutation({ |
| 182 | + onSuccess: () => { |
| 183 | + utils.todo.getAll.invalidate(); |
| 184 | + }, |
| 185 | + }); |
| 186 | + |
| 187 | + return ( |
| 188 | + <div> |
| 189 | + {todos.data?.map(todo => ( |
| 190 | + <div key={todo.id}>{todo.text}</div> |
| 191 | + ))} |
| 192 | + </div> |
| 193 | + ); |
| 194 | +} |
| 195 | +``` |
| 196 | + |
| 197 | +## Database Schema |
| 198 | + |
| 199 | +The app uses a simple Todo model: |
| 200 | + |
| 201 | +```prisma |
| 202 | +model Todo { |
| 203 | + id Int @id @default(autoincrement()) |
| 204 | + text String |
| 205 | + completed Boolean @default(false) |
| 206 | +} |
| 207 | +``` |
| 208 | + |
| 209 | +## Learn More |
| 210 | + |
| 211 | +- [tRPC Documentation](https://trpc.io) |
| 212 | +- [Next.js Documentation](https://nextjs.org/docs) |
| 213 | +- [Prisma Documentation](https://www.prisma.io/docs) |
| 214 | +- [React Query Documentation](https://tanstack.com/query) |
0 commit comments