nextjs navbar example [nextjs] - blog.howtoclicks.com

nextjs navbar example

nextjs

Here’s an example of a navbar component that you can use in your Next.js application:

import Link from 'next/link'

function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <Link href="/">
            <a>Home</a>
          </Link>
        </li>
        <li>
          <Link href="/about">
            <a>About</a>
          </Link>
        </li>
        <li>
          <Link href="/contact">
            <a>Contact</a>
          </Link>
        </li>
      </ul>
    </nav>
  )
}

export default Navbar

To use this navbar in a page, you can import it and render it like this:

import Navbar from '../components/Navbar'

function Page() {
  return (
    <div>
      <Navbar />
      {/* Page content goes here */}
    </div>
  )
}

export default Page

Note that the Link component is used to create the links in the navbar. This component is provided by Next.js and allows you to create client-side routes in your application.

nextjs navbar example

Other Article on Tag nextjs

All Tags