Creating flexible routes with localized paths (i18n) in Next.js without relying on getStaticPaths

I am currently exploring ways to create simple dummy dynamic routes, such as /order/{productid}.

While Next offers various strategies, I have identified two potential solutions for my specific needs:

  1. Static paths generation: With over 1400 products, static generation could be feasible if I could utilize ISR. However, due to geographical restrictions (I am in Europe and the lambdas created by ISR are in the US), this option is not viable for me.

  2. Basic dynamic routing : My attempts at implementing dynamic routes have resulted in issues when working with i18n setup, leading to an infinite loop. Despite extensive research, I have not found a satisfactory solution.

What have I tried? I followed the example provided in the Next.js documentation on dynamic routes and added i18n integration to replicate the issue.

You can view my implementation here: https://github.com/sergioviniciuss/next-dynamic-routing-i18n

If you have any ideas or suggestions, please feel free to share them.

javascriptnext.jsinternationalizationdynamic-routing

Answer №1

The issue arose from my inclusion of the port in my i18n domains configuration. I mistakenly included the port for localhost, which resulted in an infinite loop:

    domains: [
      {
        domain: 'localhost:3000',
        locales: [
          "de-DE",
          "de-AT",
          "en-US",
          "en-IE",
          "en-GB",
          "nl-NL",
          "es-ES",
          "fr-FR",
        ],
        defaultLocale: process.env.APP_LOCALE || "en-US",
        http: true,
      },
    ],

Instead of domain: 'localhost:3000',, it should have been domain: 'localhost',

After making this correction, everything started working perfectly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Clear Redis sorted set scores following zremrangebyscore operation

Currently, I am utilizing a Redis sorted set to maintain values in a specific order. Here is an example: score | data 0 | a 1 | b 2 | c 3 | d There are situations in my application where I need to delete certain entries. For instance, ...

javascriptnode.jsredissoftware-distribution

Tips for deleting an image file, or any file, from a Node.js Express server

Being a novice in the field of web development, I decided to embark on creating a basic E-commerce application as my first project. I managed to make good progress until I hit a roadblock while trying to remove an image file of a product: I utilized expres ...

javascriptnode.jsexpressexpress-generator

Specific Character Count in Regular Expressions

THIS IS DISTINCT FROM THE REFERENCED QUESTION because I have extensively researched and tested various solutions before resorting to posting this inquiry. I am in need of a validation for inputs that adhere to the following criteria: The first character ...

javascriptregex

Tips for displaying a scrollbar on your page

I have a creative vision I am currently pursuing. My goal is to create a div that displays as a fixed dimension box where different javascript functions will gradually input text. As the number of lines of text surpasses the height of the box, I envision a ...

javascriptjqueryhtmlcssscrollbar

Typescript: Defining the correct return type for resolved parameters in promises

Exploring the world of TypeScript, I recently attempted to convert some basic JavaScript promise samples into TypeScript promises. While working on this conversion process, I encountered an issue that has left me puzzled and unable to find a solution even ...

javascripttypescript

Retrieving the Selector Value during a Change Event

Is there a way to retrieve the selector value in a change event? I attempted this approach: $("#frek_menonton_tv :input").change(function(){ $(this).selector; }); However, it only returns an empty string. Desired outcome: frek_menonton ...

javascriptjquery

js The correct value is not being set to the div's style.top

function gamestart(){ var gr; var gr = true; console.log(gr==true); if(gr == true){ console.log("we have activated pointer key detection dear Mr.ketsebaot") document.onkeydown = checkk; } } function checkk(e){ cons ...

javascripthtmlcss

Measuring JSON data with PHP through asynchronous requests

Looking to retrieve a specific count from a json dataset. Here is an example json format: { "tickets": [ { "url": "https://asd.zendesk.com/api/v2/tickets/1.json", "id": 1, "external_id": null, "via": { "channel": "sa ...

javascriptphpjsonajax

Send a REST Request and retrieve a Response without the need to refresh the page

I need to show the result of a REST request without having to refresh the page. Using RAVE for this purpose. Below is the URL for the POST request: JSON data: { "recipientaccount": "0690000034", "destbankcode": "044", "PBFPubKey": "FLWPUBK-4e ...

javascriptphpjqueryajax

Using ASCII 3D text can create a stunning visual effect on a website, but it can sometimes appear

My website is displaying ASCII 3D Text with glitchy lines, but this issue is not present on other websites. Example 1: Glitchy lines visible on my website Example 2: A different website using the same text without any glitchy lines. No glitches detected h ...

javascripthtmlcsswebweb-testing

JQuery immediately triggers the firing of $.when

I've been attempting to group together AJAX requests in order to trigger an event once all of them have finished: this.xhrs.push($.ajax({ type: "POST", url: this.options.firstUrl, data: this.options.data, datatype: 'json' })); this.xhrs.pus ...

javascriptjqueryajaxdeferred

"Bootstrap Toggle malfunctioning when switching between disabled and enabled states on a restricted set of

Having an issue with the Bootstrap Toggle Library in combination with Bootstrap 4. I am trying to restrict users from switching 'ON' more than a set number of elements. Here is the snippet of my HTML code: <div style="border:solid border-widt ...

javascriptjqueryhtmlbootstrap-4angular-bootstrap-toggle

Vue - Utilizing child slots in the render method

Within my component, I am working with a default slot and attempting to enhance the layout by wrapping each item in the slot within a div. However, I am facing an issue where I need to retrieve the classes of one of the slot elements, but the VNode element ...

javascriptvue.jsjsx

Challenges with NPM testing

Are there any reported issues with npm on Ubuntu 18.04? Or are there known solutions to the 100:1 error? I am currently enrolled in a course and it's crucial for me to be able to execute code using npm test. Despite multiple attempts at deleting and ...

javascriptnode.jsubuntunpmnpm-install

Is there a way to eliminate the pop-up window background in MUI?

Is there a way to get rid of the white pop-up background in MUI's default CSS? <Dialog open={open} onClose={() => { setOpen(false); }} > <DialogContent> <h1>Do you really ...

javascriptcssreactjsmaterial-ui

Is there a button that doesn't trigger a postback action?

I encountered an issue on my asp.net page where a button triggers a JavaScript function, but after the script runs, the page reloads (postback). How can I prevent this from happening? <button onclick="printElement('content');">Print</bu ...

javascriptasp.nethtml

Updating meta tags dynamically in Angular Universal with content changes

Hello, I'm encountering an issue with a dynamic blog page. I am trying to update meta tags using data fetched from the page. Here's the code snippet: getBlogPost() { this.http.get(...) .subscribe(result => { this.blogPost = re ...

javascriptangulartypescriptangular-universal

Having trouble dynamically displaying the '<' symbol using JavaScript?

Whenever I attempt to show a string with the character '<' in it, the part of the string that comes after the symbol is not displayed. Strangely enough, when I output it to the console, it appears correctly. Take a look at this excerpt showcas ...

javascripthtml

Data is not being stored in the MongoDB Model/Schema as expected

I'm encountering an issue with my MongoDB database. It appears to not be receiving the data I am attempting to send to it, resulting in an empty database despite everything else functioning smoothly. The application I'm working on involves scrap ...

javascriptnode.jsmongodbmongoose

Error occurred while attempting to access querystring values

Is there a reason why 2 out of the 3 querystring parameters have values, while one is undefined? <li class="@ViewBag.ShowNext">@Html.RouteLink("Next »", "Search", new { page = @ViewBag.NextPage, q = @ViewBag.TextClean, Option = @ViewBag.Option }, n ...

javascriptjqueryajax