Adding Material UI to Next.js TypeScript

Arshad Ali Soomro — Mon, 03 Apr 2023 08:19:26 +0000

Mui 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

DEV Community: Arshad Ali Soomro

Adding Material UI to Next.js TypeScript

Install Dependencies

Create a createEmotionCache.ts File

Create a theme.ts File