How To Setup Next JS With Material UI/MUI Component Basic Breadcrumbs

Introduction

Material UI or MUI is a library of UI components that implements Google's Material Design.

Breadcrumbs consist of a list of links that help a user visualize a page's location within the hierarchical structure of a website, and allow navigation up to any of its "ancestors".

Preconditions

• Javascript
• Basic knowledge of NextJS
• Node.js
• V.S. Code,Visual Studio

We cover the below things,

• Create Next application
• Installation of Material UI Components
• How to Apply Material UI components from the official website in NextJS

Step 1

Run the below command to create NextJS application,

npx create-next-app materlapp
cd materlapp
npm i
npm run dev

Step 2

Run the below command  for installing Material UI,

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/material @mui/styled-engine-sc styled-components
npm install @mui/icons-material		
npm i @mui/lab,

Create the files according to the below image,

Step 3

Add the below code in the BasicBreadcrumbs.js,

import * as React from 'react';
import Typography from '@mui/material/Typography';
import Breadcrumbs from '@mui/material/Breadcrumbs';
import Link from '@mui/material/Link';

function handleClick(event) {
    event.preventDefault();
    console.info('You clicked a breadcrumb.');
}
export default function BasicBreadcrumbs() {
    return ( 
		<div role="presentation" onClick={handleClick}>
		  <Breadcrumbs aria-label="breadcrumb">
			<Link underline="hover" color="inherit" href="/">
			  MUI
			</Link>
			<Link
			  underline="hover"
			  color="inherit"
			  href="/material-ui/getting-started/installation/"
			>
			  Core
			</Link>
			<Typography color="text.primary">Breadcrumbs</Typography>
		  </Breadcrumbs>
		</div>
    );
}

Step 4

Add the below code in the index.js,

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import BasicBreadcrumbs from './pages/BasicBreadcrumbs'

export default function Home() {
  return (
	<>
	  <div className={styles.container}>
		<h1 className={styles.title}>
		  Welcome to <a href="https://nextjs.org">Next.js!</a>
		</h1>
		<main className={styles.main}>
		  <BasicBreadcrumbs />
		</main>
		<footer className={styles.footer}>
		  <a
			href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
			target="_blank"
			rel="noopener noreferrer"
		  >
			Powered by{' '}
			<span className={styles.logo}>
			  <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
			</span>
		  </a>
		</footer>
	  </div>
	  <br></br>
	  <br></br>
	  <br></br>
	  <br></br>
	  <br></br>
	</>
  )
}

Step 5

Add the following code in Home.module.css,

.container {
	  padding: 0 2rem;
	}

	.main {
	  min-height: 5vh;
	  padding: 2rem 0;
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	}

	.footer {
	  display: flex;
	  flex: 1;
	  padding: 2rem 0;
	  border-top: 1px solid #eaeaea;
	  justify-content: center;
	  align-items: center;
	}

	.footer a {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  flex-grow: 1;
	}

	.title a {
	  color: #0070f3;
	  text-decoration: none;
	}

	.title a:hover,
	.title a:focus,
	.title a:active {
	  text-decoration: underline;
	}

	.title {
	  margin: 0;
	  line-height: 1.15;
	  font-size: 4rem;
	}

	.title,
	.description {
	  text-align: center;
	}

	.description {
	  margin: 4rem 0;
	  line-height: 1.5;
	  font-size: 1.5rem;
	}

	.code {
	  background: #fafafa;
	  border-radius: 5px;
	  padding: 0.75rem;
	  font-size: 1.1rem;
	  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
		Bitstream Vera Sans Mono, Courier New, monospace;
	}

	.grid {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  flex-wrap: wrap;
	  max-width: 800px;
	}

	.card {
	  margin: 1rem;
	  padding: 1.5rem;
	  text-align: left;
	  color: inherit;
	  text-decoration: none;
	  border: 1px solid #eaeaea;
	  border-radius: 10px;
	  transition: color 0.15s ease, border-color 0.15s ease;
	  max-width: 300px;
	}

	.card:hover,
	.card:focus,
	.card:active {
	  color: #0070f3;
	  border-color: #0070f3;
	}

	.card h2 {
	  margin: 0 0 1rem 0;
	  font-size: 1.5rem;
	}

	.card p {
	  margin: 0;
	  font-size: 1.25rem;
	  line-height: 1.5;
	}

	.logo {
	  height: 1em;
	  margin-left: 0.5rem;
	}

	@media (max-width: 600px) {
	  .grid {
		width: 100%;
		flex-direction: column;
	  }
	}

	@media (prefers-color-scheme: dark) {
	  .card,
	  .footer {
		border-color: #222;
	  }
	  .code {
		background: #111;
	  }
	  .logo img {
		filter: invert(1);
   }
}

Step 6

Add the following code in package.json,

{
  "name": "materlapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
	"dev": "next dev",
	"build": "next build",
	"start": "next start",
	"lint": "next lint"
  },
  "dependencies": {
	"@emotion/react": "^11.10.4",
	"@emotion/styled": "^11.10.4",
	"@mui/icons-material": "^5.10.6",
	"@mui/lab": "^5.0.0-alpha.100",
	"@mui/material": "^5.10.6",
	"@mui/styled-engine-sc": "^5.10.6",
	"@mui/x-data-grid": "^5.17.4",
	"next": "12.3.1",
	"react": "18.2.0",
	"react-dom": "18.2.0",
	"styled-components": "^5.3.5"
  },
  "devDependencies": {
	"eslint": "8.23.1",
	"eslint-config-next": "12.3.1"
  }
}

Step 7

Run the following commands

npm i
npm run dev

Summary

In this article, we learned how to create NextJS project, set Material UI/MUI, and create NextJS Basic Breadcrumbs MUI component.