mantinedev/next-app-template

Mantine + Next.js app router template (7.0+)

Mantine Next.js template

This is a template for Next.js app router + Mantine. If you want to use pages router instead, see next-pages-template.

Features

This template comes with the following features:

• PostCSS with mantine-postcss-preset
• TypeScript
• Storybook
• Jest setup with React Testing Library
• ESLint setup with eslint-config-mantine

npm scripts

Build and dev scripts

• dev – start dev server
• build – bundle application for production
• analyze – analyzes application bundle with @next/bundle-analyzer

Testing scripts

• typecheck – checks TypeScript types
• lint – runs ESLint
• prettier:check – checks files with Prettier
• jest – runs jest tests
• jest:watch – starts jest watch
• test – runs jest, prettier:check, lint and typecheck scripts

Other scripts

• storybook – starts storybook dev server
• storybook:build – build production storybook bundle to storybook-static
• prettier:write – formats all files with Prettier

next-app-template's Issues

Storybook is crashing with npm install

With npm 9.8.1 and node v18.18.0 (but same thing with npm 10.1.0 and node v20.7.0)

I can open Storybook (with Mac / Chrome) but as soon as I click somewhere in the page, it becomes unresponsive and crash.

chunk-NBCGHFLK.js:2 

Warning: Maximum update depth exceeded. 

This can happen when a component calls setState inside useEffect, 
but useEffect either doesn't have a dependency array, 
or one of the dependencies changes on every render.

    in Unknown (created by Downshift2)
    in div
    in Unknown (created by Downshift2)
    in div (created by Styled(div))
    in Styled(div) (created by Downshift2)
    in Downshift2
    in Unknown
    in div (created by Styled(div))
    in Styled(div) (created by Spaced)
    in Spaced (created by Styled(Spaced))
    in Styled(Spaced)
    in div (created by ForwardRef(F2))
    in div (created by ForwardRef(F2))
    in ForwardRef(F2) (created by Scroller)
    in Suspense (created by Scroller)
    in Scroller (created by Styled(Scroller))
    in Styled(Scroller)
    in nav (created by Styled(nav))
    in Styled(nav)
    in Unknown
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer
    in Unknown (created by Layout)
    in div (created by Styled(div))
    in Styled(div) (created by Sidebar)
    in Sidebar (created by Layout)
    in Layout (created by WithTheme(Layout))
    in WithTheme(Layout)
    in Unknown (created by App)
    in div (created by Styled(div))
    in Styled(div) (created by App)
    in App
    in ThemeProvider
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Manager)
    in EffectOnMount (created by Manager)
    in Manager (created by QueryLocation)
    in QueryLocation (created by Main2)
    in Main2 (created by Root4)
    in Router (created by LocationProvider)
    in LocationProvider (created by Root4)
    in HelmetProvider (created by Root4)
    in Root4

feat: add notification demo

Can you add such a sample, thx.

https://mantine.dev/others/notifications/

Failed to run Example Test

The This not run because the method doesn't exist on the jest Object :

  expect(screen.getByText('this guide')).toHaveAttribute(
      'href',
      'https://mantine.dev/guides/next/'
    );

need to be :

 expect(screen.getByText('this guide')).toHaveProperty(
      'href',
      'https://mantine.dev/guides/next/'
    );

Nextjs turbo mode not working

Hi dev team,

I have just pulled this template
I installed packages using pnpm i
I ran this project using pnpm dev --turbo, the localhost:3000 can access but the style was broken
Can you guide me on how to fix this?
Thanks

Error providing theme object in Provider

Hello,
I'm trying to provide a theme object in my Mantine Provider but I guess with RSC it's not allowed because my Layout is considered as a server component.

import "@mantine/core/styles.css";
import React from "react";
import { ColorSchemeScript, MantineProvider } from "@mantine/core";
import { theme } from "@/theme";

export const metadata = {
  title: "Mantine Next.js template",
  description: "I am using Mantine with Next.js!",
};

