Next.js with Tiptap and Mentions

This boilerplate offers a full-stack Next.js monorepo setup featuring a complete Notes CRUD with rich text editing and user mentions, powered by Tiptap. It uses the Next.js App Router for the frontend, Next.js API Routes for backend logic, Drizzle ORM with PostgreSQL for database interactions, and shadcn/ui for consistent UI components.

Mentions are fully integrated using Tiptap’s mention extension, allowing users to reference other users directly within the note content.

Technical Stack

Frontend: Next.js (App Router)
Backend: Next.js API Routes
Database: PostgreSQL with Drizzle ORM (in the db package)
UI Components: shadcn/ui (in the ui package)
Rich Text Editor: Tiptap with mention support

Key Features

Tiptap Integration: Rich text editing with Tiptap, extended to support @mention functionality.
Mentions System: Type @ inside the editor to mention other users. Mention suggestions are powered by a list of users stored in the database.
Full Notes CRUD: Includes Create, Read, Update, and Delete functionality with persistent storage.
Modular Architecture:
- db package: Contains all Drizzle ORM schema and query logic.
- ui package: Contains shared UI components built with shadcn/ui.
Next.js API Routes (Backend): RESTful endpoints for notes and users.
Next.js App Router (Frontend): Server components, modern routing, and layouts.

Use Cases

This boilerplate is ideal for applications that require rich content creation with user collaboration, such as:

Note-taking apps with mentions
Internal knowledge bases
Team collaboration tools
Commenting systems with user tagging

With Next.js for structure, Tiptap for editing, Drizzle ORM for database, and shadcn/ui for styling, this boilerplate is a scalable, modern starting point for SaaS applications that need mentionable rich text content. 🚀

Boilerplate