Fetching my endpoints from client component without locale path

[denkochev]

Description

I have one problem and one question.

1. I'm using "next": "13.5.1" and "next-intl": "^3.0.0-rc.2".
   My default locale doesn't work. Every time I call URL without language it redirects me to URL with /de/ path in it. My navigation.ts:

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

export const locales = ['de', 'ua'];
export const defaultLocale = 'de';

export const { Link, redirect, usePathname, useRouter } =
  createSharedPathnamesNavigation({ locales });

2. How can I avoid locale when I call fetch in my client component, example:

const userText = await fetch('api/whisper', { ... })

This request this URL -> http://localhost:3000/ua/api/whisper
I want http://localhost:3000/api/whisper

Thank you

Mandatory reproduction URL (CodeSandbox or GitHub repository)

https://codesandbox.io/p/sandbox/boring-knuth-crls32

Reproduction description

/app/[locale]/layout.tsx

...

export type Locale = (typeof locales)[number];

export function generateStaticParams() {
  return locales.map((locale) => ({ locale }));
}

export default function RootLayout({
  children,
  params: { locale },
}: {
  children: React.ReactNode;
  params: { locale: Locale };
}) {
  /*
    Unstable version of next-intl for static rendering
  */
  const isValidLocale = locales.some((cur) => cur === locale);
  if (!isValidLocale) notFound();

  unstable_setRequestLocale(locale);
...

middleware.ts

import { defaultLocale, locales } from '@/navigation';
import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
  locales,
  defaultLocale,
});

export const config = {
  // Skip all paths that should not be internationalized. This example skips
  // certain folders and all pathnames with a dot (e.g. favicon.ico)
  matcher: ['/((?!api|_next|_vercel|.*\\..*).*)'],
};

navigation.ts

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

export const locales = ['de', 'ua'];
export const defaultLocale = 'de';

export const { Link, redirect, usePathname, useRouter } =
  createSharedPathnamesNavigation({ locales });

Expected behaviour

When I call website without locale (/en/ or /de/ just localhost:3000) I expect my URL without locale but with the default language.

[zolero]

I think you need to add localePrefix as stated here in the documentation locale-prefix-as-needed.

export default createMiddleware({
  locales,
  defaultLocale,
  localePrefix: 'as-needed'
});

[denkochev]

Oh, I actually managed to fetch my endpoints without locale.
Instead of:

const userText = await fetch('api/whisper', { ... })

I had to do this:

const userText = await fetch('/api/whisper', { ... })

And big thanks for it, this works:

I think you need to add localePrefix as stated here in the documentation locale-prefix-as-needed.

export default createMiddleware({
  locales,
  defaultLocale,
  localePrefix: 'as-needed'
});