How To Setup Material Grid In Next JS With Material UI/MUI Component

Introduction

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

A fast and extendable react data table and react data grid. It's a feature-rich component available in MIT or Commercial versions.

Preconditions

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

We cover the below things,

Create Next application
Installation of Material UI Components of Grid
How to Apply Material UI components of Grid from in Next js

Step 1

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

--------------------------  
Note : in Step 1 when you applying the first key you should awar that the application name will not contain any special leter or captial letter

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,
npm i @mui/x-data-grid

Create the files according to the below image,

Step 3

Add the below code in the MaterialGridCompo.js

import * as React from 'react';
import Box from '@mui/material/Box';
import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid';

const columns = [
	{ field: 'id', headerName: 'ID', width: 90 },
	{
		field: 'firstName',
		headerName: 'First name',
		width: 150,
		editable: true,
	},
	{
		field: 'lastName',
		headerName: 'Last name',
		width: 150,
		editable: true,
	},
	{
		field: 'age',
		headerName: 'Age',
		type: 'number',
		width: 110,
		editable: true,
	},
	{
		field: 'fullName',
		headerName: 'Full name',
		description: 'This column has a value getter and is not sortable.',
		sortable: false,
		width: 160,
		valueGetter: (params) =>
			`${params.row.firstName || ''} ${params.row.lastName || ''}`,
	},
];

const rows = [
	{ id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
	{ id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
	{ id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
	{ id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
	{ id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
	{ id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
	{ id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
	{ id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
	{ id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];

const MaterialGridCompo = () => {
	return (
		<div>
			<Box sx={{ height: 500, width: 900 }}>
				<DataGrid
					rows={rows}
					columns={columns}
					pageSize={5}
					rowsPerPageOptions={[5]}
					checkboxSelection
					disableSelectionOnClick
					experimentalFeatures={{ newEditingApi: true }}
				/>
			</Box>
		</div>
	)
}
export default MaterialGridCompo

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 MaterialGridCompo from './MaterialGridCompo'

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}>
		  <MaterialGridCompo />
		</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 how to add Grid MUI component.