Error: Insufficient params provided for localized pathname.

[meJohnnyRobert]

Description

I've tried following the documentation and when trying to navigate to the my profile page, which is a dynamic localized path I get the following error:

The project compiles without issues, the error only appears when I try to navigate to the following dynamic localized path, using the "My Profile" button in my sidebar:

http://localhost:3000/en/user/[id]

The error comes up no matter the locale, even if I'm using the English locale.

Here is some of my code which I believe is relevant to the issue (also available in the reproduction repo):

// src/navigation.ts

import { createLocalizedPathnamesNavigation, Pathnames } from "next-intl/navigation";

export const locales = ["en", "ro"] as const;
export type Locale = typeof locales;
export const localePrefix = "always";

export type LocalizedPathnames = Pathnames<typeof locales> & {
  '/user/[id]': { en: string; ro: string };
};

// Define the pathnames object with the new type
export const pathnames: LocalizedPathnames = {
  "/": "/",
  "/user/[id]": { en: "/user/[id]", ro: "/utilizator/[id]" },
};

export const {
  Link,
  redirect,
  usePathname,
  useRouter,
  getPathname,
} = createLocalizedPathnamesNavigation({ locales, pathnames });

// components/sidebar/job-seeker-sidebar.tsx

'use client';

import React from 'react';
import { useRouter, usePathname, pathnames, getPathname } from '@/src/navigation';

interface JobSeekerSidebarProps { }

const JobSeekerSidebar: React.FC<JobSeekerSidebarProps> = () => {
  const router = useRouter();
  const pathname = usePathname();
  const t = useTranslations("sidebar");
  const { user } = useUserSessionStore();
  const locale = useLocale() as 'en' | 'ro'; // Casting locale to the expected type

  const handleButtonClick = (path: keyof typeof pathnames, params?: { [key: string]: string }) => {
    // Check if the path includes the [id] placeholder
    const hasIdPlaceholder = path.includes('[id]');
  
    // Get the localized path based on the current locale
    let localizedPath = getPathname({
      locale,
      href: path,
      ...(hasIdPlaceholder && params),
    });
  
    // Navigate to the constructed path
    router.push(localizedPath);
  };

  return (
          <IconButton
            icon={<FaRegUser />}
            label={t('myProfile')}
            onClick={() =>
              user?.id
                ? handleButtonClick('/user/[id]', { id: user.id })
                : handleButtonClick('/user/[id]')
            }
            isActive={pathname === `/user/${user?.id}`}
          />
  );
};

export default JobSeekerSidebar;

I think that it is also important to mention that I also do a rewrite for the My Profile Page inside the next.config file, it was suggested to me to do that by either Claude or GPT 4, I can't remember exactly but here's how that rewrite looks and works:

// next.config.mjs

import createNextIntlPlugin from 'next-intl/plugin';

const withNextIntl = createNextIntlPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/ro/utilizator/[id]',
        destination: '/user/[id]',
      },
      {
        source: '/en/user/[id]',
        destination: '/user/[id]',
      },
      // Add other rewrites if necessary
    ];
  },
};

export default withNextIntl(nextConfig);

I've tried solving it for the past 2 weeks with both Claude Opus and GPT 4 & 4o, based on the available documentation and examples and a similar closed thread issue here but all the suggestions offered either led to other errors or to the same error, and this is why I created this thread with the hope that someone may be able to tell what the issue is.

I'd like to mention 2 things:

1. I'm not a programmer, I mainly use documentation, tutorials, AI and sometimes ask for help if I get stuck.
2. I'm not familiar with reproduction repos, so if my repo is giving errors or missing any files please let me know what the issue is and I'll do my best to update the reproduction repo.

Verifications

• I've verified that the problem I'm experiencing isn't covered in the docs.
• I've searched for similar, existing issues on GitHub and Stack Overflow.
• I've compared my app to a working example to look for differences.

Mandatory reproduction URL

https://github.com/meJohnnyRobert/next-intl-minimal-reproduction/blob/main/src/app/%5Blocale%5D/user/%5BuserId%5D/page.tsx

Reproduction description

Steps to reproduce:

1. Open reproduction
2. Create & Log-in with your account
3. Press the "Jobs" button in the top navigation bar
4. Change the language to English, go to step 5, then go back to the Jobs page, change to Romanian, go to step 5
5. Press the "My Profile" button from the Sidebar on the left
6. See error: Insufficient params provided for localized pathname.

Expected behaviour

The expected behaviour is for the user to be able to access their profile page while the page would be using the correct dynamic localized path as set-up in the navigation.ts file and once the My Profile page is accessible and opens correctly for my language selector to correctly switch to the dynamic localized path as defined in the navigation.ts file as well.

At the moment I can't even test if the language selector/switcher works correctly with the My Profile Page because I can't even access the My Profile page because of the error mentioned above, but I can confirm that it does work correctly for my other localized paths which are not dynamic.

[amannn]

Thanks for the question, I'll move this to a discussion since it's a usage question and not a bug in next-intl. The error message you're seeing should point to the issue in your app code.

[meJohnnyRobert]

Hey @amannn ! Thank you for replying and my bad for posting in the wrong category, I didn't know how to post in discussions, so thank you very much for moving the thread and not closing it.

So I clicked on the error message in my browser and it took me here in VsCode at this line in the screenshot:

[amannn]

The error you're seeing is this:

Error: Insufficient params provided for localized pathname
Template: /utilizator/[id]
Params: undefined

It seems to me like the issue is just that: You're not passing params to the getPathname function in that invocation but an id is required. Moreover, if you consult the next-intl docs, you might find that getPathname does not need to be used in combination with router.push.

I'd really try to dig into that, add some console.log's and try to isolate the bug as much as possible. You can also try to add a static call like router.push({pathname: '/user/[id]', params: {id: 2}}), see if that works and try to replace parts of it with your custom app logic.

Furthermore, the next-intl docs contain a range of examples and I try to cover as many use cases as possible there—maybe having another look there can help with your situation.