Skip to content
Varity Docs

Next.js Quick Start

Varity Team Core Contributors Updated March 2026

Build a full-stack Next.js app with authentication, database, and deployment in 5 minutes.

Prerequisites

Section titled “Prerequisites”
  • Node.js 18 or later
  • npm, pnpm, or yarn
  • Python 3.8+ (for the CLI)

Create Your App

Section titled “Create Your App”

  1. Install the CLI

    Terminal window
    pip install varitykit

  2. Scaffold a new project

    Terminal window
    varitykit init my-app
    cd my-app

    This creates a Next.js project from the SaaS Starter template with auth, database, and a full dashboard already configured.

  3. Install dependencies

    Terminal window
    npm install

  4. Start the dev server

    Terminal window
    npm run dev

    Open http://localhost:3000. You should see the landing page.

What’s Included

Section titled “What’s Included”

The template gives you a complete app out of the box:

PageRouteDescription
Landing/Marketing page with feature highlights
Login/loginEmail, Google, Twitter, Discord, GitHub login
Dashboard/dashboardOverview with key metrics
Projects/dashboard/projectsProject CRUD with status tracking
Tasks/dashboard/tasksTask management with priorities
Team/dashboard/teamTeam member management
Settings/dashboard/settingsApp settings

Project Structure

Section titled “Project Structure”
my-app/
├── src/
│   ├── app/                     # Next.js App Router pages
│   │   ├── page.tsx             # Landing page
│   │   ├── login/page.tsx       # Login page
│   │   ├── layout.tsx           # Root layout (auth provider)
│   │   └── dashboard/
│   │       ├── layout.tsx       # Dashboard layout (sidebar + mobile nav)
│   │       ├── page.tsx         # Dashboard home
│   │       ├── projects/page.tsx
│   │       ├── tasks/page.tsx
│   │       ├── team/page.tsx
│   │       └── settings/page.tsx
│   ├── lib/
│   │   ├── varity.ts            # SDK import
│   │   ├── database.ts          # Collection helpers
│   │   ├── hooks.ts             # React hooks for data
│   │   └── constants.ts         # App name, navigation
│   ├── types/
│   │   └── index.ts             # TypeScript interfaces
│   └── components/ui/           # Shared components
├── .env.example                 # Environment variables
├── next.config.js
├── tailwind.config.js
└── package.json

Understand the Key Files

Section titled “Understand the Key Files”

Authentication (already configured)

Section titled “Authentication (already configured)”

The root layout wraps everything with the auth provider:

src/app/layout.tsx
import { PrivyStack } from '@varity-labs/ui-kit';


export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <PrivyStack appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}>
          {children}
        </PrivyStack>
      </body>
    </html>
  );
}

Database (already configured)

Section titled “Database (already configured)”

Data types are defined in src/types/index.ts:

src/types/index.ts
export interface Project {
  id?: string;
  name: string;
  description: string;
  status: 'active' | 'paused' | 'completed';
  owner: string;
  members: string[];
  dueDate: string;
  createdAt: string;
}

Collections are set up in src/lib/database.ts:

src/lib/database.ts
import { db } from '@varity-labs/sdk';
import type { Project, Task, TeamMember } from '../types';


export const projects = () => db.collection<Project>('projects');
export const tasks = () => db.collection<Task>('tasks');
export const teamMembers = () => db.collection<TeamMember>('team_members');

Hooks provide CRUD with optimistic updates in src/lib/hooks.ts:

src/lib/hooks.ts (simplified)
export function useProjects() {
  const [data, setData] = useState<Project[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);


  // Auto-loads on mount, provides create/update/remove with optimistic UI
  return { data, loading, error, create, update, remove, refresh };
}
Section titled “Navigation”

Edit src/lib/constants.ts to change your app name and navigation:

src/lib/constants.ts
export const APP_NAME = 'TaskFlow';


export const NAVIGATION_ITEMS = [
  { label: 'Dashboard', icon: 'dashboard', path: '/dashboard' },
  { label: 'Projects', icon: 'folder', path: '/dashboard/projects' },
  { label: 'Tasks', icon: 'list', path: '/dashboard/tasks' },
  { label: 'Team', icon: 'people', path: '/dashboard/team' },
  { label: 'Settings', icon: 'settings', path: '/dashboard/settings' },
];

Deploy

Section titled “Deploy”

  1. Build your app

    Terminal window
    npm run build

  2. Deploy to Varity

    Terminal window
    varitykit app deploy

  3. Your app is live!

    The terminal shows your live URL. Your app is deployed with:

    • Authentication ready (users can sign in immediately)
    • Database credentials automatically injected
    • Free usage for your end users (no fees)

Submit to the App Store

Section titled “Submit to the App Store”

To list your app for users to discover and purchase:

Terminal window
varitykit app deploy --submit-to-store

This opens the Developer Portal where you can set pricing and app details.

Customize

Section titled “Customize”

Change Branding

Section titled “Change Branding”
  1. App name: Edit APP_NAME in src/lib/constants.ts
  2. Colors: Edit CSS variables in src/app/globals.css
  3. Logo: Replace logo in public/

Add a New Page

Section titled “Add a New Page”
  1. Create src/app/dashboard/analytics/page.tsx
  2. Add to NAVIGATION_ITEMS in constants.ts: 
    { label: 'Analytics', icon: 'dashboard', path: '/dashboard/analytics' }

Add a New Data Model

Section titled “Add a New Data Model”

See the Add a CRUD Feature tutorial for a step-by-step guide.

Next Steps

Section titled “Next Steps”