Posts

Struggling with Active Links in Next.js? This Hook Solves It!

Tired of writing complex logic to highlight active navigation links in Next.js? Say hello to   useIsActivePath —a simple yet powerful custom hook that handles all edge cases for you! The Problem with Active Links in Next.js Manually checking  pathname  for active states gets messy: Exact paths ( /about ) Dynamic routes ( /blog/[slug] ) Relative paths ( about  vs  /about ) Wildcard matching ( /docs*  for nested routes) Most solutions require repetitive code — but not anymore! The Solution:  useIsActivePath  Hook This tiny hook does all the heavy lifting: import useIsActivePath from "./useIsActivePath" ; const NavItem = ({ path, label }) => { const isActive = useIsActivePath(path); return <Link href={path} className={isActive ? "text-blue-500" : ""}>{label}</Link>; }; Key Features ✔  Exact matches  ( /dashboard ) ✔  Relative paths  ( dashboard  →  /dashboard ) ✔  Wildcard support  ( /blog*...
Post a Comment
Read more

Handling Refresh Tokens in React with Redux Toolkit: A Step-by-Step Guide

In modern web applications, maintaining a secure user session is essential. Token-based authentication with access tokens and refresh tokens is a popular solution, but implementing it properly requires a bit of setup to ensure a smooth experience. In this blog post, we’ll go over how to handle refresh tokens in a React application using Redux Toolkit. We’ll set up a custom  baseQueryWithReauth  function that automatically manages the token lifecycle, ensuring users remain authenticated without needing to re-login constantly. Why Use Access Tokens and Refresh Tokens? Access tokens are typically short-lived and allow users to access protected resources without needing to log in again. When these tokens expire, refresh tokens (which are longer-lived) allow the app to request a new access token without interrupting the user experience. This approach not only improves security but also enhances usability. Let’s jump into implementing this in a React app. Step 1: Setting Up the Redu...
Post a Comment
Read more