Documentation
v1.0.0
Framework Integration
N

Next.js Integration

Complete setup guide for Next.js 13+ with App Router

Requirements

Supported Versions
  • Next.js:13.4+
  • React:18+
  • TypeScript:5.0+
  • Tailwind CSS:3.0+
Compatibility Notes
  • • Works best with App Router
  • • Pages Router supported with limitations
  • • Server Components compatible
  • • Edge Runtime supported

Quick Setup

Step 1: Install Dependencies
Add vibecoding dependencies to your Next.js project
Terminal
npm install zustand @radix-ui/react-dialog @radix-ui/react-collapsible @radix-ui/react-dropdown-menu @radix-ui/react-select @radix-ui/react-tabs @radix-ui/react-tooltip lucide-react class-variance-authority clsx tailwind-merge nanoid
Step 2: Configure Tailwind CSS
Update your Tailwind configuration for vibecoding styles
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [],
}
Step 3: Add CSS Variables
Add the required CSS variables to your global styles
app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 84% 4.9%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 94.1%;
  }
}

App Router Integration

Basic Editor Page
Create your first vibecoding editor page with App Router
app/editor/page.tsx
"use client";

import { EditorLayout } from "@/components/editor/editor-layout";
import { LeftSidebar } from "@/components/editor/left-sidebar";
import { RightSidebar } from "@/components/editor/right-sidebar";
import { PromptEditor } from "@/components/editor/prompt-editor";
import { Toolbar } from "@/components/editor/toolbar";

export default function EditorPage() {
  return (
    <div className="h-screen bg-background">
      <EditorLayout
        leftSidebar={<LeftSidebar />}
        rightSidebar={<RightSidebar />}
        toolbar={<Toolbar />}
      >
        <PromptEditor />
      </EditorLayout>
    </div>
  );
}
Server Component Integration
Use vibecoding with Next.js Server Components
app/prompts/[id]/page.tsx
import { PromptViewer } from "@/components/prompt-viewer";
import { getPromptById } from "@/lib/prompts";

interface PageProps {
  params: { id: string };
}

export default async function PromptPage({ params }: PageProps) {
  const prompt = await getPromptById(params.id);
  
  if (!prompt) {
    return <div>Prompt not found</div>;
  }

  return (
    <div className="container py-8">
      <h1 className="text-3xl font-bold mb-6">{prompt.title}</h1>
      <PromptViewer blocks={prompt.blocks} />
    </div>
  );
}

// Generate static params for ISR
export async function generateStaticParams() {
  const prompts = await getAllPrompts();
  return prompts.map((prompt) => ({
    id: prompt.id,
  }));
}

API Integration

Prompt API Routes
Create API endpoints for saving and loading prompts
app/api/prompts/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { savePrompt, getPrompts } from '@/lib/prompts';
import type { Block } from '@/types/prompt-blocks';

export async function GET() {
  try {
    const prompts = await getPrompts();
    return NextResponse.json(prompts);
  } catch (error) {
    return NextResponse.json(
      { error: 'Failed to fetch prompts' },
      { status: 500 }
    );
  }
}

export async function POST(request: NextRequest) {
  try {
    const body = await request.json();
    const { title, blocks }: { title: string; blocks: Block[] } = body;
    
    const prompt = await savePrompt({ title, blocks });
    
    return NextResponse.json(prompt, { status: 201 });
  } catch (error) {
    return NextResponse.json(
      { error: 'Failed to save prompt' },
      { status: 500 }
    );
  }
}

Deployment

Vercel Deployment

Deploy your vibecoding Next.js app to Vercel with zero configuration.

vercel --prod

All vibecoding features work out of the box on Vercel's platform.

Environment Variables

Optional environment variables for production:

VIBECODE_API_URL=
VIBECODE_ANALYTICS=
DATABASE_URL=

Common Issues

Hydration Mismatch

If you encounter hydration mismatches, ensure all client components are properly marked with "use client".

Error: Hydration failed because the server-rendered HTML didn't match the client
CSS Variables Not Loading

Make sure CSS variables are added to your globals.css and properly imported in layout.tsx.

View Full Troubleshooting Guide
GuidesReact Integration