45 lines
2.2 KiB
Markdown
45 lines
2.2 KiB
Markdown
|
# Material UI and Next.js example with @mui/styles (in TypeScript)
|
|||
|
|
|
|||
|
|
## How to use
|
|||
|
|
|
|||
|
|
Download the example [or clone the repo](https://github.com/mui/material-ui):
|
|||
|
|
|
|||
|
|
<!-- #target-branch-reference -->
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-ui-nextjs-ts-v4-v5-migration
|
|||
|
|
cd material-ui-nextjs-ts-v4-v5-migration
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Install it and run:
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm install
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
or:
|
|||
|
|
|
|||
|
|
<!-- #target-branch-reference -->
|
|||
|
|
|
|||
|
|
[](https://stackblitz.com/github/mui/material-ui/tree/master/examples/material-ui-nextjs-ts-v4-v5-migration)
|
|||
|
|
|
|||
|
|
[](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/material-ui-nextjs-ts-v4-v5-migration)
|
|||
|
|
|
|||
|
|
## The idea behind the example
|
|||
|
|
|
|||
|
|
The project uses [Next.js](https://github.com/vercel/next.js), which is a framework for server-rendered React apps.
|
|||
|
|
It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI.
|
|||
|
|
If you prefer, you can [use styled-components instead](https://mui.com/material-ui/integrations/interoperability/#styled-components).
|
|||
|
|
|
|||
|
|
It also includes `@mui/styles`, the legacy styling solution that uses JSS as an engine.
|
|||
|
|
It provides all the necessary config for working with both Emotion and JSS for server-side rendering.
|
|||
|
|
The project is intended as a basic starter for migrating your application from v4 to v5, as it lets the JSS style overrides take precedence over the default styles passed to the components by Emotion.
|
|||
|
|
It demonstrates what results after handling v5's breaking changes to the [theme](https://mui.com/material-ui/migration/v5-style-changes/) and [components](https://mui.com/material-ui/migration/v5-component-changes/).
|
|||
|
|
|
|||
|
|
## The Link component
|
|||
|
|
|
|||
|
|
Next.js Pages Router has [a custom Link component](https://nextjs.org/docs/pages/api-reference/components/link).
|
|||
|
|
The example folder provides adapters for usage with Material UI.
|
|||
|
|
You can find more information [in the documentation](https://mui.com/material-ui/integrations/routing/#next-js-pages-router).
|