create-next-mui

create-next-mui is a Node CLI for creating Next.js App Router projects with Material UI already wired in. It gives you a clean application shell, lets you choose TypeScript or JavaScript, and can install common project features during setup or later with the add command.

The generated app stays close to the standard Next.js project model, so you can keep using familiar Next.js, React, and MUI documentation after the project is created.

What It Creates

Every new project starts from one of the base templates in this repository.

Area	Included setup
Framework	Next.js App Router
UI	Material UI, Emotion, MUI App Router cache provider, CSS baseline
Theme	Local theme files under `src/theme`
Routing	`src/app` with a starter page and root layout
Imports	`@/*` path alias for source imports
Language	TypeScript by default, JavaScript when selected

The CLI also rewrites the generated package.json name to match the project folder or the current directory name when you scaffold with ..

Setup Flow

Interactive setup asks for the decisions that change the generated project:

Project name
Language: TypeScript or JavaScript
Linter: Oxlint, ESLint, or none
Optional features: React Query and/or Zustand
Whether to run npm install immediately

For automation, --yes skips the prompts and uses the current defaults: TypeScript, Oxlint, no optional features, and no automatic install.

Feature Installers

Feature installers are small, official recipes that copy files, merge dependencies, add scripts, and update the root layout when needed.

Feature	Purpose
`oxlint`	Adds Oxlint and Oxfmt configs and scripts
`eslint`	Adds ESLint flat config and lint scripts
`react-query`	Adds TanStack Query provider and dependencies
`zustand`	Adds a starter Zustand counter store

Use installers during interactive project creation, or run npx create-next-mui@latest add <feature> inside an existing project.

Project Shape

A generated TypeScript project has this general shape before optional features are added:

my-app/
|-- public/
|-- src/
|   |-- app/
|   |   |-- globals.css
|   |   |-- layout.tsx
|   |   `-- page.tsx
|   |-- config-global.ts
|   |-- lib/
|   |   `-- router-link/
|   |-- sections/
|   |   `-- home/
|   `-- theme/
|-- next.config.ts
|-- package.json
`-- tsconfig.json

JavaScript projects use the same structure with .js and .jsx files plus jsconfig.json.

Next Step

Start with Quick Start to create and run your first project.

Overview