Material UI - Next.js App Router example in TypeScript

This is a Next.js project bootstrapped using create-next-app with Material UI installed and already made theme configuration for easier theming in your app.

Note

This example only change color theme, but not whole ThemeOptions, so if you want to modify other than palette, you have to modify it here.

How to use

You only need to modify themes in theme.tsx:

1. add theme name in here.
2. then create your theme object in this variable.
3. toggle or change theme using useCustomTheme from "@/config/theme", see example here.

TODO

• adapt material 3 (at least for now, until official MUI release v7 stable)

Learn more

To learn more about this example:

• Next.js documentation - learn about Next.js features and API.
• Customizing Material UI - approaches to customizing Material UI.
• This example was a modified version of Material UI Next.js TypeScript example