https://github.com/wpcodevo/nextjs-trpc-crud-app

This article will teach you how to build a full-stack tRPC CRUD (Create, Read, Update, and Delete) app with Next.js. The tRPC API will be built on Next.js edge runtime and the tRPC client will be created with React.js. For data storage, we'll use Prisma ORM to query and mutate an SQLite database.
https://github.com/wpcodevo/nextjs-trpc-crud-app

nextjs-api nextjs-crud react-crud-app reactjs reactjs-crud trpc trpc-api trpc-client trpc-crud-app trpc-server

Last synced: about 1 month ago
JSON representation

This article will teach you how to build a full-stack tRPC CRUD (Create, Read, Update, and Delete) app with Next.js. The tRPC API will be built on Next.js edge runtime and the tRPC client will be created with React.js. For data storage, we'll use Prisma ORM to query and mutate an SQLite database.

• Host: GitHub
• URL: https://github.com/wpcodevo/nextjs-trpc-crud-app
• Owner: wpcodevo
• Created: 2022-10-29T07:50:19.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-11-22T11:15:01.000Z (about 2 years ago)
• Last Synced: 2024-05-15T15:32:44.797Z (8 months ago)
• Topics: nextjs-api, nextjs-crud, react-crud-app, reactjs, reactjs-crud, trpc, trpc-api, trpc-client, trpc-crud-app, trpc-server
• Language: TypeScript
• Homepage: https://codevoweb.com/build-a-fullstack-trpc-crud-app-with-nextjs/
• Size: 79.1 KB
• Stars: 29
• Watchers: 2
• Forks: 13
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Build a Full Stack tRPC CRUD App with Next.js and Prisma ORM

This article will teach you how to build a full-stack tRPC CRUD (Create, Read, Update, and Delete) app with Next.js. The tRPC API will be built on Next.js edge runtime and the tRPC client will be created with React.js. For data storage, we'll use Prisma ORM to query and mutate an SQLite database.  

![Build a Full Stack tRPC CRUD App with Next.js and Prisma ORM](https://codevoweb.com/wp-content/uploads/2022/10/Build-a-Full-Stack-tRPC-CRUD-App-with-Next.js-and-Prisma-ORM.webp)

## Topics Covered

- Run the Next.js tRPC CRUD App Locally

- Setup Next.js as a Monorepo

- Setup Prisma and Create the Database Model

- Create the Next.js tRPC API

    - Create Zod Validation Schemas

    - Create the tRPC Procedures

    - Create the tRPC Server

    - Connect the tRPC Router to Next.js

- Create the Next.js tRPC Client

    - Create Reusable React Components

    - React Query Create Record Mutation

    - React Query Update Record Mutation

    - React Query Delete Record Mutation

    - React Query Fetch All Records Query

Read the entire article here: [https://codevoweb.com/build-a-fullstack-trpc-crud-app-with-nextjs/](https://codevoweb.com/build-a-fullstack-trpc-crud-app-with-nextjs/)