Incorrect usePathname Hook Usage in Language Switcher Guide

[PrennerProducts]

Hello,

I've encountered an issue in the Building a Language Switcher section of the guide for integrating useParaglideJsWithNextjsAppRouter. The example provided for the LanguageSwitcher component seems to misinterpret the value returned by the usePathname hook.

Current Implementation:

import { Link, usePathname } from "@/lib/i18n"

export default function LanguageSwitcher() {
    const { pathname } = usePathname();
    return (
        <div>
            <Link href={pathname} locale="en">English</Link>
            <Link href={pathname} locale="de">Deutsch</Link>
        </div>
    );
}

Issue: The usePathname hook is expected to return a string representing the current pathname. However, the current guide's syntax { pathname } = usePathname() implies that it returns an object with a pathname property, which is incorrect.

Expected Correction: The correct usage should directly assign the string returned by usePathname to a pathname variable like so:

import { Link, usePathname } from "@/lib/i18n"

export default function LanguageSwitcher() {
    const pathname = usePathname();
    return (
        <div>
            <Link href={pathname} locale="en">English</Link>
            <Link href={pathname} locale="de">Deutsch</Link>
        </div>
    );
}

With this correction, the pathname variable will correctly store the string value representing the current path, and the Link component can function as intended.

I believe updating the guide with the correct usage can prevent confusion for future readers. Thank you for looking into this issue.

cheers

[linear[bot]]

PARJS-23 Incorrect usePathname Hook Usage in Language Switcher Guide

[LorisSigrist]

Good catch! Thank you, I'll correct that.

[LorisSigrist]

Fixed in https://github.com/opral/monorepo/commit/692b166bfb966b8199d648c9954811434623a1c1