CODEWITHSUNDEEP
reactjslayoutnext.jsroutesserver-side-rendering
Jesse Hickey
Jesse Hickey

Reputation: 45

NextJS 13 root.layout rendering NavBar at the bottom. Is there a way to consistently render NavBar at the top?

I'm experimenting building a Next13 app. The new layout is cool, but it is messing up the rendering. I don't entirely understand the ordering of rending objects within the layout:

Navbar.tsx

"use client";
import Link from "next/link";

export default () => {
  return (
    <span className="flex justify-between">
      <h1 className="text-xl">Navigation Bar</h1>
      <ul className="flex gap-4">
        <li>
          <Link href="/">Home</Link>
        </li>
        <li>
          <Link href="/user/login">Login</Link>
        </li>
        <li>
          <Link href="/user/signup">Sign Up</Link>
        </li>
      </ul>
    </span>
  );
};

layout.tsx

import "./globals.css";
import NavBar from "./NavBar";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html className="bg-slate-500 font-robslab" lang="en">
      <head>
        <title>Stylitique</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </head>
      <header>
        <NavBar />
      </header>
      <body>{children}</body>
    </html>
  );
}

page.tsx (HOME)

export default function Home() {
  return (
    <main>
      <h1 className="text-green-500">HOME</h1>
      <p>
        {" "}
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
        sapiente, expedita praesentium a eligendi dolorem maiores nihil
        consectetur ipsum, repudiandae sed deserunt delectus, facere repellat
        ipsam sit possimus voluptatibus error!
      </p>
    </main>
  );
}

I tried:

  1. putting the NavBar into a header outside the body.
  2. putting it straight into the body.
  3. with and without "use client".
  4. added more data to "HOME" in order to render slower, I guess.

Anyone find a solution yet?

Upvotes: 3

Views: 4795

Answers (1)

lorekkusu
lorekkusu

Reputation: 504

just put the component inside <body>

notice: no need of <header>

<head>
  ...
</head>
<body>
  <NavBar />
  {children}
</body>

enter image description here

Upvotes: 7

Related Questions