Getting the language (locale) info from the URL, especially for defaultLocale if it is inside the URL or not

[ticpoi]

Summary

I need to get the full URL of the page containing the locale information to be able to understand if the default locale applied because of "defaultLocale" or applied because of router (Means url contains the locale name)

For a domain based default language decision, we need this information. But we could not get this information on server side of NextJS.

As example
http://localhost:3000/en - This is en, contains en
http://localhost:3000/fr - This is fr, contains fr
http://localhost:3000 - This is en, does not contain en, it applies en because of the default locale in next.config.js

We want to override the default locale on first load based on domain based configuration.

I can get the locale information "context.locale" but cannot be sure why it is "en". Because it is defaultLocale or it is written in the URL.

We tried many things and I am listing below to explain the problem.
1- comparing context.locale === context.defaultLocale (does not mean anything because it does inform me if the URL has it)
2- tried to create cookie in client side by getting information from router and read on server but serverside works first so we cannot get up-to-date information
3- tried to write a middleware and tried read from req.nextURL but it does not have the language information like context.req.url
4- tried to use the req.header.referrer but it is previous pages url and it does not have the required information on first pages and when the user change the language on client side. It has the previous url details.

So the thing that I need to know if the URL contains the language or not, but next.JS router clears this information from everywhere before reaching to server so we cannot reach it.

Thanks for any kind of help.

Additional information

No response

Example

No response

[devjiwonchoi]

To get the full URL of the page, you can use usePathname.
Note that usePathname is for Client Component, so you need to add 'use client'; on the top of the file.

usePathname is a Client Component hook that lets you read the current URL's pathname.

Example:

// http://localhost:3000/en

'use client';
 
import { usePathname } from 'next/navigation';
 
export default function ExampleClientComponent() {
  const pathname = usePathname();
  return <>{pathname}</>;  // expected output: /en
}

As additional information, you might want to look for Internalization and Localization.

[ticpoi]

Thanks for your answer.

We do not have any problem on client side. I need to get it on server side. I just need to know one of these two
1- Full url including language OR
2- If Url contains the language or not (on client browser)

one of these will solve my problem.

[devjiwonchoi]

You can do it by using middleware.

// /middleware.ts

import { NextResponse } from 'next/server';

export function middleware(request: Request) {

  // Store current request url in a custom header, which you can read later
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-url', request.url);

  return NextResponse.next({
    request: {
      // Apply new request headers
      headers: requestHeaders,
    }
  });
}

// /app/layout.tsx

import { headers } from 'next/headers';

export default function RootLayout() {
  const headersList = headers();
  // read the custom x-url header
  const header_url = headersList.get('x-url') || "";
}

Ref: #43704 (comment)

[ticpoi]

Hi thanks for your answer.

You offered to read the request.url and set to a header

But request.url does not contain the language information in the url. If it would have, the problem would solve.

requestHeaders.set('x-url', request.url);

When I call
https://riderexpress.ticpoi.com/en - I got the request.url = https://riderexpress.ticpoi.com

When I call
https://riderexpress.ticpoi.com - Again I got the request.url = https://riderexpress.ticpoi.com

First one is user selected and I should not apply any other default language
Second one is using the default language from next.config.js so I should update to the default language.

So I need to know of these two
1- Full url including language OR
2- If Url contains the language or not (on client browser)

But both comes to me with same url excluded the language part

[SLMNBJ]

@ticpoi did you solve the issue or find a way to get the locale?

[norio-club]

Got any solution for this?

[Litibe]

Hi,
I try to learn Next.js and it's so difficult between client and server component.
But i can obtain locale language with client or server component :)

server :
import { getLocale } from "next-intl/server";

const locale = await getLocale();

client :
import { usePathname } from "next/navigation";
const pathname = usePathname();
const locale = usePathname()?.split("/")[1];

I extract my translate with db progreSql not Json file because i create dashbord to update this for my customer.

Sorry for my little English, I'm French.

[xumeng]

It worked for me! Thanks :)

[MartinJLee]

for client side we can also use Params

import { useParams } from "next/navigation";
const { locale } = useParams<{ locale: string }>();

[nino1337]

I needed to implement a redirect middleware from an external resource and check the incoming original url to see if a redirect exists for it. Stripping the locale away in that case was very suboptimal, to say the least...

So for anyone still searching for a solution, as of Next.js 13.1 you now have the possibility to add the skipMiddlewareUrlNormalize: true flag in your next config. See also here.

You will then be able to extract the original url with request.url or request.nextUrl.href without any normalization or locale stripping.