Next.js

Overview

When you select Next.js as your frontend, Fusion Stack scaffolds a Next.js 16 app using the App Router with Turbopack enabled by default.

Scaffolded Structure

src/
  app/
    layout.tsx        # Root layout with metadata and font setup
    page.tsx          # Home page
    globals.css       # Tailwind v4 base styles
  lib/
    utils.ts          # cn() helper (clsx + tailwind-merge)
next.config.ts        # Next.js configuration
tsconfig.json         # TypeScript config with path aliases
postcss.config.mjs    # PostCSS for Tailwind

Key Files

next.config.ts

The generated config is minimal by default. Turbopack runs automatically via next dev --turbopack when using the dev script.

tsconfig.json

Includes @/* path aliases pointing to ./src/*, so you can import as:

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

src/lib/utils.ts

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Scripts

Tailwind CSS v4

The scaffold uses Tailwind CSS v4 with the PostCSS plugin. Configuration is done entirely in CSS via @theme blocks — there is no tailwind.config.ts.

Environment Variables

No Next.js-specific env vars are required by default. Variables from other stack options (Convex URL, Clerk keys, etc.) are placed in .env.local.