Next.js 15 with Shadcn/ui

Next.js 15 is the default framework in ZapDev, offering a powerful full-stack React experience with server-side rendering, API routes, and advanced routing capabilities.

Overview

Next.js 15 combines the best of React with server-side rendering, static site generation, and a comprehensive component library.

Pre-installed Packages

Next.js 15.3.3: Latest React framework with App Router
Shadcn/ui: Comprehensive component library (CLI-first)
Tailwind CSS v4: Utility-first CSS framework
TypeScript: Full type safety
Lucide React: Icon library

Key Features

App Router with file-based routing
Server and Client Components
Built-in API routes
Image optimization
Font optimization
Fast Refresh for instant feedback

Use Cases

Next.js 15 is best suited for:

Full-Stack Apps

Applications requiring both frontend and backend logic with API routes

SEO-Focused Sites

Websites that need server-side rendering for optimal SEO performance

E-commerce

Online stores with product pages, dynamic routing, and server actions

Content Sites

Blogs, documentation sites, and content-heavy applications

Shadcn/ui Components

Shadcn/ui provides production-ready components that you can copy and customize. All components are pre-installed in ZapDev sandboxes.

Available Components

Layout: Card, Separator, Tabs, Accordion
Forms: Button, Input, Select, Checkbox, Radio, Switch
Data Display: Table, Badge, Avatar, Calendar
Feedback: Alert, Dialog, Toast, Progress
Navigation: Dropdown Menu, Navigation Menu, Breadcrumb
Overlays: Sheet, Popover, Tooltip, Command

Component Usage

Button
Card
Form
Dialog

import { Button } from "@/components/ui/button"

export default function Page() {
  return (
    <div>
      <Button variant="default">Click me</Button>
      <Button variant="destructive">Delete</Button>
      <Button variant="outline">Cancel</Button>
      <Button variant="ghost">Ghost</Button>
    </div>
  )
}

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Button } from "@/components/ui/button"

export default function Page() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card description goes here</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card content with your custom components</p>
      </CardContent>
      <CardFooter>
        <Button>Action</Button>
      </CardFooter>
    </Card>
  )
}

"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function Page() {
  const [email, setEmail] = useState("")

  return (
    <form className="space-y-4">
      <div>
        <Label htmlFor="email">Email</Label>
        <Input
          id="email"
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </div>
      <Button type="submit">Submit</Button>
    </form>
  )
}

"use client"

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"

export default function Page() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open Dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Are you sure?</DialogTitle>
          <DialogDescription>
            This action cannot be undone.
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  )
}

Critical Rules

Client Components: Add "use client" to the top of app/page.tsx and any files using React hooks (useState, useEffect, etc.)

Pre-installed Components: All Shadcn components are pre-installed. Just import and use them directly without running the CLI.

File Conventions

Main file: app/page.tsx
Components: PascalCase names, kebab-case filenames (.tsx)
Imports: Use @/ alias for absolute imports
Utilities: Import cn from @/lib/utils, not from components/ui

Project Structure

.
├── app/
│   ├── page.tsx          # Main page (add "use client" here)
│   ├── layout.tsx        # Root layout
│   └── globals.css       # Global styles
├── components/
│   ├── ui/               # Shadcn components (pre-installed)
│   └── hero.tsx          # Custom components (kebab-case)
└── lib/
    └── utils.ts          # Utility functions

Workflow

When ZapDev generates Next.js code, it follows this workflow:

Generate files: Creates all component and page files
Install packages: Runs npm install <package> --yes for additional dependencies
Validate: Runs npm run lint and npm run build to ensure code quality
Summary: Provides a task summary of what was built

Development servers are not started in ZapDev sandboxes. Code is validated using build and lint commands.

Advanced Features

Server Components

By default, all components in the App Router are Server Components:

// This is a Server Component (no "use client")
export default async function Page() {
  // You can fetch data directly
  const data = await fetch('https://api.example.com/data')
  const json = await data.json()
  
  return <div>{json.title}</div>
}

Client Components

For interactivity, add "use client" at the top:

"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"

export default function Page() {
  const [count, setCount] = useState(0)
  
  return (
    <Button onClick={() => setCount(count + 1)}>
      Count: {count}
    </Button>
  )
}

Styling with Tailwind

Combine Shadcn components with Tailwind utilities:

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function Page() {
  return (
    <Card className="max-w-md mx-auto mt-8">
      <CardHeader className="bg-gradient-to-r from-blue-500 to-purple-600">
        <CardTitle className="text-white">Gradient Header</CardTitle>
      </CardHeader>
      <CardContent className="p-6">
        <p className="text-gray-700">Custom styled card</p>
      </CardContent>
    </Card>
  )
}

Best Practices

Use the cn utility for conditional classes

import { cn } from "@/lib/utils"

<div className={cn(
  "base-class",
  isActive && "active-class",
  "another-class"
)} />

Extract reusable components

Break complex UIs into smaller components in components/ directory:

// components/hero.tsx
export function Hero() {
  return <section>...</section>
}

// app/page.tsx
import { Hero } from "@/components/hero"

Inspect component APIs before using

Use the readFiles tool to check component props and variants before implementation.

Get Started

Core Features

Frameworks

Usage & Billing

Guides

Next.js 15 with Shadcn/ui

Overview

Pre-installed Packages

Key Features

Use Cases

Full-Stack Apps

SEO-Focused Sites

E-commerce

Content Sites

Shadcn/ui Components

Available Components

Component Usage

Critical Rules

File Conventions

Project Structure

Workflow

Advanced Features

Server Components

Client Components

Styling with Tailwind

Best Practices

Getting Started

Framework Overview

Examples

API Reference

Build docs developers (and LLMs) love

Get Started

Core Features

Frameworks

Usage & Billing

Guides

​Overview

​Pre-installed Packages

​Key Features

​Use Cases

Full-Stack Apps

SEO-Focused Sites

E-commerce

Content Sites

​Shadcn/ui Components

​Available Components

​Component Usage

​Critical Rules

​File Conventions

​Project Structure

​Workflow

​Advanced Features

​Server Components

​Client Components

​Styling with Tailwind

​Best Practices

​Related Resources

Getting Started

Framework Overview

Examples

API Reference

Build docs developers (and LLMs) love

Overview

Pre-installed Packages

Key Features

Use Cases

Shadcn/ui Components

Available Components

Component Usage

Critical Rules

File Conventions

Project Structure

Workflow

Advanced Features

Server Components

Client Components

Styling with Tailwind

Best Practices

Related Resources