Files, defaults, scripts, and conventions in projects generated by create-next-mui.

Generated Project

The base template is intentionally small. It gives you the Next.js and Material UI foundation, then leaves application-specific architecture to your project.

Default Configuration

Configuration	Default
Language	TypeScript
Linter	Oxlint
Optional features	None
Dependency install	Manual unless selected interactively

Use --js with --yes when you want the JavaScript template in non-interactive mode.

Runtime Dependencies

The base template includes:

Package	Purpose
`next`	Next.js App Router framework
`react`, `react-dom`	React runtime
`@mui/material`	Material UI components
`@mui/icons-material`	Material UI icons
`@mui/material-nextjs`	App Router integration for MUI
`@emotion/react`, `@emotion/styled`	MUI styling engine

TypeScript projects also include TypeScript and React type packages.

Scripts

The base template starts with standard Next.js scripts:

{
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

Choosing or adding a linter adds:

{
  "lint": "...",
  "lint:fix": "..."
}

Oxlint uses oxlint and oxlint --fix. ESLint uses eslint ./src and eslint ./src --fix.

Source Structure

TypeScript projects are generated with this structure:

src/
|-- app/
|   |-- globals.css
|   |-- layout.tsx
|   `-- page.tsx
|-- config-global.ts
|-- lib/
|   `-- router-link/
|-- sections/
|   `-- home/
`-- theme/
    |-- core/
    |-- create-theme.ts
    `-- theme-provider.tsx

JavaScript projects use the same layout with .js and .jsx files.

Theme Provider

The root layout imports ThemeProvider from @/theme/theme-provider and wraps the application body with it.

The provider composes:

Provider	Role
`AppRouterCacheProvider`	Integrates MUI with the Next.js App Router
MUI `ThemeProvider`	Applies the local MUI theme
`CssBaseline`	Normalizes default browser styles

Feature installers can wrap the same children slot. For example, the React Query installer adds TanStackProvider inside the existing layout.

Path Alias

Generated projects use the @/* alias for imports from src.

import { ThemeProvider } from "@/theme/theme-provider";

Use this alias when adding source files inside the generated app.

Gitignore Handling

The templates ship a file named gitignore because npm can strip real .gitignore files from published packages. During scaffolding, the CLI renames it to .gitignore.

Generated Project

On this page