DEV Community

Cover image for Using Next.js and Prisma? Save hours & auto-generate components from your schema.
Brandin Canfield
Brandin Canfield

Posted on

Using Next.js and Prisma? Save hours & auto-generate components from your schema.

Generate beautiful Next.js 13 Server Components in seconds
For a more in-depth guide please view the Nexquik Github Repo.

Auto-generate components like the ones below from your Prisma Schema

UI Generated From Nexquik

What is Nexquik?

A Prisma Generator / CLI tool to auto-generate Next.js components from your Prisma Schema.

These will be Server Components fully equipped with Server Actions.

So why use it?

Most web apps have a subset of pages where you need CRUD interfaces to get the job done. Generating these pages can give you hours back to focus on the meat of your project.

For example: User Management, Task/Content Management, Inventory, Feedback / Comment Systems, Polls / Surveys… the list goes on.

Usage Examples

Example 1: Creating a new app from scratch
Create a full Next.js app from scratch using all of your models

npm i nexquik -g

Option 1: Add the generator to your Prisma schema and run prisma generate



generator nexquik {
  provider = "prisma-generator-nexquik"
  command  = "--init group --name Main"
}


Enter fullscreen mode Exit fullscreen mode

Option 2: Use the command line



nexquik --init group --name UserManagement --include User,Admin,Organization group --name InventoryManagement --include Product,Task,Customer,Category,Order


Enter fullscreen mode Exit fullscreen mode

Example 2: Initializing Nexquik in an existing app
Install nexquik into project, install dependencies and required files into project, and generate our models into the app directory.

npm i nexquik
nexquik deps

Now that we installed Nexquik and initialized it in the project, you can add the generator to your schema, and your UI will be generated every time you run prisma generate



generator nexquik {
  provider = "prisma-generator-nexquik"
  command  = "group --name UserManagement --include User,Admin,Organization --name TaskManagement --include Task,Product,Category"
}


Enter fullscreen mode Exit fullscreen mode

Keeping the generator in your schema will ensure that any time your models change, your UI will reflect them.

This also allows you to benefit from enhancements to the project from the open source community.

Image description

Top comments (0)