Adding Material UI to Next.js TypeScript
Tags: javascript, nextjs, react, beginners
Published: 2023-04-03 08:19:26

[Mui](https://mui.com/) is a popular UI component library for React that provides pre-made components such as buttons, forms, and modals. In this article, we will be discussing how to add Mui v5 to Next.js using TypeScript.

## Install Dependencies
First, you need to install the necessary dependencies. You can do this by running the following command in your VS Code terminal:

```
yarn add @mui/material @mui/icons-material @emotion/react @emotion/server @emotion/styled
```

## Create a `createEmotionCache.ts` File
The next step is to create a `createEmotionCache.ts` file in your src folder. This is a utility function provided by Material-UI (mui) to create a cache for Emotion, which is a CSS-in-JS library used by Material-UI (mui) for styling. The cache is used to store generated class names and prevent duplicate style declarations.

Here's a required implementation of `createEmotionCache.ts`:

```
import createCache from '@emotion/cache';

const isBrowser = typeof document !== 'undefined';

// On the client side, Create a meta tag at the top of the <head> and set it as insertionPoint.
// This assures that MUI styles are loaded first.
// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
export default function createEmotionCache() {
  let insertionPoint;

  if (isBrowser) {
    const emotionInsertionPoint = document.querySelector<HTMLMetaElement>(
      'meta[name="emotion-insertion-point"]',
    );
    insertionPoint = emotionInsertionPoint ?? undefined;
  }

  return createCache({ key: 'mui-style', insertionPoint });
}

```

## Create a `theme.ts` File
The next step is to create a `theme.ts` file in your src folder. This file contains the main theme configuration for your app.

Here's a required implementation of `theme.ts`:

```
import { Roboto } from 'next/font/google';
import { createTheme } from '@mui/material/styles';
import { red } from '@mui/material/colors';

export const roboto = Roboto({
  weight: ['300', '400', '500', '700'],
  subsets: ['latin'],
  display: 'swap',
  fallback: ['Helvetica', 'Arial', 'sans-serif'],
});

// Create a theme instance.
const theme = createTheme({
  palette: {
    primary: {
      main: '#556cd6',
    },
    secondary: {
      main: '#19857b',
    },
    error: {
      main: red.A400,
    },
  },
  typography: {
    fontFamily: roboto.style.fontFamily,
  },
});

export default theme;
```

## Edit `_app.tsx` File
Next, you need to edit `_app.tsx` file in the projects src/pages folder. This file is used to wrap your app in a higher-order component (HOC) that provides global styles and theme settings.

Here's a required implementation of `_app.tsx`:

```
import * as React from 'react';
import Head from 'next/head';
import { AppProps } from 'next/app';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { CacheProvider, EmotionCache } from '@emotion/react';
import createEmotionCache from '@/createEmotionCache';
import theme from '@/theme';

// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();

export interface EmployeeLeaveManagerProps extends AppProps {
  emotionCache?: EmotionCache;
}

export default function EmployeeLeaveManagerApp(props: EmployeeLeaveManagerProps) {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
  return (
    <CacheProvider value={emotionCache}>
      <Head>
        <meta name="viewport" content="initial-scale=1, width=device-width" />
      </Head>
      <ThemeProvider theme={theme}>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <Component {...pageProps} />
      </ThemeProvider>
    </CacheProvider>
  );
}

```

## Edit `_document.tsx` File
In Next.js, the `_document.tsx` file is a special file used for server-side rendering (SSR) and to override the default `Document` component provided by Next.js.

The `Document` component in Next.js is responsible for rendering the initial HTML document for the app, including the `<html>`, `<head>`, and `<body>` tags. It is used during server-side rendering to generate the HTML that is sent to the client.

By default, Next.js provides a `Document` component that renders a minimal HTML document with some Next.js specific scripts and styles. However, in some cases, you may want to customize the HTML document, for example, by adding custom scripts, styles, or meta tags.

Here's a required implementation of `_document.tsx`:

```
import * as React from 'react';
import Document, {
  Html,
  Head,
  Main,
  NextScript,
  DocumentProps,
  DocumentContext,
} from 'next/document';
import createEmotionServer from '@emotion/server/create-instance';
import { AppType } from 'next/app';
import { EmployeeLeaveManagerProps } from './_app';
import theme, { roboto } from '@/theme';
import createEmotionCache from '@/createEmotionCache';

interface EmployeeLeaveManagerDocumentProps extends DocumentProps {
  emotionStyleTags: JSX.Element[];
}

export default function EmployeeLeaveManagerDocument({ emotionStyleTags }: EmployeeLeaveManagerDocumentProps) {
  return (
    <Html lang="en" className={roboto.className}>
      <Head>
        {/* PWA primary color */}
        <meta name="theme-color" content={theme.palette.primary.main} />
        <link rel="shortcut icon" href="/favicon.ico" />
        <meta name="emotion-insertion-point" content="" />
        {emotionStyleTags}
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with static-site generation (SSG).
EmployeeLeaveManagerDocument.getInitialProps = async (ctx: DocumentContext) => {
  // Resolution order
  //
  // On the server:
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. document.getInitialProps
  // 4. app.render
  // 5. page.render
  // 6. document.render
  //
  // On the server with error:
  // 1. document.getInitialProps
  // 2. app.render
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. app.render
  // 4. page.render

  const originalRenderPage = ctx.renderPage;

  // You can consider sharing the same Emotion cache between all the SSR requests to speed up performance.
  // However, be aware that it can have global side effects.
  const cache = createEmotionCache();
  const { extractCriticalToChunks } = createEmotionServer(cache);

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App: React.ComponentType<React.ComponentProps<AppType> & EmployeeLeaveManagerProps>) =>
        function EnhanceApp(props) {
          return <App emotionCache={cache} {...props} />;
        },
    });

  const initialProps = await Document.getInitialProps(ctx);
  // This is important. It prevents Emotion to render invalid HTML.
  // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153
  const emotionStyles = extractCriticalToChunks(initialProps.html);
  const emotionStyleTags = emotionStyles.styles.map((style) => (
    <style
      data-emotion={`${style.key} ${style.ids.join(' ')}`}
      key={style.key}
      // eslint-disable-next-line react/no-danger
      dangerouslySetInnerHTML={{ __html: style.css }}
    />
  ));

  return {
    ...initialProps,
    emotionStyleTags,
  };
};

```

## Import Mui Components
Now that you have set up your custom required files, you can start importing Mui components into your pages or other components. For example mui `Button`:

```
import Head from 'next/head'
import Box from '@mui/material/Box'
import Button from '@mui/material/Button'

export default function Home() {
  return (
    <>
      <Head>
        <title>Employee Leave Manager App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Box>
        <Button variant="contained">
          MUI Button
        </Button>
      </Box>
    </>
  )
}

```

## Conclusion
Adding MUI to your Next.js TypeScript project can be a powerful way to quickly add pre-made UI components and styles. By following the steps in this article, you should now have a good foundation for integrating MUI into your app.

For reference visit https://github.com/mui/material-ui/tree/master/examples/material-next-ts