Building Next.js apps with Materio
Tags: nextjs, webdev
Published: 2023-08-22 17:47:11

**Written by [Suraj Vishwakarma](https://blog.logrocket.com/author/suraj-vishwakarma/)✏️**

Building a website from scratch is not always the most suitable option, due to time and resource constraints. It also makes less sense to build sites from scratch when there already exist so many that have been coded by other developers. This is where templates and libraries come in handy. These tools allow you to simplify your work while still producing great projects. 

Using templates is beneficial because the templates have already been tested and debugged by other developers, which will increase the quality of your code. Templates are also made with flexibility in mind. They can be used and changed by other developers without causing complications. In addition to code, templates provide developers with customization options that fit the needs of their projects. 

In this article, we’ll explore one such template for web applications: Materio. Materio is a Next.js and React admin template based on MUI. In this article, we’ll cover the following:

*   [What is Materio?](#what-materio)
*   [Installing Materio](#installing-materio)
*   [Customizing your Next.js app](#customizing-next-js-app)
*   [Styling with Materio](#styling-materio)
    *   [Changing the color palette of the admin panel](#changing-color-palette-admin-panel)
    *   [Making changes to typography](#making-changes-typography)

## What is Materio? <a name="what-materio">

[Materio](https://github.com/themeselection/materio-mui-react-nextjs-admin-template-free) is an admin template based on Material UI. Its UI is developer-friendly, rich with features, and highly customizable. It is available in JavaScript and TypeScript versions, and comes with features like:

*   Vertical and horizontal menus
*   3 niche dashboards
*   Different form layouts
*   Different cards layout
*   The Quick Search component
*   Tables and grids
*   Chart libraries
*   A fully responsive layout
*   An organized folder structure
*   Clean, well-documented code

Materio offers a free and premium tier. The free version is basic but works for most of applications that require an admin panel. The premium version provides more features, including a greater variety of charts, cards, layouts, and other components. Learn [what each tier has to offer here](https://github.com/themeselection/materio-mui-react-nextjs-admin-template-free#whats-in-premium-version-).

## Installing Materio <a name="installing-materio">

Installing Materio is simple. The first step is to select the [Materio template](https://themeselection.com/item/materio-free-mui-react-nextjs-admin-template/) from the ThemeSelection website. On the website, you will find two options for downloading the theme: **Free Download** and **Check Pro Version**. For now, click on **Free** **Download**. You will need to sign in to the ThemeSelection site to download content from their website. 

The downloaded file will be a `.zip` file. Extract it to your desired location. In it, you will find other files, including LICENSE, README.md, and an HTML file that will redirect you to the Materio documentation. You will also find the JavaScript and TypeScript versions of the Materio template: ![Materio Gzip Template File](http://blog.logrocket.com/wp-content/uploads/2023/08/template-gzip-file.png) Open the version of the directory that best suits you. In the directory, you can install the project dependencies with your favorite package manager. Materio recommends that developers use Yarn:

```yarn
yarn install
```

After installing the dependencies, you can run the template with the following command:

```yarn
yarn run dev
```

This will start the Next.js application at `localhost:3000`. Here is the landing page of the admin panel: ![Materio Admin Panel](http://blog.logrocket.com/wp-content/uploads/2023/08/materio-admin-panel.png)

## Customizing your Next.js app <a name="customizing-next-js-app">

In the `src→views` directory, you will find different components to customize your Next.js application, such as cards, dashboards, form layouts, tables, and more. Let’s customize one of the components to display dynamic data. We’re going to customize the `StatisticsCard` component to display GitHub repository stats. 

First, let’s fetch data in the `index.js` page. We need to import `useState` and `useEffect` from React:

```javascript
import { useState, useEffect } from 'react'
```

Then, in the `Dashboard` component, create a `useEffect` Hook. We are fetching the data in this hook:

```javascript
useEffect(() => {
  const fetchAndSetData = async () => {
    const res = await fetch(
      "https://api.github.com/repos/surajondev/awesome-web3.0", // replace URL with GH repo that you want stats for
    );
    const datajson = await res.json();
    setData(datajson);
  };
  fetchAndSetData();
}, []);
```

Now, we will set the data, which is defined with the `useEffect` Hook above:

```javascript
const [data, setData] = useState() 
```

After this, we need to set some props for `StatisticsCard`:

```javascript
<StatisticsCard
  stars={data.stargazers_count}
  forks={data.forks_count}
  issues={data.open_issues}
/>;
```

In the `src→pages→dashboard` directory, you will see the `StatisticsCard.js` file, where you will find the `salesData` array, which stores the data. You can change the name of the array to better reflect the data; I have changed it to `data`. With a few changes to the properties, we can customize the data array to better suit how we want to display our GitHub repo data:

```javascript
const data = [
  {
    stats: '0',
    title: 'Stars',
    color: 'primary',
    icon: <TrendingUp sx={{ fontSize: '1.75rem' }} />
  },
  {
    stats: '0',
    title: 'Forks',
    color: 'success',
    icon: <AccountOutline sx={{ fontSize: '1.75rem' }} />
  },
  {
    stats: '0',
    color: 'warning',
    title: 'Issues',
    icon: <CellphoneLink sx={{ fontSize: '1.75rem' }} />
  }
]
```

Now, we need to change this data according to the props. Here are stars, forks, and issues as props. We are assigning these values to the data array:

```javascript
const StatisticsCard = ({ stars, forks, issues }) => {     // extracting the props
  data[0].stats = stars
  data[1].stats = forks
  data[2].stats = issues
```

After changing the data, we can easily see the changes in the dashboard: ![Materio Statistics Card Dashboard](http://blog.logrocket.com/wp-content/uploads/2023/08/materio-statistics-card.png)

## Styling with Materio <a name="styling-materio">

The Materio template uses [MUI](https://mui.com/) as the CSS framework for adding styles. You can also comfortably customize the Materio theme for the following:

*   Adding breakpoints to customize the responsiveness
*   Overriding components, such as alerts, accordions, avatars, etc.
*   Changing the website’s color palette
*   Adding shadows
*   Changing the spacing of components
*   Changing the app’s typography

In the following sections, we will review how to customize our app’s color palette and typography.

### Changing the color palette of the admin panel <a name="changing-color-palette-admin-panel">

In the `src→@core→theme` directory, you will find the theme configuration for all the components we mentioned earlier. There, you will find the `palette` directory, which has the `index.js` file that contains information related to the color palette. 

In the `index.js` file, you will find the `return` section, which contains all the colors. Here, you can make changes to reflect your desired color palette. We'll change some colors to reflect a different theme. 

We can change the main colors to a light or dark theme at the top of the file:

```javascript
// for customizing the main colors
const lightColor = '128, 0, 128' // colors in RGB
const darkColor = '231, 227, 252' // colors in RGB
const mainColor = mode === 'light' ? lightColor : darkColor
```

After that, you can change the `primaryGradient` function that returns primary gradient colors:

```javascript
// for customizing gradient
const primaryGradient = () => {
    if (themeColor === 'primary') {
      return '#800080'
    } else if (themeColor === 'secondary') {
      return '#FF5733'
    } else if (themeColor === 'success') {
      return '#00FF00'
    } else if (themeColor === 'error') {
      return '#FF0000'
    } else if (themeColor === 'warning') {
      return '#FFA500'
    } else {
      return '#007FFF'
    }
  }
```

Then, in the `return` section, you will find color variants such as primary, secondary, success, etc. Each variant has three main properties: light, dark, and main. The main color will be applied as default. With the change in theme, light and dark colors will be applied:

```javascript
primary: {
  light: '#800080',
  main: '#800080',
  dark: '#804BDF',
  contrastText: '#FFF'
},
```

The image below demonstrates a comparison of the Materio theme before and after customizing the color palette: ![Customizing Materio Color Palette](http://blog.logrocket.com/wp-content/uploads/2023/08/customizing-materio-color-palette.png)

### Making changes to typography <a name="making-changes-typography">

Next, we can change the project’s typography. In the theme directory, you will find the typography directory. When you open the `index.js` file, you will be presented with the fourteen typography variations that are available in Materio. Here are a few of them:

```javascript
    h1: {
      fontWeight: 500,
      letterSpacing: '-1.5px',
      color: theme.palette.text.primary
    },
    h2: {
      fontWeight: 500,
      letterSpacing: '-0.5px',
      color: theme.palette.text.primary
    },
    h3: {
      fontWeight: 500,
      letterSpacing: 0,
      color: theme.palette.text.primary
    },
```

You can customize each of the variations to your style — you just have to provide the CSS properties with their value. Here, you can add the font family, too. Let’s customize the `h1` tag:

```javascript
h1: {
  fontWeight: 700,
  letterSpacing: '2px',
  fontFamily: 'Inter',
  lineHeight: '10px',
  color: theme.palette.text.primary
},
```

You can also extend the typography by adding more variants:

```javascript
inputErrorText: {
  fontFamily: 'Inter',
  fontSize: '14px',
  fontStyle: 'normal',
  fontWeight: '400',
  lineHeight: 'normal',
  color: 'red'
}
```

Now, when you need to add the variant in a component, you can use the syntax below:

```javascript
import Typography from '@mui/material/Typography' // importing Typography from MUI
// use variant tag to add the name of the typography variant
<Typography variant='inputErrorText'>
    There is an error.
</Typography>
```

After successful integration, you can view it on the webpage: ![Editing Materio Typography](http://blog.logrocket.com/wp-content/uploads/2023/08/editing-materio-typography.png) This is how you can successfully customize typography in the Materio UI. Because all the themes are based on [MUI](https://mui.com/), having basic knowledge about this framework will help you when customizing. Otherwise, you can easily learn while working, because MUI is intuitive to learn.

## Conclusion

Materio offers a plethora of features, including vertical and horizontal menus, niche dashboards, form layouts, different card layouts, search components, tables, charts, and more. In this tutorial, we learned how easy it is to install Materio, how to populate a component with custom data, and how to style our app using MUI. 

For more control and customization, consider using Materio to provide authentication and login pages to your project’s admin panel. 

Thanks for reading!

---

## [LogRocket](https://lp.logrocket.com/blg/nextjs-signup): Full visibility into production Next.js apps

Debugging Next applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, [try LogRocket](https://lp.logrocket.com/blg/nextjs-signup).

[![LogRocket Signup](https://blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png)](https://lp.logrocket.com/blg/nextjs-signup)

[LogRocket](https://lp.logrocket.com/blg/nextjs-signup) is like a DVR for web and mobile apps, recording literally everything that happens on your Next.js app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your Next.js apps — [start monitoring for free](https://lp.logrocket.com/blg/nextjs-signup).