Next.js + Clerk + ShadCN + Neon + Prisma Boilerplate

This is a Next.js project bootstrapped with create-next-app. It integrates Clerk for authentication, ShadCN for UI components, Neon for PostgreSQL database hosting, and Prisma as the ORM.

Table of Contents

• Features
• Getting Started
• Project Structure
• Features Implemented
  • Authentication
  • Database
  • UI Components
  • Theme Toggle
• Learn More
• Deploy on Vercel
• Contributing
• License

Features

• Authentication: Powered by Clerk for user authentication and session management.
• Database: Uses Neon as the PostgreSQL database, with schema management via Prisma.
• UI Components: Built with ShadCN for a modern and accessible design system.
• Server Actions: Includes server-side actions for syncing and fetching user data between Clerk and Neon.
• Dark Mode: Theme toggle functionality for light and dark modes.
• Modular Components: Refactored components for better maintainability and scalability.

Getting Started

First, clone the repository and install dependencies:

git clone https://github.com/your-repo/next15-clerk-shadcn-neon-postgres-prisma.git
cd next15-clerk-shadcn-neon-postgres-prisma
npm install

Define .env variables for (example .env.example):

• clerk
• neon

Push prisma schema model

Run

npx prisma db push

Then, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

Project Structure

• components/: Contains reusable and modular components, organized into subfolders:
  • layout/: Layout-related components like Header and Sidebar.
  • user/: User-related components like UserPanel, Authenticated, and Unauthenticated.
  • ui/: Reusable UI components like ThemeToggle.
  • shared/: Shared components like LoadingSpinner and ErrorBoundary.
• actions/: Includes server-side actions like syncUserAction and getUserFromNeon.
• services/: Handles separation of concerns between Clerk and Neon with clerk.service.ts and neon.service.ts.
• prisma/: Contains the Prisma schema and migrations for managing the database.

Features Implemented

Authentication

• Integrated Clerk for user authentication.
• Synced user data from Clerk to Neon using syncUserAction.

Database

• Used Prisma to define the User model and manage database interactions.
• Added getUserFromNeon to fetch user data from Neon.

UI Components

• Sidebar: Acts as a container for components like UserPanel and navigation links.
• UserPanel: Displays user information (authenticated or unauthenticated) based on the user's state.

Theme Toggle

• Added a theme toggle component to switch between light and dark modes.

Learn More

To learn more about the tools and technologies used in this project, check out the following resources:

• Next.js Documentation - Learn about Next.js features and API.
• Clerk Documentation - Learn about authentication with Clerk.
• Prisma Documentation - Learn about database management with Prisma.
• Neon Documentation - Learn about PostgreSQL hosting with Neon.
• ShadCN Documentation - Learn about building modern UI components.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out the Next.js deployment documentation for more details.

Contributing

Contributions are welcome! Feel free to open issues or submit pull requests to improve this project.

License

This project is proprietary and all rights are reserved by lucho20pt. Unauthorized use, copying, modification, or distribution of this software is strictly prohibited.