#Navbar for next 13.5

9 messages · Page 1 of 1 (latest)

ancient totem
#

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
<a className={function} children=...>

How do I I add a navbar the right way?

marble wolfBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

ancient totem
#

Layout.js

import { Inter } from "next/font/google";
import "./globals.css";
import NavBar from "./components/NavBar";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {" "}
        <NavBar />
        {children}
      </body>
    </html>
  );
}
tough quail
#

@ancient totem Show navbar Code and function code

chilly flumeBOT
# ancient totem Error: Functions cannot be passed directly to Client Components unless you expli...
Please add more information to your question

Your question currently does not have sufficient information for people to be able to help. Please add more information to help us help you, for example: relevant code snippets, a reproduction repository, and/or more detailed error messages. See more info on how to ask a good question in https://discord.com/channels/752553802359505017/1138338531983491154 and #welcome message

Requested by ReverseGem7
ancient totem
# tough quail <@431466532481138688> Show navbar Code and function code

This is my NavBar component : ```js
// Assuming you have imported Link from next/link
import Link from "next/link";

export default function NavBar() {
return (
<header className="header">
<Link href="/">
<a>
<div alt="logo" className="w-18 h-18 object-contain">
<svg
</svg>

      </div>
    </a>
  </Link>
  <nav className="flex text-lg gap-7 font-medium">
    <Link href="/about">
      <a
        className={({ pathname }) =>
          pathname === "/about" ? "text-blue-600" : "text-black"
        }
      >
        About
      </a>
    </Link>
    <Link href="/projects">
      <a
        className={({ pathname }) =>
          pathname === "/projects" ? "text-blue-600" : "text-black"
        }
      >
        Projects
      </a>
    </Link>
  </nav>
</header>

);
}

tough quail
# 
'use client'
 
import { usePathname } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const pathname = usePathname()
}
ancient totem
#

Thank you it is resolved