Next.js 15 Tutorial - 20 - Active Links

Summary

In this video, we learn how to style active links in a Next.js navigation menu using Tailwind CSS. The tutorial walks through implementing the `usePathname` hook to detect the active route, then applying conditional styles to highlight the current page. By using Tailwind CSS classes, the active link is made bold, while inactive links are styled with a blue color. The video also demonstrates how to import a CSS file to enable Tailwind’s utility classes, ensuring the styles appear correctly in the browser. This technique enhances user experience by visually indicating the current page in the navigation menu.

Takeaways

• 😀 Understand the importance of styling active links in a Next.js navigation menu to enhance user experience.
• 😀 Learn how to use the `usePathname` hook from Next.js to determine the current active route.
• 😀 The `Link` component in Next.js is used to navigate between pages, and it's essential for dynamic route handling.
• 😀 The `use client` directive is required for using hooks like `usePathname` in client-side components to avoid server errors.
• 😀 The `pathName` variable stores the current URL path, which is then used to determine the active route.
• 😀 The navigation array contains route items like 'Register', 'Login', and 'Forgot Password' with corresponding `href` properties.
• 😀 Tailwind CSS classes like `font-bold` and `text-blue-500` are applied conditionally based on whether a link is active.
• 😀 Use the `startsWith()` method to handle partial matches, like when the current route is a subset of the link's path.
• 😀 Global CSS files may need to be reintroduced to ensure Tailwind styles are applied correctly when removed earlier.
• 😀 The final result shows that active links are bolded, while inactive links are blue, offering clear navigation feedback to the user.

Q & A

Why is styling the active link in the navigation important for users?

Styling the active link helps users quickly identify the page they are currently on, improving the overall navigation experience and saving time.

What does the 'usePathname' hook do in Next.js?

'usePathname' is a hook from Next.js that helps determine the current URL path, allowing you to identify which link should be highlighted as active in the navigation.

What issue arises when using hooks in server components, and how is it fixed?

Hooks cannot be used in server components in Next.js. To fix this, you must add the 'use client' directive at the top of the file, making it a client-side component where hooks can be used.

How does the 'isActive' condition work in the script?

The 'isActive' condition checks if the current path ('pathName') matches the 'href' of the link or if the path starts with the link's 'href'. If true, the link is considered active.

What Tailwind CSS classes are used to style the active link?

The 'font-bold' class makes the active link bold, and the 'text-blue-500' class colors the inactive links in blue. Both active and inactive links have a 'mr-4' class to add margin on the right.

What happens if the global CSS file is removed in Next.js?

Without the global CSS file, the Tailwind CSS utilities might not be applied correctly. To fix this, you can reintroduce a global CSS file or create a new one to include Tailwind's base, components, and utilities.

What is the role of the 'Link' component in Next.js?

The 'Link' component in Next.js is used to create navigable routes between pages, allowing users to move between different pages while keeping the layout consistent across routes.

Why are the routes like '/register' and '/login' referenced in the script?

These routes are used as examples to demonstrate how active link styling works in practice. The current active route is highlighted based on these URL paths.

What does adding 'font-bold' and 'text-blue-500' do to the links?

Adding 'font-bold' to the active link makes the text bold, while 'text-blue-500' changes the text color of the inactive links to a blue shade, making it visually clear which link is active.

What is the importance of using the 'use client' directive in this context?

The 'use client' directive ensures that the component is rendered on the client side, allowing the 'usePathname' hook to function properly, as hooks cannot be used in server components.