DEV Community: Vikash Kumar

How to Integrate Material UI with Next.js App Router

Vikash Kumar — Sat, 18 Jul 2026 07:48:57 +0000

Hello, I'm Vikash

I have been working with MaterialUI for almost 3 years.

Every Next.js developer has been here.
You create a fresh project.

npx create-next-app

Then comes the part you already know by heart.

Install MUI.

Install Emotion.

Create the theme.

Wrap the providers.

Configure the App Router.

Organize the theme folder.

Repeat.

Again.

And again.

After doing this across multiple projects, I realized something:

I wasn't solving a new problem each time—I was rebuilding the exact same foundation.

That made me ask myself:

Why am I spending 10–15 minutes on setup before I can even build my first component?

The manual approach

For a standard MUI setup you'll usually:

Install Material UI packages
Configure Emotion
Create a theme
Add ThemeProvider
Set up the App Router layout
Organize your theme files
Configure linting (optional)

None of these steps are difficult.
They're just repetitive.

That's why I built create-next-mui

Instead of documenting the same setup for every project, I turned it into a CLI.

Now the same setup becomes:

npx create-next-mui

A few prompts later, you have a production-ready Next.js + Material UI project with the architecture already in place.

If you need more later, plugins can be added as well:

npx create-next-mui add zustand

npx create-next-mui add react-query

No copying files.

No hunting through documentation.

Just start building.

The goal isn't to replace learning

I still recommend understanding how Material UI integrates with the Next.js App Router. The official documentation explains the concepts well, including layouts and the App Router architecture.

The goal of the CLI is different.

Once you already know the setup, you shouldn't have to rebuild it every time.

Developer experience matters too.

I'd love your thoughts 💚

Do you still configure Material UI manually for every project?

Or do you keep your own starter template?

I'm curious how everyone approaches it.

The create-next-mui website is now live! 🚀

Vikash Kumar — Wed, 15 Jul 2026 16:15:08 +0000

🚀 The create-next-mui website is now live!

npx create-next-mui@latest my-app

You can now explore the project, get started in seconds, and discover everything the CLI has to offer—from scaffolding Next.js + MUI apps to installing plugins like Zustand and React Query.

🌐 Live: https://create-next-mui.vercel.app/

I'd love to hear your feedback and suggestions. Happy building! 💚

How to structure slices with in a Zustand Store

Vikash Kumar — Fri, 10 Jul 2026 12:48:40 +0000

States in a react application plays the role of soul in the application.

A small react application can handle states via context api for the simplicity.
But as the application grows it needs a better state management system.

Zustand Store

I am not going to talk about what is zustand ?
How to configure it with a react ( or next ) application ?
Also not going to talk about the installation process... 😴 ( Skip the boring stuff )

Here is the actual magical code, I am gonna share... 🪄

src/
└── stores/
    └── product/
        ├── index.ts
        ├── product-store.tsx
        └── slices/
            ├── create-owner-slice.ts
            └── create-product-slice.ts

In this plan, I am going to wrap the store within context api layer for SSR data injection via server components.

// page.tsx

