score:1

Accepted answer

in your next.config.js.

i18n: {
  localedetection: false,
}

this solves a problem for me.

score:1

this solved my problem, hope it solves yours.

  • use next userouter to get the current active language:
import { userouter } from  "next/router";
const router = userouter();
const active_language = router.locale;

  • use window object to get the current full url of your app:
const window_url = window.location.href;

note: next.js executes code first server-side, then client-side (which includes the window object). there are many ways to achieve this, if you get "window is not defined" read this article.

  • set your api url based on the current active language,

assuming your default language is "en" :

let api_url = "";
if(active_language === "en") {
    api_url = `${window_url.substr(0, window_url.lastindexof("/"))}/`;
    console.log(window_url) // http://localhost:3000/shop
    console.log(api_url) // http://localhost:3000/
};

and your secondary language is "ar":

if(active_language === "ar") {
    api_url = window_url.substr(0, window_url.lastindexof("/") - 2);
    console.log(window_url) // http://localhost:3000/ar/shop
    console.log(api_url) // http://localhost:3000/
};
  • now your api url is set to the same url even if you switch the locale language:
fetch(`${api_url}/api/hello`);

Related Query

More Query from same tag