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:
Example: The below example demonstrate the adding of an active link styling in NextJS
//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>
);
}
//File path: src/app/page.js
export default function Home() {
return (
<>
<h1>Home Page</h1>
</>
);
}
//File path: src/app/contact/page.js
export default function Page() {
return(
<>
<h1>Contact Page</h1>
</>
)
}
//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: