Navbar for next 13.5

Answered

Blood cockle posted this in #help-forum

Blood cockleOP

2024-01-23T07:08:34.000Z

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?

Answered by ReverseGem7

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

className={pathname==='/projects' ? 'text-blue-600' : 'text-black'}

View full answer

6 Replies

Blood cockleOP

2024-01-23T07:09:08.000Z

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>
  );
}

ReverseGem7

2024-01-23T07:40:37.000Z

@Blood cockle Show navbar Code and function code

Blood cockleOP

2024-01-23T09:44:05.000Z

This is my NavBar component :

// 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>
  );
}

ReverseGem7

2024-01-23T10:19:44.000Z

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

className={pathname==='/projects' ? 'text-blue-600' : 'text-black'}

Answer

ReverseGem7

2024-01-23T10:21:09.000Z

https://nextjs.org/docs/app/api-reference/functions/use-pathname

Blood cockleOP

2024-01-24T08:16:55.000Z

Thank you it is resolved