Next.js

Highlighting the active link in Next.js nested routes

While building this site I noticed the "Blog" link in the navigation wasn't highlighting when viewing a blog post.

To build the navigation I'm using an array of `navLinks` in my config file.

export const config = {
  ...
  navLinks: [
    {
      text: 'Blog',
      url: '/blog',
      external: false,
    },
    {
      text: 'Github',
      url: 'https://github.com/AidanZealley',
      external: true,
    }
  ],
  ...
}

The `pathname` field from `useRouter` wasn't matching the `/blog` url in my config file while on a url like `/blog/my-blog-post`.

I wrote a function to compare only the first part of the `pathname` against the url in the config.

const isSameSiteSection = (path, configUrl) => `/${path.split('/')[1]}` === configUrl

Now I use the value of that function to conditionally add the active link class.

Full Nav component

import Link from 'next/link'
import { useRouter } from 'next/router'
import OpenInNewRoundedIcon from '@material-ui/icons/OpenInNewRounded'
import { config } from '@utils/config'
import styles from './styles.module.css'

export const Nav = () => {
  const { navLinks } = config
  const isSameSiteSection = (path, configUrl) => `/${path.split('/')[1]}` === configUrl
  const { pathname } = useRouter()
  return (
    <nav className={`${styles.nav}`}>
      {navLinks.map(({ label, url, external }, index) => (
        <Link key={index} href={url}>
          <a
            className={`
              ${styles.link}
              ${isSameSiteSection(pathname, url) ? ` ${styles.active}` : ''}
            `}
            target={external ? '_blank' : ''}
          >
            {label}
            {
              external
              ? <OpenInNewRoundedIcon fontSize="small"/>
              : ''
            }
          </a>
        </Link>
      ))}
    </nav>
  )
}