Next.js Discord

Discord Forum

Layout is not applied to my pages

Answered
Saltwater Crocodile posted this in #help-forum
Open in Discord
Saltwater CrocodileOP
Hi There, I'm currently moving away from GatsbyJS and trying to get my hands dirty with NextJS, but I have some issues regarding the root layout. I have defined a layout.tsx in ./app but none of my pages in ./pages is wrapped in the Layout component?
What am I missing here?
.
├── app
│   ├── api
│   │   └── auth
│   │       └── [auth0]
│   │           └── route.ts
│   ├── components
│   │   └── navigation
│   │       └── navigation.tsx
│   ├── favicon.ico
│   ├── globals.css
│   └── layout.tsx
├── Dockerfile
├── next.config.js
├── next-env.d.ts
├── package.json
├── package-lock.json
├── pages
│   ├── _app.tsx
│   ├── index.tsx
├── postcss.config.js
├── public
│   ├── next.svg
│   └── vercel.svg
├── README.md
├── tailwind.config.ts
└── tsconfig.json

import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import { Navigation } from './components/navigation/navigation'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
      <Navigation/>
        {children}
      </body>
    </html>
  )
}
Answered by American
from what i see cause you still have _app.tsx file it's seem like you are using next with page route,
so the problem should be on your layout component.. because your layout component code was used for root-layout on app route. to define layout on page route u just need to do it like a normal component. 
import { PropsWithChildren } from "react";

const Layout = ({children}:PropsWithChildren) => {
  return (
    <div>
      {children}
    </div>
  );
}

export default Layout;

as for meta data u can use Head component from "next/head
View full answer

4 Replies

American
u use app route or page route version of nextjs?
@American u use app route or page route version of nextjs?
Saltwater CrocodileOP
That is a really good question @American, to which I don't know how to anwser. Is there a way to tell from the settings?

I tried to wrap _app.tsx with <RootLayout>

import React from "react";
import type { AppProps } from "next/app";
import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";
import RootLayout from "@/app/layout";

function MyApp({ Component, pageProps }: AppProps) {
  const [queryClient] = React.useState(() => new QueryClient());
  return (
    <RootLayout>
      <QueryClientProvider client={queryClient}>
          <Component {...pageProps} />
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider> 
    </RootLayout>
  );
}

export default MyApp;


Which in return gives me 

./app/layout.tsx
ReactServerComponentsError:

You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive. Read more: https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive

    ,-[/app/app/layout.tsx:7:1]
  7 | 
  8 | const inter = Inter({ subsets: ['latin'] })
  9 | 
 10 |  export const metadata: Metadata = {
    :               ^^^^^^^^
 11 |   title: 'Create Next App',
 12 |   description: 'Generated by create next app',
 13 | }
    `----

File path:
  ./app/layout.tsx
  ./pages/_app.tsx
American
from what i see cause you still have _app.tsx file it's seem like you are using next with page route,
so the problem should be on your layout component.. because your layout component code was used for root-layout on app route. to define layout on page route u just need to do it like a normal component. 
import { PropsWithChildren } from "react";

const Layout = ({children}:PropsWithChildren) => {
  return (
    <div>
      {children}
    </div>
  );
}

export default Layout;

as for meta data u can use Head component from "next/head
Answer
Saltwater CrocodileOP
Spot on, thank you!