wpcodevo / trpc-nextjs-prisma

In this article, we’ll build a type-safe tRPC CRUD API with Next.js, PostgreSQL, and Prisma. This tRPC example in Next.js will showcase how to use tRPC on the backend and later we will consume the API on the frontend app.

tRPC API Server & Client with Next.js and Prisma

1. How to Setup tRPC API Server & Client with Next.js and Prisma

This article will teach you how to set up a tRPC API server and client with Next.js, PostgreSQL, React Query, Prisma, Redis, and Docker-compose.

Topics Covered

• Setup Next.js as a Monolithic Repository
• Setup Redis and PostgreSQL with Docker
  • Adding the Docker-compose Configurations
  • Adding the PostgreSQL Docker Image Credentials
  • Starting the Redis and PostgreSQL Docker Containers
• Setup Prisma with PostgreSQL
  • Creating the Database Models with Prisma
  • Migrating the Prisma Schema to the PostgreSQL Database
• Creating the Next.js tRPC Server
  • Installing the tRPC dependencies
  • Connecting to the Redis and PostgreSQL Containers
  • Creating the tRPC Context and Routes
  • Adding the tRPC Routes to the Next.js API Router
  • Testing the Next.js tRPC Server
• Setup tailwindCss in the tRPC Next.js Project
• Creating the Next.js tRPC Client

Read the entire article here: https://codevoweb.com/setup-trpc-api-server-client-with-nextjs-and-prisma

2. Build tRPC API with Next.js & PostgreSQL: Access & Refresh Tokens

This article will teach you how to secure a tRPC API server with JWT authentication using Next.js, PostgreSQL, Prisma, Redis, and Docker-compose.

Topics Covered

• Set up the tRPC Project
• Create the Database Models with Prisma
  • Running the Database Migration with Prisma
• Create the Schemas with Zod
• Create Functions to Sign and Verify JWTs
  • How to Generate the JWT Private and Public Keys
  • Function to Sign the JWT Tokens
  • Function to Verify the JWT Tokens
• Create the Database Services
• Create the Authentication Controllers
  • Register User tRPC Controller
  • Login User tRPC Controller
  • Refresh Access Token tRPC Controller
  • Logout User tRPC Controller
• Create a User Controller
• Create the tRPC Authentication Guard
• Create the tRPC Endpoints
  • Add the Authentication Routes
  • Add the User Routes
• Merge the tRPC Routes
• Add the tRPC Routes to the Next.js Router

Read the entire article here: https://codevoweb.com/trpc-api-with-nextjs-postgresql-access-refresh-tokens

3. Full-Stack Next.js tRPC App: User Registration & Login Example

In this article, we'll build a full-stack Next.js tRPC app to register and sign in a user using React Query, TypeScript, React-Hook-Form, and Zod.

Topics Covered

• Next.js tRPC API Server and Client Overview
• Setup the Next.js tRPC Server and Client
• Add the Zustand State Management Library
• Create Reusable Next.js Components
  • Create a Loading Spinner Component
  • Create a Loading Button Component
  • Create a FullScreen Loader Component
  • Create the tRPC Client Header Component
  • Create an InputField Component with React-Hook-Form
  • Create an Image Uploader Component
• Create the tRPC Client to Register a User
• Create the tRPC Client to Sign in the User
• Create the tRPC Authentication Guard
• Create the Remaining Next.js Pages
  • Home Page
  • Profile Page
• Update the App File

Read the entire article here: https://codevoweb.com/fullstack-nextjs-trpc-app-user-registration-login-example

4. Build a tRPC CRUD API Example with Next.js

In this article, we’ll build a type-safe tRPC CRUD API with Next.js, PostgreSQL, and Prisma. This tRPC example in Next.js will showcase how to use tRPC on the backend and later we will consume the API on the frontend app.

Topics Covered

• Setup the tRPC Project with Next.js
• Create the Database Models with Prisma
  • Create the Database Schema
  • Migrate the Schema to the Database
• Create the Validation Schemas
• Create Reusable Database Services
• Create the tRPC Procedure Controllers - Create Mutation tRPC Procedure Handler - Get Single Query tRPC Procedure Handler - Get All Records Query tRPC Procedure Handler - Update Mutation tRPC Procedure Handler - Delete Mutation tRPC Procedure Handler
• Create the tRPC Procedure Routes - Creating the tRPC Procedure Endpoints - Merging the tRPC Endpoints - Add the tRPC Endpoints to the Next.js Router

Read the entire article here: https://codevoweb.com/build-a-trpc-crud-api-example-with-next-js

trpc-nextjs-prisma's Issues

doesnt work with TRPC version 10

This is a good boiler plate for learning sign-in, sign up and CRID with TRPC. 👍 👍

I tried to upgrade TRPC to version 10 but has breaking change in the API.
Would it be possible to upgrade to TRPC 10 in another branch?

3 Typescript errors and final project doesn't work.

In the auth.controller.ts file I see a lot of TypeScript errors that say:
"Property 'req' does not exist on type 'Promise<{ req: NextApiRequest; res: NextApiResponse; user: null; } | { req: NextApiRequest; res: NextApiResponse; user: { ...; }; }>'."

It likely got to do with the fact that this is a Promise.

In user.service.ts another type error:
"Property 'user' does not exist on type 'Promise<{ req: NextApiRequest; res: NextApiResponse; user: null; } | { req: NextApiRequest; res: NextApiResponse; user: { ...; }; }>'."

And in user.service.ts another one:
"Type 'Partial' is not assignable to type 'UserWhereInput'.\n Types of property 'posts' are incompatible.\n Type 'PostCreateNestedManyWithoutUserInput | undefined' is not assignable to type 'PostListRelationFilter | undefined'.\n Type 'PostCreateNestedManyWithoutUserInput' has no properties in common with type 'PostListRelationFilter'."

Running the app I'm unable to go past the login screen.
Register and upload works

Also maybe it's time to update the tutorials to tRPC 10 and Next.js 13 and fix some of the mistakes in the blog posts?

[REQUEST] Pagination Filter and search

Hi,
Superb tutorial, any plan to add pagination filter and search option in Post Page. I am eagerly looking at those features also.

[REQUEST] File Storage Locally( like Multer)

You have written an excellent blog and provided valuable code for custom development in Next.js. I am very grateful for this resource. I am trying to upload images locally, similar to Multer, so that I can host the images on my own blog. Can you provide any insight on this topic? Is it possible to upload an image by passing the complete URL address (e.g., https://codevoweb.com/wp-content/uploads/2022/01/logocodevo.webp) into a form input and submitting it to upload the image to the folder?