export default function RootLayout({ children }: { children: any }) {
  return (
    <html lang="en">
      <head>
        <ColorSchemeScript />
        <link rel="shortcut icon" href="/favicon.svg" />
      </head>
      <body>
        <MantineProvider theme={theme}>{children}</MantineProvider>
      </body>
    </html>
  );
}

Here is the error message I get :
Error: Attempted to call createTheme() from the server but createTheme is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.

I'm quite new with both RSC and mantine. Could you explain what could be the good way to set my theme ? Thanks

npm ERR! ERESOLVE unable to resolve dependency tree

Facing issue while installing mantine libraries.

npm i @mantine/dates
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @mantine/[email protected]
npm ERR! node_modules/@mantine/core
npm ERR! @mantine/core@"7.0.0-beta.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @mantine/core@"6.0.20" from @mantine/[email protected]
npm ERR! node_modules/@mantine/dates
npm ERR! @mantine/dates@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\ASUS\AppData\Local\npm-cache_logs\2023-09-06T07_00_24_139Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: C:\Users\ASUS\AppData\Local\npm-cache_logs\2023-09-06T07_00_24_139Z-debug-0.log

Main branch must be 'main' not 'master'

When we clone the repo, it comes with a master branch. As per the new git standards, it must be main.
One can make changes after cloning it, I believe its good to have 'main' in the cloned repo itself.

Reference:
The default branch name in Git was changed from "master" to "main" in order to promote a more inclusive language.

useDisclosure() causes runtime error

I'm working on an app started from this template and when I added useDisclosure() to it, I started getting this error.

Unhandled Runtime Error
Error: (0 , _barrel_optimize_names_useDisclosure_mantine_hooks__WEBPACK_IMPORTED_MODULE_1__.useDisclosure) is not a function or its return value is not iterable

After a lot of web searches I wasn't able to resolve it, so decided to try your current template and the same problem happens. I'm using pnpm but don't think that should matter.

Change the beginning of Welcome.tsx to this and run.

import { Title, Text, Anchor } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import classes from './Welcome.module.css';

