Next Boilerplate

The gap between "I want to build a SaaS product" and "I have something I can show a customer" is almost always filled with the same work: authentication flows, admin dashboards, tenant isolation, subscription management, notification channels, role-based access. None of it is the product. All of it is required before the product can exist. Next Boilerplate is an attempt to close that gap entirely — not just the API layer, but the complete stack, from the database schema to the rendered UI.

The project is built on Next.js 16 with the App Router and React Server Components at its core. The choice of Next.js here is deliberate: co-locating API routes and UI in a single deployable unit simplifies infrastructure, enables server-side rendering for performance and SEO where it matters, and keeps the client bundle lean by default. What you get is a full-stack SaaS foundation that can be deployed to Vercel, Railway, or any Node.js host with a single build command.

A Three-Layer Architecture

The project's architecture follows a strict dependency direction: app/ → modules_next/ → modules/.

The innermost layer, modules/, contains all business logic with zero framework coupling — no Next.js imports, no React, no browser APIs. This is the same module layer shared with the Express Boilerplate project. The identical auth, tenant, payment, and notification services run under both runtimes without modification.

The middle layer, modules_next/, is where Next.js concerns live: NextRequest/NextResponse service extensions, React components scoped to each domain module, React hooks, and shared UI primitives. This layer bridges the framework-agnostic core with the App Router without polluting it.

The outer layer, app/, contains route handlers and page components. It is deliberately thin — it delegates to modules_next/ for anything beyond routing.

This separation means the business logic layer is testable as pure TypeScript, portable across runtimes, and protected from framework churn.

Multi-Tenancy as a First-Class Feature

Two tenancy modes are supported out of the box. In domain mode, each tenant maps to a subdomain or a custom domain verified by DNS TXT record. In path mode, the tenant is identified by a URL prefix. The switch between modes is a single environment variable. The proxy logic runs in Next.js middleware, transparently rewriting requests to the correct internal route before they reach any handler.

Every tenant gets its own isolated context: configurable settings, white-label branding, custom domain management, role-based membership, invitation workflows, subscription plan with feature flags, usage quota tracking, and a full data export. Two separate admin surfaces exist — the system admin panel at the platform level, and a tenant admin panel for each organization — with role checks enforced at the middleware layer.

Authentication: Complete Coverage

Authentication covers every scenario a real product encounters. Password-based login with OTP and TOTP two-factor authentication handles the majority of users. Passkeys via WebAuthn provide a passwordless path. OAuth SSO supports eleven providers out of the box: Google, GitHub, Apple, Microsoft, Facebook, LinkedIn, Twitter, Slack, TikTok, WeChat, and Autodesk. SAML 2.0 serves enterprise clients with identity providers. Admin impersonation enables support workflows. Sessions are JWT-based with httpOnly cookies, Redis-cached, and backed by a full refresh and revocation lifecycle.

Provider Flexibility

A recurring theme throughout the project is provider abstraction. Payments run through Stripe, PayPal, or Iyzico — swapped by configuration, not by code changes. Email supports SMTP, SES, Mailgun, Postmark, Resend, and SendGrid behind the same notification interface. SMS goes through Twilio, Nexmo, Clickatell, or NetGSM. File storage targets S3, Cloudflare R2, DigitalOcean Spaces, or MinIO. Each integration is isolated behind a consistent interface, so changing providers in production requires no business logic changes.

The UI Layer

Unlike a pure API boilerplate, this project ships a functional admin interface built with Tailwind CSS 4, Radix UI primitives, and FontAwesome icons. The system admin dashboard covers tenant management, user management, subscription plans, coupons, payment history, webhook configuration, audit logs, AI provider settings, and SAML configuration. The tenant admin dashboard covers members, invitations, custom domains, branding, settings, subscription, API keys, and webhooks. Both panels are built from the same component system in modules_next/common/ui/ — a shared shell, sidebar, topbar, modal, table, toast, and form primitives that enforce visual consistency across every surface.

Client state is managed with Zustand. Forms use react-hook-form with Zod validation. Charts render with Chart.js. PDF export uses jsPDF. Drag and drop is handled by dnd-kit. A rich text editor via TinyMCE is available for content-heavy features.

The Result

A developer with this as a starting point skips the foundational work entirely — not just the backend infrastructure, but the admin panels, the auth flows, the subscription billing, and the UI system. What remains is building the product itself.