nextjs-stack

name

nextjs-stack

description

This skill provides the default Next.js monorepo tech stack for rapid MVP development. Use when the user asks to "create a Next.js app", "add a new app to the monorepo", "build a dashboard", "scaffold a React page", "set up a new frontend", or when working in any project that uses Next.js with Bun workspaces. Also load when Claude is about to suggest UI libraries, form handling, or styling approaches in a Next.js context — this skill defines the defaults.

Next.js MVP Stack

Default tech stack and patterns for Next.js-based rapid MVPs. These are opinionated defaults — deviations require explicit discussion (see architecture-decisions skill).

Core Stack

Layer	Technology	Version	Notes
Framework	Next.js	16.x	App Router only, no Pages Router
React	React	19.x	Server Components by default
Runtime	Bun	1.1+	Package manager AND runtime
Monorepo	Bun workspaces	—	Workspace management via bun run --filter
Language	TypeScript	5.6+	Strict mode always

UI & Styling

Concern	Default	Details
CSS framework	Tailwind CSS 4	With OKLCH color variables
Component library	shadcn/ui	New York style, RSC-compatible
Primitives	Radix UI	Via shadcn/ui, never install Radix directly
Icons	lucide-react	Only icon library; never Font Awesome or Heroicons
Theming	next-themes	Class-based dark mode
Animations	tailwindcss-animate	Plugin for Tailwind
Typography	@tailwindcss/typography	For prose content
Variant management	class-variance-authority	For component variants
Class merging	tailwind-merge + clsx	Via cn() utility from @repo/utils
Toasts	sonner	Never react-hot-toast or react-toastify
Charts	recharts	When data visualization needed

Forms & Validation

Concern	Default
Form library	React Hook Form
Schema validation	Zod
Form resolvers	@hookform/resolvers
Number inputs	react-number-format

Never use Formik. Never use Yup. Always pair Zod schemas with React Hook Form via resolvers.

Authentication

Concern	Default
Auth library	NextAuth (Auth.js) v5
Default provider	Google OAuth
Dev mode	Mock user bypass for local development

Three-Layer Component Architecture

1. Base UI (packages/ui/) — shadcn/ui components built on Radix primitives. These are generic, reusable, and have no business logic. Exported from @repo/ui.

2. Application components (apps/<name>/src/components/) — Business-specific compositions of Base UI components. Organized in subdirectories by feature (e.g., components/dashboard/, components/invest/).

3. Pages (apps/<name>/src/app/) — Next.js App Router pages that compose application components. Minimal logic in pages; delegate to components.

Shared building blocks (components/blocks/)

Reusable application-level primitives like metric-card, section-header, currency-input. These sit between Base UI and feature components.

Code Style (enforced)

• 2-space indentation, double quotes, no semicolons
• import type for React types
• Named imports for libraries (never import * as)
• "use client" directive only on interactive components
• PascalCase for components, camelCase for functions, kebab-case for files
• Design tokens over hardcoded color/spacing values
• Path alias: @/* maps to ./src/*

Data/Format Separation

Next.js projects enforce data/format separation:

• Data (src/content/): Content files as TypeScript (.ts) or JSON (.json)
  • Use .ts when you need type safety or computed values
  • Use .json for simple data matching 11ty's _data/ pattern
• Format (src/components/ + src/app/): React components and pages — these only define presentation
• Never hardcode content in page components or templates — always extract to src/content/ files

Tailwind CSS v4 (critical)

Tailwind CSS v4 is a major change from v3. These rules are non-negotiable:

• No tailwind.config.ts — v4 does not use a JS/TS config file
• @import "tailwindcss" replaces @tailwind base/components/utilities in globals.css
• @plugin directives replace the plugins: [] array
• @theme inline maps CSS custom properties to Tailwind utility classes
• @source tells Tailwind where to scan for class usage (for monorepo packages/ui/)
• @tailwindcss/postcss is the PostCSS plugin (replaces tailwindcss + autoprefixer)
• components.json must NOT have a tailwind.config field

Deployment (GitHub Pages)

Default deployment target is GitHub Pages via static export:

• next.config.ts uses output: "export", basePath, and assetPrefix driven by NEXT_PUBLIC_REPO_NAME
• GitHub Actions workflow builds with Bun and deploys to Pages
• All image paths in components must use the basePath helper pattern
• Use static public/opengraph.png (1200x630) for OG images — no dynamic generation (incompatible with static export)
• images: { unoptimized: true } is required for static export

Open Graph

Every project must include Open Graph metadata in the root layout:

• metadataBase dynamically constructed from NEXT_PUBLIC_REPO_NAME for GitHub Pages
• Static opengraph.png (1200x630) in public/
• Twitter card set to summary_large_image
• Never use opengraph-image.tsx or twitter-image.tsx dynamic routes — incompatible with static export

Anti-patterns (never do these)

• Never use pages/ directory — App Router only
• Never install Radix UI packages directly — use shadcn/ui
• Never use CSS Modules or styled-components — Tailwind only
• Never use var — const preferred, let when needed
• Never hardcode colors — use CSS custom properties via Tailwind theme
• Never hardcode image paths without basePath — use the basePath helper for GitHub Pages compatibility
• Never create tailwind.config.ts — Tailwind v4 configures everything in CSS
• Never use --webpack flag in dev script — Turbopack is the default bundler in Next.js 16
• Never pass --turbopack flag in dev script — it is the default in Next.js 16 and the flag is unnecessary
• Never use dynamic OG image routes with output: "export" — use static images
• Never put business logic in page.tsx files — extract to components
• Never hardcode content in page.tsx or components — extract to src/content/

Detailed Patterns

For complete file templates, configuration examples, and directory structures, read references/nextjs-patterns.md.