NextJS configuration facing an issue with rewrite rules not functioning as intended

I have attempted to utilize a rewrite rule in the NextJS next.config.js file in order to redirect URLs containing '/lite' to '?amp=1', however, it does not seem to be functioning correctly in all scenarios.

Below is the code from my next.config.js:

async rewrites() {
    return [
      {
        source: '/:articles/:slug/:id/lite/',
        destination: '/:articles/:slug/:id/?amp=1',
      }
    ];
  },

}

module.exports = nextConfig

The rewriting works as expected for the URL:

https://localhost:3000/article/trending/us-man-witnesses-his-kidney-transplant-procedure-indian-origin-surgeon-viral-photos-9415947/

However, it fails for the URL:

https://localhost:3000/article/trending/trending-globally/us-man-witnesses-his-kidney-transplant-procedure-indian-origin-surgeon-viral-photos-9415947/

If anyone can provide assistance with this issue, I would greatly appreciate it. Thank you.

Answer №1

My recommendation is to make a small adjustment to the provided code:

async fixRewrites() {
    return [
      {
        source: '/:articles/:slug*/:id/mobile/',
        destination: '/:articles/:slug*/:id/?amp=1',
      }
    ];
  },

}
module.exports = updatedConfig

This updated configuration will now cater to both singular and multiple segments (e.g., latest-news) ensuring compatibility with both scenarios.

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

Getting the value of "Page=?" from the href attribute in an HTML tag can be done using Selenium Webdriver and Java

I am looking to extract the value "page = ?" from a specific "href" tag in the HTML code below. I need this value for my Selenium WebDriver script so that my loop can iterate up to page 53. Can someone guide me on how to retrieve the "page =" value mentio ...

How can JavaScript transform Unicode strings?

<i class="icon">&#xe672;</i> This code will display an icon like this: > However, when I render it in Vue: <i class="icon">{{a}}</i> a = '&#xe672;' The result is  It displays as a string! ...

Suggestions for deleting browser cache programmatically by utilizing JS or HTML

Having trouble clearing the Chrome browser cache using Add-ons. Working on a site development project using JSP with Java, it's crucial for security reasons to clear the cache. Tried multiple methods but none have been successful. Any suggestions? Ple ...

Tips for passing dynamic latitude and longitude values to a JavaScript function within an AngularJS framework

I am facing an issue with displaying a dynamic marker on Google Maps. I can show a static lat long marker, but I am struggling to pass dynamic lat long values to the function. How can I pass {{names.lat}}, {{names.longitude}} to the function so that I can ...

The Splice function is malfunctioning due to issues with the object (the indexOf function is not recognized)

I am currently dealing with an object that looks like this: Object {val1: "Hello", val2: "", dt1: "pilo1", dt2: "pilo2", lo1: "log1"} My goal is to remove any keys within the object that have empty values (""). I attempted the following code snippet: ...

Create a PDF document using HTML code stored on a separate component within an Angular 2 application

I am facing an issue with my parentComponent and childComponent setup. Specifically, I have a button called downloadPDF in the parentComponent that is supposed to trigger a PDF download from the HTML code of the childComponent without displaying the childC ...

Incorporate additional text to the downloads hyperlink using jquery

Is it possible to achieve this using jQuery since I am unable to directly modify the HTML markup? I am looking to append download.php?file= to a URL without replacing the entire href attribute. Here's an example of what I'm trying to achieve: & ...

Navigating the complexities of transferring data between components

I recently started working with Angular 6 and encountered an issue while trying to share data in my project. Below is the code snippets: 1) Component Sidebar: selectedCategory(type:any) { this.loginService.categoryType = type; // need to pass this d ...

Is there a method to modify the arrangement in which 3 specific HTML elements are displayed (i.e., their hierarchy in relation to one another)?

I have 3 "p" elements and I'm trying to find a way to change the order in which they load on the page using JS or CSS. Below is an example of what I've attempted so far. When you click on the first box labeled "about 1," it opens up and displays ...

Elements recognized worldwide, Typescript, and a glitch specific to Safari?

Consider a scenario where you have a select element structured like this: <select id="Stooge" name="Stooge"> <option value="0">Moe</option> <option value="1">Larry</option> <option value="2">Curly</option ...

What are some strategies for stopping a form from redirecting me while utilizing ReactJS and ExpressJS?

Recently, I created a form that redirects to the route /repair upon submission with an action of /repair. However, I would prefer to keep it as a Single Page Application (SPA) where after submitting the form, the fields are cleared, and a simple message l ...

Include the aria-labelledby attribute in the jQuery Datatable Pagination

Check out the HTML output created by the Jquery Datatable plug-in for pagination(https://datatables.net/plug-ins/pagination/full_numbers_no_ellipses): <div class="dataTables_paginate paging_full_numbers" id="my-table_paginate" aria-l ...

Display a pop-up upon clicking a button

I've created a custom popup form using Flodesk and added the corresponding Javascript Snippet to my website just before the closing head tag. <script> (function(w, d, t, h, s, n) { w.FlodeskObject = n; var fn = function() { (w[n] ...

When I try to access localhost, it directs me to http://localhost:3000/myprofile%20 instead of localhost:/3000/myprofile

Every time I try to log into my profile page with the correct login credentials, I get redirected to http://localhost:3000/myprofile%20, but then receive a 404 error. This is what my code looks like: // Login Route router.post('/login', functi ...

Tips for increasing the size of Material-ui Rating icons

I am currently utilizing npm to develop a widget. I aim to utilize the material-ui Rating component and have successfully integrated it. However, when I embed the widget on a webpage, the html font-size is set at 62.5%, causing the component to appear too ...

Implement Material UI TextField to ensure all required fields are properly formatted

Looking to customize the underline border color of TextFields marked as mandatory within a form using react-hooks-form. I understand that I need to define a style for these fields, but I'm struggling with where to start... This is the current code s ...

The event fails to propagate up to the parent component

I have a project structure set up as follows: https://i.stack.imgur.com/bvmK5.jpg The todo-form component triggers the created event and I am looking to handle this event in the todos component. todo-form.component.html: <form class="todo-form" ( ...

Tips for customizing the appearance of an active link in a mapped navigation bar

I am currently working on a Next.js page and I want to add some styling to the NavBar to indicate to the user which page they are on. Although I found this interesting solution on Stack Overflow - Target Active Link when the route is active in Next.js ... ...

Leverage the power of Vue Nuxt Auth to activate authentication middleware on a route-by-route

Is there a way to implement auth middleware for individual routes using Class Components? How can I achieve the same functionality as this: <script> export default { middleware: 'auth' } </script> The following method does n ...

Refresh KendoUI Grid data with latest additions

I currently possess: $.post('buying-grid/split/' + config.route.params.id, item).success(function(data){ var ds = new kendo.data.DataSource(); ds.data(data) $('#buyingGrid').data('ke ...