Setting up Material UI for Next.js Project

Installation

1. Setup New `NextJS` Project

npx create-next-app@latest --ts

2. Install packages

npm install @mui/material @emotion/react @emotion/styled @emotion/server @emotion/cache
# or
yarn add @mui/material @emotion/react @emotion/styled @emotion/server @emotion/cache

3. Add emotion cache

Create a new file createEmotionCache.ts and add the following code:

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 const createEmotionCache = () => {
  let insertionPoint

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

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

on your _app.tsx apply CacheProvider

import { createEmotionCache } from './createEmotionCache'
import { CacheProvider } from '@emotion/react'

const clientSideEmotionCache = createEmotionCache()

const MyApp = () => {
  const { Component, pageProps } = props
  return (
    <CacheProvider value={clientSideEmotionCache}>
      <Component {...pageProps} />
    </CacheProvider>
  )
}

export default MyApp

create _document.tsx file under pages/_document.tsx and update _document.tsx with the following code: Follow this Code Configuration _document.tsx

4. Applying `Theme`

Create a new file theme.ts and add the following code:

import { createTheme } from '@mui/material'

const theme = createTheme({
  palette: {
    mode: 'light',
  },
})

update _app.tsx and add ThemeProvider

import { createEmotionCache } from './createEmotionCache'
import { CacheProvider } from '@emotion/react'
import { ThemeProvider, CssBaseline } from '@mui/material'
import { theme } from './theme'

const clientSideEmotionCache = createEmotionCache()

const MyApp = () => {
  const { Component, pageProps } = props
  return (
    <CacheProvider value={clientSideEmotionCache}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Component {...pageProps} />
      </ThemeProvider>
    </CacheProvider>
  )
}

export default MyApp

5. Adding font

update your document.tsx head content with the following script

<Head>
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
    rel="stylesheet"
  />
</Head>

configure your font in your theme.ts

const theme = createTheme({
  typography: {
    palette: {
      mode: 'light',
    },
    fontFamily: ['"Inter"', 'sans-serif'].join(','),
  },
})

Usage

In pages/index.tsx add the following code:

import { Button } from '@mui/material'

const Home = () => {
  return <Button variant="standard">Hello World</Button>
}

Some issue that may encountered

https://stackoverflow.com/questions/71706064/react-18-hydration-failed-because-the-initial-ui-does-not-match-what-was-render