Sling Academy
Home/Next.js/How to Use MUI (Material UI) in Next.js 14

How to Use MUI (Material UI) in Next.js 14

Last updated: January 02, 2024

Introduction

MUI (Material UI) is a popular library of React components that follow the Material Design guidelines. Next.js 14 is the latest version of the framework for building React applications with features such as server-side rendering, static site generation, and app routing. In this response, I will explain how to integrate and use MUI in Next.js 14.

To use MUI in Next.js 14, we need to install some dependencies, configure some files, and import the MUI components that we want to use in our pages. We also need to use the use client annotation to indicate that our pages are client components, which means they run in the browser and can use MUI features such as theming and styling.

Steps to Intergate MUI into Next.js 14

Here are the steps to integrate and use MUI in Next.js:

1. Create a Next.js application using the create-next-app command with the --experimental-app and --typescript flags. For example:

npx create-next-app@latest --experimental-app nextjs13-with-mui --typescript

2. Install the packages required for MUI. The @emotion/react and @emotion/styled are peer dependencies of MUI. For example:

npm install @mui/material @emotion/react @emotion/styled

3. Delete the pages folder, as we will use the app folder (App Router) to define our pages.

4. Inside the app/layout.tsx file, import the AppRouterCacheProvider component from @mui/material-nextjs/v13-appRouter and wrap all elements under the <body> with it. This component provides the necessary cache for MUI to work with the Next.js app router. For example:

// app/layout.tsx
import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter";

export default function RootLayout(props) {
  const { children } = props;
  return (
    <html lang="en">
      <body>
        <AppRouterCacheProvider>{children}</AppRouterCacheProvider>
      </body>
    </html>
  );
}

5. Inside the app/page.tsx file, import the MUI components that you want to use and render them inside the return statement. You also need to add the use client annotation at the top of the file to indicate that this is a client component. For example:

// app/page.tsx
"use client";
import { Button, Grid, Stack } from "@mui/material";

export default function Home() {
  return (
    <Grid
      container
      height="100vh"
      alignItems="center"
      justifyContent="center"
      direction="column"
    >
      <h1>Using MUI with Next.js 13</h1>
      <Stack direction="row" columnGap={1}>
        <Button variant="text">Text</Button>
        <Button variant="contained">Contained</Button>
        <Button variant="outlined">Outlined</Button>
      </Stack>
    </Grid>
  );
}

Complete code example

Here is the complete code example that you can run to see the result:

// app/layout.tsx
import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter";

export default function RootLayout(props) {
  const { children } = props;
  return (
    <html lang="en">
      <body>
        <AppRouterCacheProvider>{children}</AppRouterCacheProvider>
      </body>
    </html>
  );
}

// app/page.tsx
"use client";
import { Button, Grid, Stack } from "@mui/material";

export default function Home() {
  return (
    <Grid
      container
      height="100vh"
      alignItems="center"
      justifyContent="center"
      direction="column"
    >
      <h1>Using MUI with Next.js 13</h1>
      <Stack direction="row" columnGap={1}>
        <Button variant="text">Text</Button>
        <Button variant="contained">Contained</Button>
        <Button variant="outlined">Outlined</Button>
      </Stack>
    </Grid>
  );
}

Conclusion

In this tutorial, I have explained how to integrate and use MUI in Next.js 14 using a simple example. By using these things together, I hope you can build great web apps to make the world a better place to live. Happy coding & see you again in other articles.

Next Article: 3 Ways to Set Background Image in Next.js

Previous Article: How to Correctly Use Bootstrap 5 in Next.js

Series: Working with CSS in Next.js

Next.js

Related Articles

You May Also Like

  • Solving Next.js Image Component Error with CSS Classes
  • Fixing Data Update Issues in Next.js Production
  • Fixing Next.js Undefined ENV Variables in Production Build
  • Solving Next.js SyntaxError: Unexpected token ‘export’
  • Next.js Error: Found Page Without a React Component as Default Export – How to Fix
  • Fixing Next.js Error: Blank Page on Production Build
  • Fixing Next.js Error when Importing SVGs: A Step-by-Step Guide
  • Next.js Issue: useEffect Hook Running Twice in Client
  • Fixing ‘self’ is not defined error in Next.js when importing client-side libraries
  • How to Dockerize a Next.js App for Production
  • How to set up Next.js with Docker Composer and Nginx
  • Solving Next.js CORS Issues: A Comprehensive Guide
  • Fixing Next.js Hydration Mismatch Error in Simple Ways
  • Next.js Error: Cannot use import statement outside a module
  • Next.js: How to Access Files in the Public Folder
  • Fixing Next.js Import CSS Error: A Simple Guide
  • Fixing LocalStorage Not Defined Error in Next.js
  • Fixing Next.js Error: No HTTP Methods Exported
  • Fixing Next.js Error: Only Absolute URLs Are Supported