Classroom workshop

Based on: Material UI - Next.js Pages Router example in TypeScript

How to use

Install it and run:

yarn install
yarn dev

Enter local environment:

http://localhost:3000/

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 v6. 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.