Nextbase is a free Next.js 16 and Supabase starter with 768+ stars. It's positioned as "the last Next.js and Supabase starter you'll ever need."
We ran it through a comprehensive PLG skills audit. The result: the best signup flow among Supabase starters, but zero monetization layer.
Overall PLG Score: 3.2/10 — Excellent technical foundation for auth, but designed as a boilerplate, not a PLG platform.
The full audit
| Category | Score | Key finding |
|---|---|---|
| Signup flow | 8/10 | 3 auth methods, Zod validation, magic link support |
| Feature gating | 0/10 | No pricing, plans, or subscription tracking |
| Trial optimization | 0/10 | Not implemented |
| Product analytics | 0/10 | No tracking infrastructure |
| Self-serve motion | 2/10 | No checkout, no billing, no upgrade path |
| Empty states | 7/10 | Good component system with CTAs |
1. Signup flow analysis (8/10)
Nextbase has the strongest signup implementation among the templates we analyzed.
Multi-method authentication
Location: src/app/(dynamic-pages)/(login-pages)/(login-pages)/sign-up/Signup.tsx
The signup page offers three authentication methods via tabs:
// Lines 117-174
<Tabs defaultValue="password">
<TabsList className="grid w-full grid-cols-3">
<TabsTrigger value="password">Password</TabsTrigger>
<TabsTrigger value="magic_link">Magic Link</TabsTrigger>
<TabsTrigger value="social_login">Social Login</TabsTrigger>
</TabsList>
</Tabs>
Tab 1: Email + Password
- 2 required fields (email, password)
- Uses
EmailAndPasswordcomponent
Tab 2: Magic Link
- 1 required field (email only)
- Passwordless signup via Supabase OTP
Tab 3: Social Login
- Google, GitHub, Twitter configured
- Uses
RenderProviderscomponent
Form validation with Zod
Location: src/data/auth/auth.ts
Server-side validation with Zod schemas:
// Lines 7-10
const signUpSchema = z.object({
email: z.string().email(),
password: z.string().min(3) // Note: weak password requirement
});
The validation uses next-safe-action for type-safe server actions:
// src/lib/safe-action.ts Lines 1-37
export const actionClient = createSafeActionClient({
handleServerError(e) {
console.error("Action error:", e.message);
return e.message;
}
});
Email verification flow
Location: src/components/Auth/EmailConfirmationPendingCard.tsx
After signup, users see a confirmation pending screen:
// Lines 50-65
<div className="flex flex-col items-center gap-2">
<Mail className="h-12 w-12" />
<h3>Confirmation Link Sent</h3>
<p>A confirmation link has been sent to your email!</p>
</div>
The auth callback at src/app/.../auth/callback/route.ts handles:
- Code exchange for session
- Redirect to
/dashboard(or customnextparam) - Path revalidation
OAuth implementation
Location: src/components/Auth/RenderProviders.tsx
// Lines 10-20 (in Signup.tsx)
const providers: OAuthProvider[] = ['google', 'github', 'twitter'];
OAuth flow via Supabase:
// src/data/auth/auth.ts Lines 116-136
export const signInWithProviderAction = actionClient
.schema(providerSchema)
.action(async ({ parsedInput: { provider, next } }) => {
const supabase = createClient();
const { data, error } = await supabase.auth.signInWithOAuth({
provider,
options: { redirectTo: `${getURL()}/auth/callback?next=${next}` }
});
return data.url;
});
What's missing in signup
Weak password policy:
password: z.string().min(3) // Should be min(8) with complexity
No signup analytics:
- No tracking events for signup funnel
- No user identification on signup
2. Feature gating audit (0/10)
No monetization infrastructure
Nextbase has zero pricing or subscription implementation:
- No
products,prices, orsubscriptionstables - No Stripe, Paddle, or payment integration
- No
plan,tier, orsubscriptionfields anywhere - No feature flags or
hasFeature()checks
Route protection
The only access control is authentication-based:
Location: src/supabase-clients/middleware.ts
// Lines 37-62
const protectedPages = [
'/dashboard',
'/private-item',
'/private-items',
];
// Check if user exists
const { data: { user } } = await supabase.auth.getUser();
// Redirect if not authenticated
if (!user && isProtectedPage) {
return NextResponse.redirect('/login');
}
No subscription-tier checks. All authenticated users have equal access to all features.
3. Trial optimization (0/10)
Not implemented. No trial-related code found:
- No
trial_start,trial_end, ortrial_daysfields - No trial expiry handling
- No trial emails
- No trial extension logic
4. Product analytics (0/10)
No analytics SDK
Package.json dependencies (Lines 21-125): No analytics packages.
The template includes UI/UX libraries but no tracking:
@tanstack/react-query(data fetching)sonner,react-hot-toast(notifications)framer-motion(animations)@hookform/resolvers(forms)
No Mixpanel, Amplitude, PostHog, Segment, or GA4.
No event tracking
- No
.track()or.capture()calls - No user identification
- No funnel measurement
5. Self-serve motion (2/10)
What exists
The signup-to-value flow works:
- Signup at
/sign-up - Email verification via Supabase
- Auth callback exchanges code for session
- Dashboard access at
/dashboard
Users can create "private items" — the template's demo feature.
What's missing
No checkout flow:
- No payment processing
- No Stripe/Paddle integration
- No billing endpoints
No upgrade path:
- No pricing page
- No plan selection UI
- No upgrade modals
No team management:
- No
invitefunctionality - No team tables
- No role-based access
No billing management:
- No invoice history
- No payment method management
- No subscription cancellation
6. Empty states (7/10)
Well-designed empty state system
Location: src/components/ui/empty.tsx
Nextbase includes a reusable empty state component:
// Composable empty state pattern
<Empty>
<EmptyHeader>
<EmptyMedia variant="icon">
<ShieldCheck />
</EmptyMedia>
<EmptyTitle>No Private Items Available</EmptyTitle>
<EmptyDescription>
You haven't created any private items yet.
</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<Button>Create Your First Private Item</Button>
</EmptyContent>
</Empty>
Components:
Empty— ContainerEmptyHeader— Icon, title, description sectionEmptyMedia— Icon wrapper with variantsEmptyTitle— Heading textEmptyDescription— Explanation textEmptyContent— CTA section
This follows best practices: icon → title → description → action button.
Database schema
Location: src/lib/database.types.ts (auto-generated)
Existing tables
| Table | Columns | Purpose |
|---|---|---|
private_items | id, name, description, owner_id, created_at | User-owned content |
content_blog_posts | id, title, body, author_id, is_published, slug | Blog publishing |
content_blog_post_comments | id, blog_post_id, author_id, body | Comments |
Missing for PLG
- No
usersorprofilestable (relies on Supabase Auth) - No
subscriptionstable - No
planstable - No
usageorlimitstable - No
teamsororganizationstable - No
analytics_eventstable
Technology stack
Frontend
- Next.js: v16.0.1 (App Router)
- React: v19.1.0
- TypeScript: v5.8.3
- Tailwind CSS: v4.1.3
Form & validation
- react-hook-form: v7.55.0
- zod: v3.24.2
- @hookform/resolvers: v3.10.0
UI components
- Radix UI: 20+ components
- lucide-react: v0.546.0 (icons)
- framer-motion: v11.18.2 (animations)
Auth & backend
- @supabase/supabase-js: v2.80.0
- @supabase/ssr: v0.7.0
- next-safe-action: v7.10.5
Notifications
- sonner: v1.7.4
- react-hot-toast: v2.5.2
Strengths
- Best signup flow — 3 auth methods, Zod validation, proper email verification
- Modern stack — Next.js 16, React 19, TypeScript 5.8
- Clean architecture — Server actions, proper separation of concerns
- Good form UX — Multiple auth methods, loading states, error handling
- Reusable components — Empty states, auth forms, UI primitives
Critical gaps
| Feature | Status |
|---|---|
| Analytics | Not implemented |
| Subscriptions | Not implemented |
| Pricing | Not implemented |
| Feature gating | Not implemented |
| Trials | Not implemented |
| Team management | Not implemented |
| Onboarding | Not implemented |
What you need to add
Priority 1: Analytics
Integrate PostHog or Segment:
// Track signup funnel
track('signup_page_viewed');
track('signup_method_selected', { method: 'password' | 'magic_link' | 'oauth' });
track('signup_completed');
identify(userId, { email, signupMethod });
Priority 2: Monetization
Add Stripe or Paddle:
- Create
subscriptionstable - Add webhook handler for Stripe events
- Build pricing page with plan comparison
- Implement checkout flow
Priority 3: Feature gating
Create permission system:
function hasFeature(user: User, feature: string): boolean {
const plan = user.subscription?.plan;
return PLAN_FEATURES[plan]?.includes(feature) ?? false;
}
Priority 4: Onboarding
Add post-signup guidance:
- Welcome modal with product tour
- Checklist of first actions
onboarding_completedfield in user preferences
First steps to PLG
Nextbase has great auth but nothing else. Here's the path forward:
Week 1: Add analytics first
Before building anything, you need to measure:
- Install PostHog:
npm install posthog-js - Initialize in
_app.tsxor your root layout - Add
posthog.identify()after successful login - Track:
signup_completed,login_completed,feature_used
Week 2: Add basic Stripe
- Install Stripe:
npm install stripe @stripe/stripe-js - Create a
subscriptionstable in Supabase - Build a simple checkout endpoint
- Handle the
checkout.session.completedwebhook
Start with just two plans: Free and Pro.
Week 3: Gate one feature
Pick a single feature to put behind the paywall:
// Simple gating
const isPro = user.subscription?.status === 'active';
{isPro ? <ProFeature /> : <UpgradePrompt />}
Track when users see the upgrade prompt and when they click it.
Week 4: Add trial
- Add
trial_endparameter to your Stripe checkout - Create a "trial ending" email for day 12
- Show trial days remaining in your UI
- Track
trial_started,trial_ending_soon,trial_converted
What to measure
Build a simple funnel dashboard:
- Signup → Aha moment (define this for your product)
- Aha moment → Trial started
- Trial started → Trial converted
- Monthly: Expansion revenue from upgrades
When to use Nextbase
Good fit:
- Learning Next.js + Supabase patterns
- Internal tools or prototypes
- Projects where you'll add monetization yourself
Not ideal:
- Monetized SaaS (need to add entire billing layer)
- PLG-focused products (no activation tracking)
- Products requiring analytics (none included)
Conclusion
Nextbase scores 3.2/10 for PLG readiness but has the strongest signup flow (8/10) of any template we analyzed.
It's a well-engineered developer boilerplate, not a growth platform. Use it when:
- You want a clean starting point
- You'll add your own monetization
- Signup UX is critical to your product
The empty state system (7/10) is also worth copying — it follows best practices that many templates miss.
Appendix: Key file locations
| Component | File |
|---|---|
| Signup component | src/app/.../sign-up/Signup.tsx |
| Auth actions | src/data/auth/auth.ts |
| Email + password form | src/components/Auth/EmailAndPassword.tsx |
| Magic link form | src/components/Auth/Email.tsx |
| OAuth providers | src/components/Auth/RenderProviders.tsx |
| Email confirmation | src/components/Auth/EmailConfirmationPendingCard.tsx |
| Auth callback | src/app/.../auth/callback/route.ts |
| Middleware | src/supabase-clients/middleware.ts |
| Safe action client | src/lib/safe-action.ts |
| Empty state component | src/components/ui/empty.tsx |
| Database types | src/lib/database.types.ts |
This analysis was performed using PLG Skills, an open-source framework for product-led growth audits. Skills used: signup-flow-cro, feature-gating, trial-optimization, product-analytics, self-serve-motion.
Frequently asked questions
Is Nextbase good for building a SaaS?
Nextbase is excellent for authentication and signup flow (8/10) but has zero monetization infrastructure. There's no Stripe integration, no subscription tables, and no pricing page. Use it if you need a clean Next.js + Supabase starter and will add billing yourself.
What authentication methods does Nextbase support?
Nextbase supports 3 authentication methods via a tabbed interface: email + password, magic link (passwordless), and OAuth (Google, GitHub, Twitter). It also includes proper email verification flow with a 60-second countdown before resend.
Does Nextbase include Stripe or payment integration?
No. Nextbase has zero payment infrastructure — no Stripe, Paddle, or any billing integration. There are no subscriptions, products, or prices tables. You'll need to add the entire billing layer yourself.
What's the tech stack for Nextbase?
Nextbase uses Next.js 16.0.1 (App Router), React 19.1.0, TypeScript 5.8.3, Tailwind CSS 4.1.3, react-hook-form with Zod validation, 20+ Radix UI components, and Supabase for auth and database.
How does Nextbase compare to other Supabase starters?
Nextbase has the best signup flow (8/10) but scores lowest for PLG readiness (3.2/10) due to no monetization. Launch MVP scores 5.9/10 with trials and analytics. Vercel's template scores 3/10 but has full Stripe billing. Choose based on whether you need auth-first or billing-first.
Should I use Nextbase for a product-led growth product?
Not ideal out of the box. Nextbase has no analytics, no feature gating, no trials, and no subscription tracking. It's a developer boilerplate, not a PLG platform. Use it as a starting point if you'll add PLG infrastructure yourself, or choose Launch MVP for built-in PLG features.