NextSupaSaaS Landing Page UI — Installation & Deployment Guide

This guide explains how to install, run, and deploy the NextSupaSaaS Landing Page & Auth UI Kit. The project is frontend-only and works out of the box with no backend configuration required.

Requirements

Before you begin, make sure you have:

  • Node.js 20+
  • npm, pnpm, or yarn
  • A Git client (optional, but recommended)

Check your Node version:

node -v

Installation

1. Download the project

After purchasing, download and extract the project files.

If using Git:

git clone <your-repo-url>
cd supasaas-landing-ui

Or unzip the downloaded archive and navigate into the folder.

2. Install dependencies

Using npm:

npm install

Or pnpm:

pnpm install

Or yarn:

yarn install

3. Environment variables (optional)

Rename the example environment file:

mv .env.example .env

Important Note:

This UI kit does not require any environment variables to run locally. The .env file exists only to simplify future backend integration.

4. Run the development server

npm run dev

Open your browser and visit:

http://localhost:3000

You should now see:

  • The landing page
  • Pricing page
  • Contact page
  • Privacy & terms pages
  • Login & signup UI

Project Structure (Quick Overview)

src/
├── app/
│   ├── (main)/          # Landing, pricing, contact, legal pages
│   ├── (auth)/          # Login, signup, forgot password UI
│   ├── layout.tsx       # Root layout
│   ├── globals.css      # Global styles
├── components/
│   ├── sections/        # Landing page sections
│   ├── forms/           # Auth & contact forms
│   ├── ui/              # shadcn/ui components
├── lib/
│   ├── utils.ts         # UI utilities
│   ├── zod-schemas.ts   # Form validation schemas
public/                  # Static assets

Customization

Editing the landing page

Landing page sections live in:

src/components/sections/

You can:

  • Reorder sections
  • Remove sections
  • Replace content and copy
  • Add new sections

Editing pricing content

Pricing UI is defined in the pricing section component.

To change prices or features:

  • Edit the pricing section component
  • Update static pricing data used by the UI

Note: Pricing is UI-only — no billing logic is included.

Editing auth pages

Auth UI pages live in:

src/app/(auth)/

These pages include:

  • Login
  • Signup
  • Forgot password
  • Email verification (UI)

To connect them to a backend:

  • Replace mock handlers with real API calls
  • Integrate your preferred auth provider (NextAuth, Clerk, Supabase, custom API, etc.)

Building for Production

To create a production build:

npm run build

To preview the production build locally:

npm run start

Deployment

Deploying to Vercel (Recommended)

  1. Push the project to GitHub, GitLab, or Bitbucket
  2. Go to https://vercel.com
  3. Click New Project
  4. Import your repository
  5. Keep default settings
  6. Click Deploy

The project works without any environment variables.

Deploying elsewhere (Netlify, custom server)

  1. Build the project:
    npm run build
  2. Serve the output using a Node-compatible environment that supports Next.js App Router.

Connecting a Backend (Optional)

This UI kit is designed to be backend-agnostic.

You can connect it to:

  • NextAuth
  • Clerk
  • Supabase Auth
  • Firebase
  • Custom API

To do so:

  • Replace form handlers in src/app/(auth)/
  • Add API routes or external API calls
  • Supply environment variables as needed

Common Issues

Node version error

Make sure Node 20+ is installed.

Build errors after customization

  • Check for missing imports
  • Ensure removed components are not referenced
  • Restart the dev server after changes

Support

If you run into issues:

  • Verify your Node version
  • Reinstall dependencies
  • Check that no backend-only code was added accidentally