Stable framework

Next.js, with the complete FSD structure

Use the Next.js App Router with thin route wrappers, reusable FSD page slices, and client-side providers for the selected stack. The CLI downloads a dedicated template repository and saves your choices in fsd.config.json for subsequent generation.

Create a project

bash

npx create-fsd-architecture@latest my-next-app --framework nextjs

bash

npx create-fsd-architecture@latest my-next-app --framework nextjs --yes --no-start
cd my-next-app
npm run dev

The first command offers interactive stack choices. The second accepts the defaults below, installs dependencies with npm, and leaves starting the development server to you. Interactive creation also supports pnpm, Yarn, and Bun. React Query and forms can be disabled.

Default stack

Framework

Next.js 16 + React 19

API client

Axios by default; native Fetch optional

Server state

TanStack React Query

Client state

Zustand by default; Redux Toolkit or none optional

Forms

React Hook Form + Zod

Styling

Tailwind CSS 4 and shared UI

Quality

TypeScript, Biome, Steiger, Husky, Commitlint

Architecture and routing

text

src/
├── app/          # Bootstrap, providers, routing, and styles
├── pages/        # FSD page compositions
├── widgets/      # Large reusable UI blocks
├── features/     # User interactions and business actions
├── entities/     # Business entities
└── shared/       # API, assets, config, utilities, types, and UI

This template configures pageExtensions in next.config.ts to recognize route.tsx, route.ts, route.jsx, and route.js. Keep that configuration: FSD files in src/pages are compositions, not Pages Router endpoints.

text

src/pages/account/ui/account-page.tsx  # FSD page
src/pages/account/index.ts               # Public API
src/app/account/page.route.tsx            # App Router wrapper for /account

Generated interactive modules include the client directive where needed. Keep server-only code and secrets outside client modules; generating an auth UI does not provide a backend or route protection.

Generate slices and routes

Run these commands inside your generated project. The saved configuration controls the output without repeating stack prompts.

bash

npx create-fsd-architecture@latest --generate feature checkout
npx create-fsd-architecture@latest --generate entity product
npx create-fsd-architecture@latest --generate widget navbar
npx create-fsd-architecture@latest --generate page account
npx create-fsd-architecture@latest --generate feature auth

React components, API modules, state, and form integrations follow the selected capabilities. Connect generated API and auth flows to your own backend before using them with real users.

API configuration

Generated clients read NEXT_PUBLIC_API_URL, falling back to /api. Set the public backend base URL in your environment and restart the dev server. Public variables are not a place for secrets; the fallback does not create backend endpoints.

text

NEXT_PUBLIC_API_URL=https://api.example.com

Quality commands

bash

npm run fsd:check
npm run lint
npm run typecheck
npm run build
npm run ci

Use the equivalent commands for your selected package manager. New scaffolds receive template and CLI fixes; existing projects are not automatically migrated by running a newer CLI.

Template source

Open the Next.js template on GitHub