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

Shilpa Tanwar
2y
4.9k
0
2

Article

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"
  }
}