export default async function Page({ params }) {
  const { id: productId } = await params;
  const response = await fetch('https://api.shop.com/productId');

  if (!response.ok) {
    throw new Error('Failed to fetch product');
  }

  const product: Product = await response.json();

  return (
    <ProductStoreProvider initialData={product}>
      <ProductView />
    </ProductStoreProvider>
}

ContextAPI Layer

Initializing Context API

// product-store.tsx

'use client'
import { createContext } from 'react';

export const ProductStoreContext = createContext(null);

Setup the Provider layer with InitialData passed by server component.

// product-store.tsx

import { useRef, PropsWithChildren } from 'react';

interface ProductStoreProviderProps extends PropsWithChildren {
  initialData: Product;
}

export const ProductStoreProvider = ({ children, initialData }: ProductStoreProviderProps) => {
  const ref = useRef(null);

  return (
    <ProductStoreContext.Provider value={ref.current}>{children}</ProductStoreContext.Provider>
  );
};

In this state, We've built the shell of Zustand Store. 😋

Now lets inject the initialData using a factory function to create zustand store

// product-store.tsx

import { create } from 'zustand';
import { useRef, PropsWithChildren } from 'react';

const createProductStore = (initialData: Product) =>
  create<ProductStore>((set, get) => ({
    // slices...
  }));

export const ProductStoreProvider = ({ children, initialData }: ProductStoreProviderProps) => {
  const ref = useRef(null);
  if (!ref.current) {
    ref.current = createProductStore(initialData);
  }

  return (
    <ProductStoreContext.Provider value={ref.current}>{children}</ProductStoreContext.Provider>
  );
};

finally, a hook() 🪝 to retrive data from the store

// product-store.tsx

export function useProductStore<T>(selector: (state: ProductStore) => T): T {
  const context = useContext(ProductStoreContext);
  if (!context) {
    throw new Error('useProductStore must be used within ProductStoreProvider');
  }
  return context(selector);
}

Why did I wrap the store with context api layer?

The cleanup strategy of a zustand store now entirely eliminated.
No more worries to clean up the store after unmounting. 😎🚀

Slices

Here is the most common slice demonstration,
You can refer to build a complex slice ( I mean simple slice 🤭 )

// create-product-slice.ts

import { StoreApi } from 'zustand';
import { ProductStore } from '../product-store' 

type SetState = StoreApi<ProductStore>['setState'];
type GetState = StoreApi<ProductStore>['getState'];

type ProductData = Pick<ProductSlice, 'name' | 'price' | 'category' | 'labels'>;

export interface ProductSlice {
  name: string | null;
  price: number;
  category: 'Steel' | 'Wooden' | 'Plastic' | null;
  labels: string[];
  onUpdate(data: { key: keyof ProductData; value: ProductData[keyof ProductData] }): void;
}

const createProductSlice = (set: SetState, get: GetState, initialData: Product): ProductSlice => ({
  name: initialData.name ?? null,
  price: initialData.price ?? 0,
  category: initialData.category ?? null,
  labels: initialData.labels ?? [],

  onUpdate: (data) => {
    const { key, value } = data;
    set({ [key]: value });
  },
});

Then update the product-store.tsx a bit to reflect the current changes

// product-store.tsx

import { createProductSlice } from './slices/create-product-slice'

type ProductStore = ProductSlice;
// type ProductStore = OwnerSlice & ProductSlice; // Add more slices here 👈

const createProductStore = (initialData: Product) =>
  create<ProductStore>((set, get) => ({
    ...createProductSlice(set, get, initialData),
  }));

Alright, Now you've a very solid zustand store architecture to start with...

Thanks for reading! 💖

Now with Plugin Support: npx create-next-mui v0.2.0 is live now 🚀

Vikash Kumar — Mon, 06 Jul 2026 10:57:03 +0000

We've just released v0.2.0 of create-next-mui, making it even faster to scaffold a Next.js + MUI projects.

The biggest addition in this release is plugin support.
You can now install supported integrations into your project with a single command.

🚀 Get Started

Create a new project:

npx create-next-mui my-app

Add plugins anytime:

npx create-next-mui add zustand
npx create-next-mui add react-query

✨ What's New

🔌 Plugin Support

Add Zustand to your project:

npx create-next-mui add zustand

Or install React Query ( TanStack Query ):

npx create-next-mui add react-query

No manual setup. The CLI adds the required files and configuration for you.

⚡ Faster Project Creation

You can now skip prompts using default flags:

npx create-next-mui my-app --yes

📦 Other Improvements

Added project name as a CLI argument.
New templates for Zustand and React Query.
Improved documentation.
Initial plugin architecture for future extensions.

Source:

thatonevikash / create-next-mui

🚀 The fastest way to start with Nextjs + MUI

create-next-mui

Scaffold a production-ready Next.js + Material UI application in seconds.

The generated project comes preconfigured with:

⚡ Next.js App Router
🎨 Material UI
📦 TypeScript or JavaScript templates
🧹 ESLint Flat Config
📁 Scalable project structure

No global installation required.

Quick Start

Create a new project:

npx create-next-mui my-app

npm init next-mui

If no project name is provided, the CLI will guide you through the setup interactively.

npx create-next-mui

Non-interactive Mode

Use the --yes (or -y) flag to skip prompts and accept the default configuration.

npx create-next-mui my-app --yes

This will automatically:

use the provided project name
select the TypeScript template
generate the project without prompting

This is especially useful for:

CI/CD pipelines
automation scripts
testing
quick project generation

Interactive Setup

Without --yes, the CLI walks you through the available options.

Current prompts include:

Project name
Language selection
- TypeScript (recommended)
- JavaScript
Features
- Zustand
- React Query (…

View on GitHub

Built with 💖 by thatonevikash

Launched: create-next-mui v0.1.0 🚀

Vikash Kumar — Mon, 01 Jun 2026 10:38:02 +0000

Every time I start a new project, I love to go with nextjs + mui combo.
But it is frustating to build the theme system each time from scratch ( Of course I want a granular control over theme tokens )

One thing is very common that is the theme system architecture for mui setup.

Just think about a scenario spinning up a cli that do the exact work you want to do.

npx create-next-mui@latest my-app

Overview

MUI Integration: Pre-configured theme folder parallel to the app directory.
Clean Code by Default: Integrated eslint-plugin-perfectionist for auto-sorting imports/exports.
Next.js Optimized: Built specifically for the latest Next.js patterns.

See it in action

thatonevikash / create-next-mui

🚀 The fastest way to start with Nextjs + MUI

create-next-mui

Scaffold a production-ready Next.js + Material UI application in seconds.

The generated project comes preconfigured with:

⚡ Next.js App Router
🎨 Material UI
📦 TypeScript or JavaScript templates
🧹 ESLint Flat Config
📁 Scalable project structure

No global installation required.

Quick Start

Create a new project:

npx create-next-mui my-app

npm init next-mui

If no project name is provided, the CLI will guide you through the setup interactively.

npx create-next-mui

Non-interactive Mode

Use the --yes (or -y) flag to skip prompts and accept the default configuration.

npx create-next-mui my-app --yes

This will automatically:

use the provided project name
select the TypeScript template
generate the project without prompting

This is especially useful for:

CI/CD pipelines
automation scripts
testing
quick project generation

Interactive Setup

Without --yes, the CLI walks you through the available options.

Current prompts include:

Project name
Language selection
- TypeScript (recommended)
- JavaScript
Features
- Zustand
- React Query (…

View on GitHub

Thanks for Reading

Tired of Codebases with Mismatched File Casing? 🛠️ Meet CaselyJS (v1.0.4)

Vikash Kumar — Sat, 04 Apr 2026 11:36:31 +0000

Every developer has been there. You join a new project, or you're cleaning up a legacy codebase, and you see it:

UserService.ts
product_api.js
get-orders.ts
Final_component.jsx

It’s a visual mess, and it makes finding files in your editor a constant friction point. Manually renaming dozens or hundreds of files is a tedious, error-prone nightmare.

I built CaselyJS to solve this problem permanently, and I just upgraded it to v1.0 with a full TypeScript rewrite and a brand-new CLI.

⚡ The 10-Second Quick Start (No Install Required)

The best way to try CaselyJS is with npx. You can clean up your current project right now without adding a single dependency to your package.json.

# Preview changes (dry run) in the current directory
npx caselyjs --dry

# Re-case all files in the ./src folder to kebab-case
npx caselyjs ./src --case kebab

✨ What’s New in v1.0?

I’ve transformed CaselyJS from a simple string utility into a robust, high-performance CLI tool designed for large-scale codebase refactoring.

Features

Full CLI: No code required. Run it directly from the terminal.
Refactor codebases in seconds.
Dry Run Mode: See exactly which files will be renamed before it happens.
Total peace of mind. Zero risk.
Recursive Bottom-Up: Renames deep directories first, keeping parent paths valid.
It just works, even on deeply nested structures.
File Filtering: target specific extensions (e.g., just .ts and .tsx).
Complete control over the scope of changes.

🚀 Usage Examples

npx caselyjs ./src --full --case pascal --dry

CLI Options

--case: pascal | kebab | camel ( default: kebab, shorthand: -c )

npx caselyjs ./src/components --case pascal

# or
npm caselyjs ./src/components -c pascal

--ext: ( default: "js,jsx,ts,tsx", shorthand: -e )

npx caselyjs ./src/components --ext "go,py,cpp"

# or
npm caselyjs ./src/components -e "go,py,cpp"

--ext overrides the existing extensions

--full: ( default: false, shorthand: -e )

npx caselyjs ./src/components --case kebab --full

# or
npm caselyjs ./src/components -c kebab -f

--dry: ( default: false )

npx caselyjs ./src/components --case kebab --full --dry

🧠 Under the Hood (For the Geeks)

This v1.0 rewrite was about more than just a CLI. I moved the entire core to TypeScript for strict type safety. We use Commander.js for robust flag parsing, Chalk for those beautiful terminal colors, and a custom Bottom-Up Sorting algorithm for recursive folder renames. This ensures that a child file's path isn't broken when its parent folder is renamed during the process.

Mit-Licensed and Open Source
CaselyJS is 100% open source and free to use.

I would love your feedback on the new CLI and features! If you run into any issues or have a feature request (more case types?), please open an issue or pull request on GitHub.

Try it out: npx caselyjs ./your-test-folder --dry

Repository: github.com/thatonevikash/caselyjs
NPM: npm/caselyjs

Made with ❤️ by thatonevikash

Rename codebase with ease - "caselyjs"

Vikash Kumar — Fri, 01 Aug 2025 07:40:02 +0000

Know the uses!

Renaming or changing files/folders is very common thing most of devs do it more often.

Cause

You've a project with 50+ files and folders. You're using camelCase for naming files and folders so far.

Then you realized I should use another case eg.- PascalCase, kebab-case.

In such case, you'll rename them manually.
Good but not Efficient.

Lets increase the numbers of file or folders to 500+

Caselyjs

Built to eliminate manual task.

Suppose, You've a project built on react using vite.

and the folder structure looks like

To organize entire codebase, You've decided to choose one naming case for the entire codebase, that is kebab-case.

To achieve this all you need caselyjs

npm i caselyjs

Create a file parallel to src directory as rename.js ( or change.js ) anything its up to you.

Configs

import { casely } from 'caselyjs';

casely.config({
   path: 'src',
   case: 'kebab',
   file: ['js', 'jsx', 'ts', 'tsx'],
   operate: 'full'
})

casely.execute()

npm/caselyjs

Thank You!