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:
npm install
npm run dev
