amannn / next-intl

🌐 Internationalization (i18n) for Next.js
https://next-intl-docs.vercel.app
MIT License
2.29k stars 211 forks source link

Router.replace from createLocalizedPathnamesNavigation causes infinite render #1198

Closed AlexandreMouyen closed 1 month ago

AlexandreMouyen commented 1 month ago

Description

Hello,

I found that the router.replace function from createSharedPathnamesNavigation differs from others router (createSharedPathnamesNavigation or even next/navigation).

I think it is some kind of issue.

Verifications

Mandatory reproduction URL

App Router

Reproduction description

Create a simple client component with router.replace on useEffect.

"use client"

import {useEffect} from "react";
import {usePathname, useRouter} from "../navigation";

export function TestComponent() {
    const router = useRouter();
    const pathname = usePathname();

    useEffect(() => {
        console.log("render", pathname)
        router.replace(pathname, {scroll: false})
    }, [router]);

    return <h1>Hello</h1>;
}

Try with the router returned from createSharedPathnamesNavigation and createLocalizedPathnamesNavigation. The sharred one work as expected (like the next/navigation one for example). But the localized one causes infinte render with the exact same code.

import {createLocalizedPathnamesNavigation, createSharedPathnamesNavigation} from 'next-intl/navigation';

export const locales = ['en'] as const;

export const defaultLocale = 'en' as const;

// Use the default: `always`
export const localePrefix = undefined;

export const {Link, redirect, usePathname, useRouter} =
    // Only change the code here to createSharedPathnamesNavigation
    createLocalizedPathnamesNavigation({
        pathnames: {},
        locales,
        localePrefix
    });

Expected behaviour

Working like others router.replace functions. For sure, it is pretty easy to avoid.

amannn commented 1 month ago

Thanks for the report, this will be fixed in https://github.com/amannn/next-intl/pull/1201