How to Use MUI 5 in Next.JS 13

In this section we will see how to use material ui in nextjs 13. Using MUI 5 in nextjs is easily you need just clone or download mui 5 with nextjs repo.

How to Use MUI 5 Next.jS

You can download or clone nextjs with mui 5.

curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/nextjs
cd nextjs

Install and run npm:

npm install
npm run dev

pages/index.js

import * as React from 'react';
import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import ProTip from '../src/ProTip';
import Link from '../src/Link';
import Copyright from '../src/Copyright';

export default function Index() {
  return (
    <Container maxWidth="sm">
      <Box sx={{ my: 4 }}>
        <Typography variant="h4" component="h1" gutterBottom>
          Next.js example
        </Typography>
        <Link href="/about" color="secondary">
          Go to the about page
        </Link>
        <ProTip />
        <Copyright />
      </Box>
    </Container>
  );
}

mui 5 with next 13

MUI 5 Next.js with TypeScript Example

Run below command to use next js with typescript mui 5.

curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/nextjs-with-typescript
cd nextjs-with-typescript

Install and run npm: