Usage with Next.js
Mantine is fully compatible with Next.js, follow following guide to setup your application
Get started with template
If you are starting new project you can skip all configuration steps and use Next.js template. To get started follow this link and create new repository. Alternatively you can download or clone repository to get started on your machine.
Adding to existing Next.js project
- Install
@mantine/next
- Create
pages/_document.tsx
file:
- (Optional) Replace your
pages/_app.tsx
with
Create your own getInitialProps
In some cases you would want to have access to getInitialProps
in Next Document,
to do so you will need to setup Mantine ssr styles extraction on your own:
Mantine components with Next Link
You can use polymorphic components (Button, ActionIcon, Anchor, etc.) with Next Link, to do so:
- set
component
prop toa
- wrap it with Link