How to Add React Material UI in Next.js App

Last updated on 17 Aug, 2021

React Material UI is a CSS framework using which we can build beautiful website in less time. In order to add React Material UI to a Next.js app, first install the package.

yarn add @material-ui/core

Then, inside a page we can use it like below:

import { Button } from "@material-ui/core";

export default function Home() {
  return <Button color="primary">Hello World</Button>;
}

Here we first import only the Button component from material-ui. Then we use it in our page.

Button is a named import, not a default one. Keep that in mind to save time.

--- ○ ---

Joby Joseph

Web Architect