Tools: I Built a Next.js SaaS Boilerplate So You Don't Have To - 3 Month Journey

🤔 Why I Built This ## 🚀 What's Included ## Authentication ## Payments ## Database ## Features ## 💻 Tech Stack ## 😤 The Hard Lessons ## 1. Vercel + Clerk Edge Runtime Issues ## 2. Stripe Webhooks Are Tricky ## 3. Database Migrations in Production ## 4. useSearchParams Needs Suspense ## 🎯 What Makes It Different ## 📊 Live Demo ## 🤓 Technical Deep Dive ## Project Structure ## Key Features Implementation ## 💡 What I'd Build Next ## 🙏 Feedback Welcome ## 🔗 Links ## 🎉 Final Thoughts After spending 3 months building, debugging, and deploying, I finally launched FreelanceHub - a production-ready Next.js SaaS boilerplate. I kept rebuilding the same features across different projects: Every project took 2-3 months just to get the foundation working. I realized I could package everything into a reusable starter kit. Ran into major compatibility problems with Clerk middleware on Vercel's Edge runtime. After days of debugging, switched to Netlify and everything worked perfectly. Takeaway: Not all hosting platforms handle middleware the same way! Testing webhooks locally was painful until I discovered Stripe CLI. Game changer for development. Learned the hard way that Prisma needs prisma generate in the build process on CI/CD platforms. Added to build script: Next.js 16's stricter rendering rules caught me. Had to wrap client components using useSearchParams() in Suspense boundaries. It's production-ready, not just a template: Check it out: FreelanceHub Demo If I continue developing this: I'd love to hear your thoughts: Also curious about pricing. I set it at $149 (one-time payment). Too high? Too low? Fair? Building this taught me more than any tutorial ever could. The deployment issues, payment integration challenges, and edge cases forced me to really understand the stack. If you're building a SaaS and want to skip the boring setup part, check it out! And if you have questions about the implementation, happy to answer in the comments! 🚀 Thanks for reading! Follow me for more dev content! ✨ Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse CODE_BLOCK: stripe listen --forward-to localhost:3000/api/stripe/webhooks Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: stripe listen --forward-to localhost:3000/api/stripe/webhooks CODE_BLOCK: stripe listen --forward-to localhost:3000/api/stripe/webhooks CODE_BLOCK: "build": "prisma generate && next build" Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: "build": "prisma generate && next build" CODE_BLOCK: "build": "prisma generate && next build" COMMAND_BLOCK: ├── app/ # Next.js 16 App Router │ ├── api/ # API routes │ ├── dashboard/ # Protected pages │ └── (public)/ # Public pages ├── components/ # React components ├── lib/ # Utilities & configs ├── prisma/ # Database schema └── public/ # Static assets Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: ├── app/ # Next.js 16 App Router │ ├── api/ # API routes │ ├── dashboard/ # Protected pages │ └── (public)/ # Public pages ├── components/ # React components ├── lib/ # Utilities & configs ├── prisma/ # Database schema └── public/ # Static assets COMMAND_BLOCK: ├── app/ # Next.js 16 App Router │ ├── api/ # API routes │ ├── dashboard/ # Protected pages │ └── (public)/ # Public pages ├── components/ # React components ├── lib/ # Utilities & configs ├── prisma/ # Database schema └── public/ # Static assets - Authentication flows (email, OAuth, sessions) - Payment processing (Stripe, webhooks, subscriptions) - Database setup (schema, migrations, queries) - Client management (CRUD operations) - Modern UI components - Clerk integration (email, OAuth, magic links) - Protected routes - User profile management - Session management - Stripe checkout + subscriptions - Webhook handling - Customer portal - Multiple pricing tiers - PostgreSQL with Prisma ORM - Type-safe queries - Migration scripts - Optimized schema - Beautiful dark theme - shadcn/ui components - Fully responsive design - Loading states & error handling - Client CRM with CRUD - Time tracking system - Dashboard with analytics - Settings & profile management - Framework: Next.js 16 with App Router - Language: TypeScript - Styling: Tailwind CSS + shadcn/ui - Database: PostgreSQL + Prisma - Auth: Clerk - Payments: Stripe - Deployment: Netlify (but works on Vercel, Railway, etc.) - ✅ Actually deployed and tested - ✅ Handles edge cases - ✅ Includes error boundaries - ✅ Proper loading states - ✅ TypeScript throughout - ✅ Comprehensive documentation - Responsive landing page - Feature sections - Pricing tiers - FAQ section - Clerk handles all auth UI - Middleware protects routes - User data synced to database - Stripe Checkout for subscriptions - Webhooks update user plan in DB - Customer portal for management - User → Clients (one-to-many) - Client → TimeEntries (one-to-many) - Prisma relations handle cascading - Invoice generation (PDF exports) - Email notifications (Resend integration) - Team collaboration features - API for third-party integrations - Mobile app (React Native?) - Is the tech stack solid? - What features would you add? - Any architecture improvements? - Live Demo: https://freelanceboilerplate.netlify.app/ - Get the Code: https://zubairian6541.gumroad.com/l/vhtfwp