export function Welcome() {
  const [opened, handlers] = useDisclosure(false, {
    onOpen: () => console.log('Opened'),
    onClose: () => console.log('Closed'),
  });

  console.log(opened);
  handlers.open();
  console.log(opened);

  return (
...

I updated Mantine and NextJS to the latest versions and still have the problem.

Can't add font to fontFamily in global theme

I've been trying to add a specific font Jura, sans-serif to the global theme theme.ts.

I followed this guide https://mantine.dev/theming/typography/ and it doesn't work with Jura, sans-serif from Google Fonts. It does correctly change the font toVerdana, sans-serif like in the example.

How do I get this to work:

'use client';

import { createTheme } from '@mantine/core';

export const theme = createTheme({
  /* Put your mantine theme override here */
  fontFamily: 'Jura, sans-serif',
});

Also, how do I get select components to have different fonts outside of those that are set in theme.ts? There doesn't seem to be an example having the <Button /> have one font then the <Input /> adopt a different font again.

Only thing I can think of is not having Mantine theme.ts manage the fonts and do the NextJS method of font management. Is that possible?

Error: Hydration failed because the initial UI does not match what was rendered on the server.

I was only able to reproduce this issue using cypress,

(uncaught exception)Error: Hydration failed because the initial UI does not match what was rendered on the server.
(uncaught exception)Error: Hydration failed because the initial UI does not match what was rendered on the server.
(uncaught exception)Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <script> in <head>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error
(uncaught exception)Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <script> in <head>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error
(uncaught exception)Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

Moving <ColorSchemeScript /> inside the body tag solves the issue but I have no idea if that is the correct solution.
Removing the const metadata solves the issue too but not ideal.

https://nextjs.org/docs/app/api-reference/components/script
https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#step-3-migrating-nexthead

If needed I can try to create a basic cypress test to show the issue but it will take some time.

Attempting to use hooks causes "is not a function" error

Not sure if I'm doing something wrong but the following results in an error:

1. Download latest template.
2. Install dependencies with npm i.
3. Start dev server with npm run dev, http://localhost:3000/ loads okay so far.
4. Attempting to use any hook causes the error. For example, editing next-app-template-master/app/page.tsx to the following will cause the error:

import { Welcome } from '../components/Welcome/Welcome';
import { ColorSchemeToggle } from '../components/ColorSchemeToggle/ColorSchemeToggle';
import { useDisclosure } from '@mantine/hooks';   // Added this.

export default function HomePage() {
  const [opened, handlers] = useDisclosure(false);  // Added this, causes the error.

  return (
    <>
      <Welcome />
      <ColorSchemeToggle />
    </>
  );
}

The full text is the following: Unhandled Runtime Error Error: (0 , _barrel_optimize_names_useDisclosure_mantine_hooks__WEBPACK_IMPORTED_MODULE_3__.useDisclosure) is not a function or its return value is not iterable

I've tried several hooks and they all result in the same issue. The output of console.log(useDisclosure) is {} for some reason.

I might be doing something wrong but couldn't find much info related to this error. Didn't see any documentation about getting hooks to work properly but maybe I missed it.

My dev environment is the following:

• Windows 10 v22H2
• node v18.16.1
• npm 9.5.1

assetPrefix Error In build Process And dev Process

Hi, when i set assetPrefix to '.' no problem when build with scripts and styles And have error with next/font that are saying assetPrefix must start with leading slash
when i set assetPrefix to '/' when start next with yarn dev no problem occurred but when build project no styles and scripts loaded ,how handle this problem

Permission to contribute

Hello @rtivital 👋🏻

I hope you're well. I'm Pedro Santos and I would like to contribute through PRs.

Currently, I don't have the necessary permissions.

Could you grant me access to submit PRs? I'm eager to contribute and willing to follow any guidelines you have.

By the way, not only I, but the rest of the community?

The welcome message is Wrong !

What page has the issue?

Components>Welcome>Welcome.tsx

What is the issue?

The message saying : To get started edit index.tsx doesn't refer to any file instead it must be page.tsx

How to fix the issue?

• Navigate into: Components>Welcome>Welcome.tsx
• Next to the anchor tag: Edit the text from index.tsx to page.tsx

Am i going to solve this?

Yes and very soon

Unable to utilize Drawer component within Storybook but works outside Storybook

Details

I am able to use the Drawer component in my application, but launching in Storybook does not work. Cloning this repository and adding in simple code produces the same error.

• OS: Ubuntu
• Node: 21.7.1
• Everything Else: from the repo

Steps to Reproduce

1. Clone the next-app-template repo and checkout the master branch
2. Run the installs: yarn install
3. Launch Storybook via Yarn: yarn run storybook
4. Add a MyDrawer component (file details below)
5. Add a MyDrawer story (file details below)
6. Attempt to load it in the browser

File Details: components/MyDrawer/MyDrawer.tsx

import { useDisclosure } from "@mantine/hooks";
import { Drawer, Button } from '@mantine/core';

export function MyDrawer() {
  const [opened, { open, close }] = useDisclosure(false);

  return (
    <>
      <Drawer opened={opened} onClose={close} title='My Drawer'>
        <div>This would be content.</div>
      </Drawer>
    
      <Button onClick={open}>Open Drawer</Button>
    </>
  );
}

File Details: components/MyDrawer/MyDrawer.story.tsx

import { MyDrawer } from './MyDrawer';

export default {
  title: 'MyDrawer',
};

export const Usage = () => <MyDrawer />;

Adding components to layout.tsx has unexpected css compilation

When adding a component Shell to layout.tsx layout.css is compiled allowing mantine styling to override component styles e.g.,

.Shell-root {}
.mantine-styles {}

If I add the component to a page, then layout.css compiles with the expected specificity. Is this a bug or is there an approach that avoids this issue?