nextjs-mui-zustand-template

Live Demo

A template for a Next.js project with Material-UI and Zustand.

• Based on App Router
• Uses RSC and normal client-side components
• Uses Material-UI for styling
• Uses Zustand for state management, and has a Out-of-the-box store
  • Also uses Immer to enhance the store
• Uses next-intl to support i18n
• Uses community solution to support SSR Dark Mode
• Uses CSS-in-JS for styling(which is the default for Material-UI)
• Uses <Suspense/> and loading.tsx to render mui's linear progress component while route loading
• Has examples of RSC between client-side components, layout codes, reactive state, and dark mode

  "next": "14.2.4",
  "react": "^18",
  "zustand": "^4.5.2"
  "@mui/material": "^5.15.20",
  "@mui/material-nextjs": "^5.15.11",

Getting Started

This template uses pnpm by default.

pnpm install
pnpm run dev

Open http://localhost:3000 with your browser to see the result.

More

Feel free to PR and open an issue if you have any suggestions or questions, or other best practices you want to know. I will try to update this repo with the latest solutions and best practices.

You can also get more at likedreamwalker.space