Next.js Discord

Discord Forum

Recommended layout.tsx for Next.js + Mantine Project

Unanswered
Bigeye scad posted this in #help-forum
Open in Discord
Bigeye scadOP
Hey,

I'm creating a Next.js project using Mantine and the mantinedev/next-app-min-template, with the App Router (app/ directory). I wanted to ask what the recommended structure for layout.tsx is.

I'm using the Header and Footer components from the Mantine UI library and want to make sure I'm placing them correctly. Right now, the Footer isn't applying styles as expected, so I’m wondering what might be going wrong.

I'll include my app/layout.tsx and app/page.tsx files for reference.

Would appreciate any recommendations on best practices for structuring this project with Next.js and Mantine, and any tips or tricks you’ve found helpful.

- Mantine UI Footer: https://ui.mantine.dev/category/footers/
- Mantine UI Header: https://ui.mantine.dev/category/headers/
- https://github.com/mantinedev/next-app-min-template

---

layout.tsx:
import "@mantine/core/styles.css";
import React from "react";
import {
  MantineProvider,
  ColorSchemeScript,
  mantineHtmlProps,
} from "@mantine/core";
import { theme } from "../theme";
import HeaderMenu from "./components/header/HeaderMenu";
import FooterLinks from "./components/footer/FooterLinks";

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" {...mantineHtmlProps}>
      <head>
        <ColorSchemeScript />
        <link rel="shortcut icon" href="/favicon.svg" />
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
        />
      </head>
      <body>
        <MantineProvider theme={theme}>
          <HeaderMenu/>
          {children}
          <FooterLinks/>
          </MantineProvider>
      </body>
    </html>
  );
}


page.tsx:
import HeroTitle from "./components/hero/HeroTitle";

export default function HomePage() {
  return <>
    <HeroTitle />
  </>;
}

1 Reply

@Bigeye scad Hey, I'm creating a Next.js project using Mantine and the mantinedev/next-app-min-template, with the App Router (app/ directory). I wanted to ask what the recommended structure for layout.tsx is. I'm using the Header and Footer components from the Mantine UI library and want to make sure I'm placing them correctly. Right now, the Footer isn't applying styles as expected, so I’m wondering what might be going wrong. I'll include my app/layout.tsx and app/page.tsx files for reference. Would appreciate any recommendations on best practices for structuring this project with Next.js and Mantine, and any tips or tricks you’ve found helpful. - Mantine UI Footer: https://ui.mantine.dev/category/footers/ - Mantine UI Header: https://ui.mantine.dev/category/headers/ - https://github.com/mantinedev/next-app-min-template --- layout.tsx: import "@mantine/core/styles.css"; import React from "react"; import { MantineProvider, ColorSchemeScript, mantineHtmlProps, } from "@mantine/core"; import { theme } from "../theme"; import HeaderMenu from "./components/header/HeaderMenu"; import FooterLinks from "./components/footer/FooterLinks"; 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" {...mantineHtmlProps}> <head> <ColorSchemeScript /> <link rel="shortcut icon" href="/favicon.svg" /> <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no" /> </head> <body> <MantineProvider theme={theme}> <HeaderMenu/> {children} <FooterLinks/> </MantineProvider> </body> </html> ); } page.tsx: import HeroTitle from "./components/hero/HeroTitle"; export default function HomePage() { return <> <HeroTitle /> </>; }
Bigeye scadOP
My folder structure.