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.

Project Layout

When Next.js is selected, Fusion Stack lets you choose between two directory layouts in the builder or via the CLI flag.

Both layouts are fully supported. Choose based on personal preference — there is no functional difference.

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 (@/* → ./src/*)
postcss.config.mjs    # PostCSS for Tailwind

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

Tip: All other stack additions (auth routes, API layers, ORM files, etc.) follow the same layout choice — code examples throughout these docs use the src/ layout by default.

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

Path aliases are configured automatically based on your layout choice:

• src/ layout — @/* points to ./src/*
• Root layout — @/* points to ./*

Either way, imports look identical in your code:

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.