Next.js

Next.js is a React framework for building server-side rendered and static site applications with powerful features like Server Components and App Router.

Presentation

Full-stack React framework for production-grade applications with server-side rendering, static site generation, and React Server Components.

→ Official Next.js Documentation

What create-faster adds

Beyond the official Next.js setup, we include:

Project Structure:

Pre-configured error pages (error.tsx, not-found.tsx)
Centralized app providers (src/components/app-providers.tsx)
Custom hooks directory with useIsMobile utility

Development Scripts:

build:analyze - Bundle size analysis with @next/bundle-analyzer
start:inspect - Debug mode with Node inspector

Modules

shadcn/ui

→ shadcn/ui Documentation

Technical changes:

Files added:

src/
├── components/ui/
│   └── button.tsx        # Example component with variants
├── lib/
│   └── utils.ts          # cn() helper for Tailwind classes
└── styles/
    └── globals.css       # Tailwind setup

components.json           # shadcn CLI configuration
postcss.config.mjs        # PostCSS config for Tailwind

# Turborepo only:
packages/ui/
├── src/components/ui/
├── package.json          # @repo/ui with exports
└── postcss.config.mjs

Modified files:

package.json - Adds radix-ui, class-variance-authority, clsx, cmdk, tailwind-merge, vaul, tw-animate-css

Turborepo mode: Creates @repo/ui package with shared components accessible via @repo/ui imports.

next-themes

→ next-themes Documentation

Technical changes:

Modified files:

src/components/app-providers.tsx - Wraps app with NextThemesProvider
package.json - Adds next-themes dependency

Configuration:

enableSystem: true - Respects system theme preference
storageKey: '{appName}-theme' - Persists theme choice

MDX

→ MDX Documentation

Technical changes:

Files added:

src/
├── lib/
│   └── mdx.ts                  # parseFrontmatter() utility
├── mdx-components.tsx          # Custom MDX component mappings
├── styles/
│   └── mdx.css                 # MDX-specific styling
└── app/[...mdxExampleSlug]/
    └── page.tsx                # Dynamic MDX route example

Modified files:

next.config.ts - Adds MDX support with createMDX and .mdx/.md extensions
package.json - Adds @mdx-js/loader, @mdx-js/react, @next/mdx, next-mdx-remote, @types/mdx

PWA

→ PWA Documentation

Technical changes:

Files added:

src/app/
└── manifest.ts             # Web app manifest config

Manifest configuration:

App name and short name (uses {appName})
Icon definitions (192x192, 512x512)
Start URL, display mode, theme colors

Better Auth

→ Better Auth Documentation

Requirements: Requires database + ORM selection

Technical changes:

Files added:

src/
├── lib/auth/
│   ├── auth.ts              # Server auth config
│   └── auth-client.ts       # Client auth helpers
└── app/api/auth/[...all]/
    └── route.ts             # Auth API handler

# Turborepo only:
packages/auth/
├── src/
│   ├── auth.ts
│   ├── auth-client.ts
│   ├── route.ts
│   └── types.ts
├── package.json             # @repo/auth
└── tsconfig.json