Make AppShell show up on every page, Next JS? | Mantine | Page 1

burnt stirrup Dec 27, 2022, 6:30 AM

#

Currently only shows up on the '/'. I got the navigation to work but the AppShell does not show up on subsequent pages.

frosty shard Dec 27, 2022, 6:35 AM

#

burnt stirrup Currently only shows up on the '/'. I got the navigation to work but the AppShel...

Add it to _app

burnt stirrup Dec 27, 2022, 6:36 AM

#

can you send me an example? I've tried this..

#


export default function App({ Component, pageProps }: AppProps) {
  const [colorScheme, setColorScheme] = useState<ColorScheme>("dark");
  const toggleColorScheme = (value?: ColorScheme) =>
    setColorScheme(value || (colorScheme === "light" ? "dark" : "dark"));

  return (
    <ColorSchemeProvider
      colorScheme={colorScheme}
      toggleColorScheme={toggleColorScheme}
    >
      <MantineProvider
        theme={{ colorScheme: "light" }}
        withGlobalStyles
        withNormalizeCSS
      >
        <Paper>
          <AppShellComponent>
            <Component {...pageProps} />
            </AppShellComponent>
        </Paper>
      </MantineProvider>
    </ColorSchemeProvider>
  );
}

#

I think the issue is deeper than this. I added a button into the _app to see if it would work, and it did; it showed up on every page. The issue is AppShell itself.

#

Property 'children' is missing in type '{}' but required in type 'AppShellProps'.ts(2741)

burnt stirrup Dec 27, 2022, 7:26 AM

#

@frosty shard any ideas?

somber tulip Dec 27, 2022, 8:08 AM

#

https://nextjs.org/docs/basic-features/layouts

Basic Features: Layouts | Next.js

Learn how to share components and state between Next.js pages with Layouts.

#

@burnt stirrup it’s better for you to provide a reproducible sandbox

#

We have 0 context what AppShellComponent is, so cannot help you. A Code Sandbox is at least interactive and can help folks debug your issues.

#

(Read the #🥦-rules to find the Code Sandbox)

primal shell Dec 27, 2022, 10:42 PM

#

I haven't used NextJS13. I use Blitz myself. But you should put the appshell in the layout and then get index to consume the layout and then it's on every single page.

burnt stirrup Dec 28, 2022, 3:00 PM

#

I tried a bunch of different solutions. Nothing worked. So I just changed to something more proven to work with Next. All good. Thanks guys.

somber tulip Dec 28, 2022, 9:47 PM

#

I think Mantine is pretty proven. What version of Next are you using?

#

Are you using the NextJS Mantine 13 template if you’re using NextJS 13?

burnt stirrup Dec 29, 2022, 3:15 AM

#

Well, it's a bit hard to find solutions to common problems. I'd say that isn't the hallmark of something proven in my opinion. It's beautiful and the components are great, don't get me wrong.

Next.js v13.1.1

somber tulip Dec 29, 2022, 5:00 AM

#

You’re having a React problem, not a Mantine problem.

You’re also using Next 13.1.1 which has some features in beta still (which is in fact, not proven 😂).

Particular if you’re using the app directory, the NextJS docs explicitly recommend not using that in production at the moment. Your example doesn’t have enough context.

#

Are you using the NextJS Mantine template? If you can create a minimally reproducible example using the Code Sandbox, folks would be able to assist so you don’t need to have wasted hours trying to implement Mantine and then not using it.

#Make AppShell show up on every page, Next JS?