Plugins
Extends support with plugins
Now, next-mui supports plugins to extend the base setup.
Supported plugins
| Plugin | Description |
|---|---|
zustand | Extends base setup with zustand for statemanagement |
react-query | Extends the client side data fetching via TanStack Query (react-query) |
Installation method
Interactive CLI supports these plugins, If you're building a fresh project.
The add argument dictate the cli to install a plugin after namespace
Zustand
npx create-next-mui add zustandInitializes, zustand with a sample store
// counter-store.tsx
import { create } from "zustand";
// ---------------------------------------------------------------
interface CounterStore {
count: number;
increment(): void;
decrement(): void;
reset(): void;
}
export const useCounterStore = create<CounterStore>((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count - 1 })),
reset: () => set({ count: 0 }),
}));TanStack Query
npx create-next-mui add react-queryThe above command omits a tanstack-provider.tsx wrapper component
// tanstack-provider.tsx
"use client";
import { useState } from "react";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
// ---------------------------------------------------------------
export function TanStackProvider({ children }: { children: React.ReactNode }) {
const [queryClient] = useState(
() =>
new QueryClient({
defaultOptions: {
queries: {
// With SSR, we usually want to set some default staleTime
// to avoid refetching immediately on the client
staleTime: 60 * 1000,
},
},
}),
);
return (
<QueryClientProvider client={queryClient}>
{children}
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
);
}And updates the layout.tsx
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html
lang="en"
suppressHydrationWarning
className={`${geistSans.variable} ${geistMono.variable}`}
>
<body>
<ThemeProvider> {children} </ThemeProvider>
<ThemeProvider>
<TanStackProvider> {children} </TanStackProvider>
</ThemeProvider>
</body>
</html>
);
}