Material UI - Next.js Pages Router example in TypeScript

How to use

Download the example or clone the repo:

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

Install it and run:

npm install
npm run dev

or:

The idea behind the example

Note: This example is set up to use the Next.js Pages Router. As of Next.js 13.4, the newer App Router pattern is stable. We recommend starting new projects with the Material UI with Next.js (App Router) example unless you need (or prefer) the Pages Router.

The project uses Next.js, which is a framework for server-rendered React apps. It includes @mui/material and its peer dependencies, including Emotion, the default style engine in Material UI v5. If you prefer, you can use styled-components instead.

The link component

The example folder provides an adapter for the use of Next.js's Link component with Material UI. More information in the documentation.

What's next?

You now have a working example project. You can head back to the documentation and continue by browsing the templates section.