Building a Full-Stack App with Next.js, Supabase, and Stripe

Developing a modern full-stack application requires a seamless blend of frontend and backend technologies. Next.js, Supabase, and Stripe offer a powerful combination for building scalable, performant, and monetized web applications.

Why Next.js, Supabase, and Stripe?

Each of these technologies brings unique advantages:

Next.js: A React framework that provides server-side rendering (SSR), static site generation (SSG), and API routes, making it a go-to choice for full-stack development.
Supabase: An open-source Firebase alternative that offers authentication, a PostgreSQL database, and real-time capabilities.
Stripe: A robust payment processor that enables seamless transactions and subscription management.

Together, they empower developers to build end-to-end applications with authentication, data management, and payments—all with minimal configuration.

Setting Up the Project

Start by initializing a Next.js project:

npx create-next-app@latest my-app
cd my-app
npm install

Next, install Supabase and Stripe SDKs:

npm install @supabase/supabase-js stripe

Set up environment variables in a .env.local file:

NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
STRIPE_SECRET_KEY=your-stripe-secret-key

Implementing Authentication with Supabase

Supabase provides built-in authentication. Initialize the client:

import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
);

Add a simple login/logout component:

const Auth = () => {
  const signIn = async () => {
    await supabase.auth.signInWithOAuth({ provider: 'github' });
  };

  const signOut = async () => {
    await supabase.auth.signOut();
  };

  return (
    <div>
      <button onClick={signIn}>Sign in with GitHub</button>
      <button onClick={signOut}>Sign Out</button>
    </div>
  );
};

Setting Up Payments with Stripe

To handle payments, create an API route in pages/api/checkout.js:

import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export default async function handler(req, res) {
  if (req.method === 'POST') {
    try {
      const session = await stripe.checkout.sessions.create({
        payment_method_types: ['card'],
        line_items: [
          {
            price_data: {
              currency: 'usd',
              product_data: { name: 'Pro Plan' },
              unit_amount: 1000,
            },
            quantity: 1,
          },
        ],
        mode: 'payment',
        success_url: `${req.headers.origin}/success`,
        cancel_url: `${req.headers.origin}/cancel`,
      });
      res.json({ url: session.url });
    } catch (error) {
      res.status(500).json({ error: error.message });
    }
  }
}

Then, create a checkout button:

const CheckoutButton = () => {
  const handleCheckout = async () => {
    const response = await fetch('/api/checkout', { method: 'POST' });
    const { url } = await response.json();
    window.location.href = url;
  };
  return <button onClick={handleCheckout}>Buy Now</button>;
};

Challenges and Opportunities

Challenges

Security: Handling authentication and payments securely is critical.
State Management: Keeping track of user sessions and payment states can be complex.
Performance: Optimizing queries and minimizing API calls is essential for scalability.

Opportunities

Rapid Development: Supabase’s managed database and authentication simplify backend development.
Scalable Payments: Stripe’s APIs make handling subscriptions and one-time payments seamless.
SEO & Performance: Next.js enhances app performance with SSR and static generation.

Final Thoughts

Combining Next.js, Supabase, and Stripe creates a powerful stack for modern web applications. With authentication, database management, and payments integrated smoothly, developers can focus on delivering great user experiences.

"The best way to predict the future is to create it." — Peter Drucker

Questions for Reflection

How can you enhance security when handling user authentication and payments?
What strategies can improve performance when using Supabase with Next.js?

Music for Coding

Need some tunes while coding? Try "Coding Mode" on Spotify for a focus-friendly mix of instrumental beats.