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.
Top comments (0)