Horje
How To Add Styling To An Active Link In NextJS?

NextJS is a React framework that is used to build full-stack web applications. It is used both for front-end as well as back-end. It comes with a powerful set of features to simplify the development of React applications. In this article, we will learn about how to add styling to an active link in NextJS.

Approach to Add Styling To An Active Link In NextJS

We are going to use a usePathname hook. usePathname hook is a client component hook and it is used to get a current URL’s pathname. By using the ternary operator, we are comparing if the current pathname matches the specified pathname. if it matches the specified pathname then, we are adding an active class name.

Syntax:

const pathname = usePathname()
<Link className={`${pathname === '/' ? 'active' : ''}`} href=""> Home </Link>

Steps to Setup a NextJS App

Step 1: Create a NextJS application using the following command and answer a few questions.

npx create-next-app@latest app_name

Step 2: It will ask you some questions, so choose as the following.

√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router?  ... Yes
√ Would you like to customize the default import alias (@/*)? ... No

Step 3: After creating your project folder, move to it using the following command.

cd app_name

Project Structure:

active-link-structure

Example: The below example demonstrate the adding of an active link styling in NextJS

JavaScript 
//File path: src/app/layout.js

'use client'
import { usePathname } from 'next/navigation'
import Link from 'next/link';
import './globals.css'

export default function RootLayout({ children }) {
  const pathname = usePathname()
  return (
    <html lang="en">
      <body>
        <nav>
          <Link className={`${pathname === '/' ? 'active' : ''}`}
            href="/">
            Home
          </Link>

          <Link className={`${pathname === '/about' ? 'active' : ''}`}
            href="/about">
            About
          </Link>

          <Link className={`${pathname === '/contact' ? 'active' : ''}`}
            href="/contact">
            Contact
          </Link>
        </nav>
        {children}
      </body>
    </html>
  );
}
JavaScript 
//File path: src/app/page.js

export default function Home() {
  return (
    <>
      <h1>Home Page</h1>
    </>
  );
}
JavaScript 
//File path: src/app/contact/page.js

export default function Page() {
    return(
        <>
            <h1>Contact Page</h1>
        </>
    )
}
JavaScript 
//File path: src/app/about/page.js

export default function Page() {
    return(
        <>
            <h1>About Page</h1>
        </>
    )
}

Start your application using the command:

npm run dev

Output:

Styling active link in next js



 


Reffered: https://www.geeksforgeeks.org

ReactJS

Related
How to Set NextJS Images with auto Width and Height? How to Set NextJS Images with auto Width and Height?
How to use CORS in Next.js to Handle Cross-origin Requests ? How to use CORS in Next.js to Handle Cross-origin Requests ?
Global CSS Must be in Custom Next.js App Global CSS Must be in Custom Next.js App
How to Fetch data faster in Next.js? How to Fetch data faster in Next.js?
Global Styling with styled-components in React Global Styling with styled-components in React

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 16



 

Horje