How to build a full-stack website with Nextjs more quickly?

Introduction

The current area is dedicated to the reactjs and nextjs. Nowadays, many companies and individuals use nextjs in every project.

The big problem with nextjs is project step-up. Installing many packages and writing the same tedious code again is so painful.

Every boilerplate repository helps us save a lot of developer time on the initial setup for a full stack.

I recently found a great CLI tool that helps developers set up a full-stack project in less than 5 minutes.

The CLI name is Kirimase CLI. It has many more features than the t3 app CLI.

You can use multiple packages, for example:

• Prisma
• Drizzle
• Auth.js
• Clerk
• Lucia Auth
• Kinde
• Shadcn UI
• tRPC
• Stripe
• Resend

• Inbuilt dashboard Support.
• Built models, views, and controllers system.

Create Nextjs Application

First, create a new application using the create next app.

pnpm dlx create-next-app@latest
# or
npx create-next-app@latest
tsx

The following command output looks like this.

$ pnpm dlx create-next-app@latest

Packages: +1
+
Progress: resolved 1, reused 1, downloaded 0, added 1, done
✔ What is your project named? … kirimase-cli-example
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
✔ What import alias would you like configured? … @/*
Creating a new Next.js app in /myprojects/developerdennis/kirimase-cli-example.

Using pnpm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- autoprefixer
- postcss
- tailwindcss
- eslint
- eslint-config-next

Packages: +352
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 360, reused 340, downloaded 12, added 352, done

dependencies:
+ next 14.1.0
+ react 18.2.0
+ react-dom 18.2.0

devDependencies:
+ @types/node 20.11.21
+ @types/react 18.2.60
+ @types/react-dom 18.2.19
+ autoprefixer 10.4.17
+ eslint 8.57.0
+ eslint-config-next 14.1.0
+ postcss 8.4.35
+ tailwindcss 3.4.1
+ typescript 5.3.3

Done in 5m 41.2s
Initialized a git repository.

Success! Created kirimase-cli-example at /myprojects/developerdennis/kirimase-cli-example

tsx

After successfully creating the nextjs project, you should initialize your project setup with the Kirimase CLI.

Initialize the kirimase command.

Initialize the kirimase CLI, and you must run the init option with kirimase CLI to set up your project.

You do not need to write any configurations. It is an automatic configure the project for you.

You select the packages you need for your project, such as Prisma, Drizzle, Auth.js, Clerk, Lucia Auth, Kinde, Shadcn UI, tRPC, Stripe, and Resend. The kirimase CLI automatically installs and configures.

pnpm dlx kirimase@latest init
# or
yarn kirimase@latest init
# or
npx kirimase@latest init
tsx

The following command output looks like this.

pnpm dlx kirimase@latest init

██╗  ██╗██╗██████╗ ██╗███╗   ███╗ █████╗ ███████╗███████╗
██║ ██╔╝██║██╔══██╗██║████╗ ████║██╔══██╗██╔════╝██╔════╝
█████╔╝ ██║██████╔╝██║██╔████╔██║███████║███████╗█████╗
██╔═██╗ ██║██╔══██╗██║██║╚██╔╝██║██╔══██║╚════██║██╔══╝
██║  ██╗██║██║  ██║██║██║ ╚═╝ ██║██║  ██║███████║███████╗
╚═╝  ╚═╝╚═╝╚═╝  ╚═╝╚═╝╚═╝     ╚═╝╚═╝  ╚═╝╚══════╝╚══════╝

◐ Checking project for existing packages...                                                                                                        3:42:17 pm
✔ Successfully searched project and found no additional packages.                                                                                 3:42:17 pm


? Select a component library to use: Shadcn UI (with next-themes)
? Select an ORM to use: Drizzle
? Please choose your DB type Postgres
? Please choose your DB Provider node-postgres
? Select an authentication package to use: Auth.js (NextAuth)
? Select a provider to add github
? Select any miscellaneous packages to add: TRPC
✔ Configuration complete
ℹ Installing Dependencies                                                                                                                         3:42:58 pm
Packages: +60
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 420, reused 409, downloaded 3, added 60, done

dependencies:
+ @auth/core 0.28.0
+ @auth/drizzle-adapter 0.8.0
+ @t3-oss/env-nextjs 0.9.2
+ @tanstack/react-query 4.36.1 (5.24.6 is available)
+ @trpc/client 10.45.1
+ @trpc/next 10.45.1
+ @trpc/react-query 10.45.1
+ @trpc/server 10.45.1
+ class-variance-authority 0.7.0
+ clsx 2.1.0
+ drizzle-orm 0.29.4
+ drizzle-zod 0.5.1
+ lucide-react 0.344.0
+ nanoid 5.0.6
+ next-auth 4.24.6
+ next-themes 0.2.1
+ pg 8.11.3
+ server-only 0.0.1
+ superjson 2.2.1
+ tailwind-merge 2.2.1
+ tailwindcss-animate 1.0.7
+ zod 3.22.4

Done in 11s
Packages: +54 -1
++++++++++++++++++++++++++++++++++++++++++++++++++++++-
Progress: resolved 516, reused 453, downloaded 12, added 54, done
node_modules/.pnpm/es5-ext@0.10.64/node_modules/es5-ext: Running postinstall script, done in 36ms

devDependencies:
+ @types/pg 8.11.2
+ dotenv 16.4.5
+ drizzle-kit 0.20.14
+ tsx 4.7.1

Done in 8.1s
ℹ Installing ShadcnUI Components                                                                                                                  3:43:17 pm
Packages: +175
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 175, reused 175, downloaded 0, added 175, done
✔ Done.

 ╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
 │                                                                                                  │
 │  🚀 Thanks for using Kirimase to kickstart your Next.js app!                                     │
 │                                                                                                  │
 │  The following packages are now installed and configured:                                        │
 │  - ORM: Drizzle (using node-postgres)                                                            │
 │  - Authentication: Auth.js (with github providers)                                               │
 │  - RPC: tRPC                                                                                     │
 │  - Component Library: ShadcnUI                                                                   │
 │                                                                                                  │
 │  [installed and configured in just 46.659 seconds]                                               │
 │                                                                                                  │
 │  Next Steps                                                                                      │
 │  1. Add Environment Variables to your .env                                                       │
 │  2. Run pnpm run db:generate                                                                     │
 │  3. Run pnpm run db:migrate                                                                      │
 │  4. Run pnpm run dev                                                                             │
 │  5. Open http://localhost:3000 in your browser                                                   │
 │  6. Build something awesome!                                                                     │
 │                                                                                                  │
 │  Notes                                                                                           │
 │  - github auth: create credentials at https://github.com/settings/apps                           │
 │    (redirect URI: /api/auth/callback/github)                                                     │
 │  - If you have any issues, please open an issue on GitHub                                        │
 │    (https://github.com/nicoalbanese/kirimase/issues)                                             │
 │                                                                                                  │
 │  Hint: use kirimase generate to quickly scaffold entire entities for your application            │
 │                                                                                                  │
 ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯
tsx

Next, add your environment value according to your project configuration. If you use any database, first set up your database environment variable, then run the pnpm run db:push or db:generatecommand according to your database setup.

Last, run your local development server with pnpm dev command.

Generate the Model, View, and Controllers.

When you work with Drizzle and Prisma ORM, the most important step is to write a schema.

In kirimase, CLI has a generatecommand option. The generatecommand option helps the developer create a Model, View, and Controller (schema) for your application without writing a single line of code.

You give a name for the table and fields; then it asks which type of field number, string, boolean, etc., and lastly, it asks if it is required.

It generates the model, view, and controllers based on your schema. You can create, update, and delete your data with the dashboard.

Kirimase CLI doesn't stop. You can create any project, such as a blog, todo, etc., with CLI without writing a single line of code. You don't need to write the schema code manually.

To understand better, let's build a demo blog about how models, views, and controllers work with kirimase CLI.

Demo Blog Project

In this article, we create a demo blog with kirimase CLI. The demo blog has a title, description, content, and tag schema. We can generate the following schema with the help of the kirimase generate command.

• Generate the Model, View, and Controller
• Migrations
• Open Application In Browser

Generate the Model, View, and Controller

Run the following command in your terminal to generate the model, view, and controller.

We create the posts table with the following fields: title, description, content, and tag with the following kirimase generate command.

$ pnpm dlx kirimase@latest generate
tsx

The following command output looks like this.

$ kirimase-example git:(main) ✗ pnpm dlx kirimase@latest generate
Packages: +81
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 81, reused 81, downloaded 0, added 81, done
ℹ Quickly generate your Model (schema + queries / mutations), Controllers (API Routes and TRPC Routes), and Views                                 7:33:11 pm
? Please select the resources you would like to generate: Model, Controller, View
? Please select the type of view you would like to generate: Server Actions with Optimistic UI
? Please select any additional controllers you would like to generate: API Route
? Please enter the table name (plural and in snake_case): posts
? Please select the type of this field: text
? Please enter the field name (in snake_case): title
? Is this field required? yes
? Would you like to add another field? yes
? Please select the type of this field: text
? Please enter the field name (in snake_case): description
? Is this field required? yes
? Would you like to add another field? yes
? Please select the type of this field: text
? Please enter the field name (in snake_case): content
? Is this field required? yes
? Would you like to add another field? yes
? Please select the type of this field: text
? Please enter the field name (in snake_case): tag
? Is this field required? yes
? Would you like to add another field? no
? Would you like to set up an index? yes
? Which field would you like to index? title
? Would you like timestamps (createdAt, updatedAt)? yes
? Does this model belong to the user? yes
? Would you like to add a child model? (posts) no
? Would you like to add a link to 'Posts' in your sidebar? yes
ℹ Installing ShadcnUI Components                                                                                                                  7:34:59 pm
Packages: +175
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 175, reused 175, downloaded 0, added 175, done
✔ Done.

 ╭──────────────────────────────────────────────────────────────────╮
 │                                                                  │
 │  🎉 Success!                                                     │
 │                                                                  │
 │  Kirimase generated the following resources for Post:            │
 │  - Model (schema file and queries/mutations functions)           │
 │  - Server Actions                                                │
 │  - Views (powered by Server Actions)                             │
 │  - API Route                                                     │
 │                                                                  │
 │                                                                  │
 │  Next Steps                                                      │
 │  1. Run pnpm run db:generate                                     │
 │  2. Run pnpm run db:migrate                                      │
 │  3. Run pnpm run dev                                             │
 │  4. Open http://localhost:3000/posts in your browser             │
 │                                                                  │
 │                                                                  │
 │  Notes                                                           │
 │  - If you run into any issues, please create an issue on GitHub  │
 │    (https://github.com/nicoalbanese/kirimase/issues)             │
 │  - Documentation (https://kirimase.dev/commands/generate)        │
 │                                                                  │
 ╰──────────────────────────────────────────────────────────────────╯
tsx

Migrations

The model, view, and controller are generated successfully by Kirimase CLI on the next run db:generate and db:migrate script command.

• db:generate script command.
• db:generate script command.
• db:generate script command.

The db:generate command creates a migration for the database.

pnpm run db:generate
tsx

The command looks like this.

$ kirimase-example git:(main) ✗ pnpm run db:generate

> kirimase-example@0.1.0 db:generate /home/officialrajdeepsingh/medium/kirimase-example
> drizzle-kit generate:pg

drizzle-kit: v0.20.14
drizzle-orm: v0.29.4

No config path provided, using default 'drizzle.config.ts'
Reading config file '/home/officialrajdeepsingh/medium/kirimase-example/drizzle.config.ts'
5 tables
account 11 columns 0 indexes 1 fks
session 3 columns 0 indexes 1 fks
user 5 columns 0 indexes 0 fks
verificationToken 3 columns 0 indexes 0 fks
posts 8 columns 0 indexes 1 fks

[✓] Your SQL migration file ➜ src/lib/db/migrations/0001_hard_captain_america.sql 🚀
tsx

db:generate script command.

The db:migrate command run generates migration.

pnpm run db:migrate
tsx

The following command output looks like this.

$ kirimase-example git:(main) ✗ pnpm run db:migrate

> kirimase-example@0.1.0 db:migrate /myprojects/developerdennis/kirimase-example
> tsx src/lib/db/migrate.ts

⏳ Running migrations...
✅ Migrations completed in 28 ms
tsx

Open Application In Browser

Your migrations command runs successfully. Next, run the application development server with the following command.

pnpm dev
tsx

• Open your application in the browser if you add the posts option in the sidebar.
• Click the plus icon to create or add a new post.
• Create a new post.
• Edit the exciting post.

Everything you see creating, updating, and deleting a post is made with kirimase, and do not write a single line of code.

Conclusion

Kirimase CLI is the best CLI tool I found in 2024. With it, you can build an entire full-stack application using the command line.

Before Kirimase CLI, I used T3 App to set up a new nextjs project. Everything is fine with the T3 App, but one problem with the T3 App is that it can not generate the Model, View, and Controllers for you.

Kirimase CLI generates your application's model, controller, and views based on your schema without writing code, allowing you to work faster on your project.

Kirimase CLI gives freedom to work more quickly without wasting time set up everything manually in project. For example, first set up the database with ORM, then set up the next auth, Stripe, tRPC, etc., in your project.