#Mantine - NextJS 13

5 messages · Page 1 of 1 (latest)

robust bear
# 
//_document.tsx
// Dependencies
import Document, {DocumentContext, Head, Html, Main, NextScript } from "next/document";
import { ServerStyles, createStylesServer } from '@mantine/next';

// RTL Cache
import { rtlCache } from '@/rtl-cache';

// Styles Server
const stylesServer = createStylesServer(rtlCache);

export default class _Document extends Document {

  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx);

    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          <ServerStyles html={initialProps.html} server={stylesServer} />
        </>
      ),
    };
  }

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

}
# 
//rtl-cache.ts
// Dependencies
import rtlPlugin from 'stylis-plugin-rtl';
import { createEmotionCache } from '@mantine/core';

export const rtlCache = createEmotionCache({
  key: 'mantine-rtl',
  prepend: true,
  stylisPlugins: [rtlPlugin],
});
# 
//_app.tsx
// Dependencies
import React from 'react';
import { AppProps } from 'next/app';
import { Metadata } from 'next';
import Head from 'next/head';
import { MantineProvider } from '@mantine/core';
import { Notifications } from '@mantine/notifications';
import useSWRImmutable from "swr/immutable";
import { SessionProvider } from "next-auth/react";

// RTL Cache
import { rtlCache } from '@/rtl-cache';

// Components
import RouterTransition from '@/src/components/Common/RouterTransition';

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

  return (
    <>
      <Head>
        <link rel="apple-touch-icon" href="/favicon.ico" />
      </Head>

      <div dir="rtl">
        <MantineProvider
          withGlobalStyles
          withNormalizeCSS
          theme={{
            dir: "rtl",
            colorScheme: "dark"
          }}
          emotionCache={rtlCache}
        >
          <Notifications>
            <SessionProvider 
              session={pageProps?.session}
              refetchOnWindowFocus={true}
              refetchInterval={5 * 60}
            >
              <RouterTransition />
              <Component {...pageProps} />
            </SessionProvider>
          </Notifications>
        </MantineProvider>
      </div>
    </>
  );
};
#

It's not loading the component, I'm trying to console.log("Hello World!") in my homepage, however, it's not returning.

robust bear
#

I removed the Notifications provider and it started to work