how to use mantine in next.js 13

How to Use Mantine in Next.JS 13

updated 20/01/23 By frontendshape

In this section we will see how to use mantine ui in nextjs 13. install mantine in next js 13 is very simple you need to install nextjs project use mantine ui nextjs project add _document.tsx and _app.tsx.


Create Next.JS 13 App

Chose below command to create next js app.

npx create-next[email protected]
# or
yarn create next-app
# or
npx create-next[email protected] --typescript
# or
yarn create next-app --typescript

Install Mantine in Next.JS

Run below command to install mantine in nextjs

npm install @mantine/core @mantine/hooks @mantine/next @emotion/server @emotion/react
# or
yarn add @mantine/core @mantine/hooks @mantine/next @emotion/server @emotion/react


Create pages/_document.tsx file or add below code pages/_document.tsx:

import { createGetInitialProps } from '@mantine/next';
import Document, { Head, Html, Main, NextScript } from 'next/document';

const getInitialProps = createGetInitialProps();

export default class _Document extends Document {
 static getInitialProps = getInitialProps;

 render() {
  return (
   <Html>
    <Head />
    <body>
     <Main />
     <NextScript />
    </body>
   </Html>
  );
 }
}


Next Add MantineProvider to pages/_app.tsx:

import { AppProps } from 'next/app';
import Head from 'next/head';
import { MantineProvider } from '@mantine/core';

export default function App(props: AppProps) {
 const { Component, pageProps } = props;

 return (
  <>
   <Head>
    <title>Page title</title>
    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
   </Head>

   <MantineProvider
    withGlobalStyles
    withNormalizeCSS
    theme={{
     /** Put your mantine theme override here */
     colorScheme: 'light',
    }}
   >
    <Component {...pageProps} />
   </MantineProvider>
  </>
 );
}


Now test mantine ui code in nextjs.

index.tsx

import Head from "next/head";
import { Blockquote, Button, Container } from "@mantine/core";


export default function Home() {
  return (
    <>
      <Head>
        <title>Next App With Mantine UI</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>
      <main>
        <Container size="xs" px="xs">
          <Blockquote cite="– Forrest Gump">
            Life is like an npm install – you never know what you are going to
            get.
          </Blockquote>
          <Button>Read More</Button>
        </Container>
      </main>
    </>
  );
}
mantine ui with next js 13

mantine ui with next js 13


Enter Your Search Query