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-app@latest
# or
yarn create next-app
# or
npx create-next-app@latest --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
