Next.js is a React framework for production-grade applications with server-side rendering, static site generation, and React Server Components.

Why use Next.js?

• Performance: Automatic code splitting, image optimization, and edge runtime support
• Developer Experience: Hot reload, TypeScript support, and built-in routing
• Flexibility: Choose between SSR, SSG, or ISR per page
• Server Components: React Server Components for zero-bundle client code
• App Router: Modern file-system based routing with layouts and streaming

Modules

UI & Styling

shadcn/ui

Link to shadcn/ui

A collection of beautifully designed, accessible components built with Radix UI and Tailwind CSS that you can copy, customize, and integrate directly into your app.

Technical changes:

• Turborepo mode: Creates packages/ui/ package with package.json exporting components
  • Dependencies: @radix-ui/react-slot, class-variance-authority, clsx, cmdk, lucide-react, radix-ui, tailwind-merge, vaul, tw-animate-css
  • Exports: ./components/*, ./hooks/*, ./lib/*, ./postcss.config
• Single repo mode: Adds dependencies directly to app's package.json
• Creates src/components/ui/button.tsx - Example button component with variants
• Creates src/lib/utils.ts - cn() helper for merging Tailwind classes
• Creates components.json - shadcn/ui configuration file
• Creates postcss.config.mjs - PostCSS config for Tailwind
• Creates tsconfig.json - TypeScript paths config

Next Themes

Link to Next Themes

Theme management library for Next.js with system preference detection and no flash of incorrect theme.

Technical changes:

• Adds next-themes dependency to package.json
• Wraps app with <NextThemesProvider> in src/components/app-providers.tsx
• Config: enableSystem and storageKey set to {appName}-theme

Features

MDX

Link to MDX

Markdown with JSX support for content-driven pages. Parse frontmatter, render MDX files, and create dynamic content pages.

Requirements: None

Technical changes:

• Adds dependencies: @mdx-js/loader, @mdx-js/react, @next/mdx, next-mdx-remote, @types/mdx (dev)
• Creates src/lib/mdx.ts - parseFrontmatter() utility for extracting metadata from MDX files
• Creates src/mdx-components.tsx - Custom MDX component mappings
• Creates src/styles/mdx.css - MDX-specific styling
• Creates src/app/[...mdxExampleSlug]/page.tsx - Example dynamic MDX page route
• Modifies next.config.ts:
  • Imports createMDX from @next/mdx
  • Adds .mdx and .md to turbopack.resolveExtensions
  • Wraps config with withMDX()

PWA

Link to PWA documentation

Progressive Web App support with web app manifest for installable apps.

Technical changes:

• Creates src/app/manifest.ts - Web app manifest configuration with:
  • App name and short name (uses {appName})
  • Description, start URL, display mode
  • Icon definitions (192x192, 512x512)
  • Background and theme colors

Authentication

Better Auth

Link to Better Auth

The most comprehensive authentication framework for TypeScript with built-in session management, multiple providers, and type-safe APIs.

Requirements: Requires database + ORM

Technical changes:

• Turborepo mode: Creates packages/auth/ package
  • package.json with dependencies: better-auth, @repo/db, zod
  • Exports: ./auth, ./auth-client, ./route, ./types
• Adds better-auth dependency to app's package.json
• Creates src/auth.ts (turborepo: packages/auth/src/auth.ts) - Server-side auth config:
  • Database adapter (Drizzle or Prisma) with provider-specific config
  • Schema mappings for user, account, session, verification tables
  • Email/password plugin enabled
  • Next.js cookies plugin
  • Session expiry: 15 days
• Creates src/auth-client.ts - Client-side auth hooks and utilities
• Creates src/types.ts - TypeScript auth types
• Creates src/app/api/auth/[...all]/route.ts - Auth API route handler
• Creates src/route.ts - Route helper exports
• Creates tsconfig.json - TypeScript config with path aliases

Data Fetching

TanStack Query

Link to TanStack Query

Powerful data-fetching and state management library for server state with caching, background updates, and optimistic UI.

Technical changes:

• Adds @tanstack/react-query dependency to package.json
• Wraps app with <QueryClientProvider> in src/components/app-providers.tsx
• QueryClient config:
  • Retry: 1 attempt
  • refetchOnWindowFocus: false
  • staleTime: 5 minutes
  • gcTime: 10 minutes

TanStack Devtools

Link to TanStack Devtools

Dedicated devtools panel for TanStack libraries (Query, Router, Form) for debugging and inspecting state.

Technical changes:

• Adds dependencies: @tanstack/react-devtools, @tanstack/react-query-devtools
• Adds devtools panel to src/app/layout.tsx:
  • Only in development mode
  • Position: top-left
  • TanStack Query plugin integrated
  • Server bus connection enabled

Forms

React Hook Form

Link to React Hook Form

Performant, flexible form library with easy validation and minimal re-renders.

Technical changes:

• Adds dependencies: react-hook-form, @hookform/resolvers

TanStack Form

Link to TanStack Form

Headless, type-safe form library with powerful validation and framework-agnostic design.

Technical changes:

• Adds dependency: @tanstack/react-form