Get Current Page on Header Component

Developing with Prismic
1

Hi,

I would like to get the current page on the Header component, so I can highlight it on the main navigation. This is my Header.js component:

import styles from './Header.module.scss'
import Link from 'next/link';
import { createClient } from '@/prismicio'


const Header = async () => {
    const client = createClient();
    const information = await client.getSingle("information");
    const menu = await client.getSingle("main_menu");

    return (
        <div className={styles.header}>
            {/* <pre>{JSON.stringify(information.data, undefined, 2)}</pre> */}

                <div className={styles.header__links}>
                    <div className={styles.header__links__menu}>
                        {menu.data.menu.map((item, index) => {
                            return (
                                <Link key={index} href={item.item.url} className={styles.header__links__menu__item}>{item.item.uid}</Link>
                            )
                        })}
                    </div>
                </div>
            </div>
    )
}

export default Header

Thanks a lot,
Jordi

3

Hi @jordigarreta11. I think the Next.js useRouter hook should get you what you need. Here are the docs when using the Pages Router with Next.js. It might work differently if you're using the App Router, though, so you'll need to check the Next.js App Router docs in that case.