NextJS rewrites work seamlessly in a live environment

I recently implemented a method to rewrite requests to my backend server during development:

https://nextjs.org/docs/api-reference/next.config.js/rewrites

rewrites: async () => [
...nextI18NextRewrites(localeSubpaths),
{ source: '/api/:path*', destination: 'http://localhost:8080/:path*' },
],

I'm curious how this setup will function in production where the URL won't be localhost.

When specifying the destination, should I include the full domain or will separate rewrite rules be needed for dev and production environments?

javascriptproxyurl-rewritingnext.js

Answer №1

To modify the destination, simply eliminate the domain section and employ an absolute path.

rewrites: async () => [
  ...nextI18NextRewrites(localeSubpaths),
  { source: '/api/:path*', destination: '/:path*' },
  // ------------------------------------^
];

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

Error encountered in Ubuntu while attempting to run a Python script within a Node.js/Express application: spawn EACCES

Recently, I set up a node.js server to run a python script using the python-shell . However, after migrating from Windows to Ubuntu, an EACCES error has been persistently popping up. Despite my attempts to adjust permissions and troubleshoot, I haven' ...

javascriptpythonnode.jsubuntuexpress

Having trouble selecting an element by name that contains a specific string followed by [..] using jQuery

I have elements with names like kra[0][category], kra[1][category], and so on. However, I am facing difficulties in selecting these elements by name. Here is my jQuery code: $("[name=kra[0][category]]").prop("disabled", true); ...

javascriptjquery

Retrieve information from a URL to transmit to a different page in NextJS using Typescript and AppRouter

I'm struggling with transitioning from the Home page to the Detail page. I've successfully passed data to the URL from the Home screen, but I'm having trouble accessing it in the Detail screen. I'm working with NextJS ver 13, using Type ...

typescriptnext.jsapp-router

Initiating an audio call exclusively via SimpleWebRTC

I'm currently utilizing a jQuery plugin for WebRTC found here. My goal is to initiate an audio call only, but I am struggling to find a function within the plugin that allows for this. The code snippet I am using with autoRequestMedia set to false is ...

javascriptjqueryhtmlwebrtchtml5-audio

Struggling to understand the intricacies of MobX in conjunction with Next-Auth? Let

Below are the essential dependencies along with their versions from my package.json file: "mobx": "^6.5.0", "mobx-react": "^7.3.0", "next": "12.1.6", "next-auth": "4.2.1", &qu ...

next.jsmobxnext-auth

Jumping over loop iteration following a JavaScript catch block

Currently, I am developing an API that requires making repeated calls to another API (specifically, Quickbooks Online) within a loop. These calls are encapsulated in promises that either resolve or reject based on the response from Quickbooks. Everything f ...

javascriptforeachpromiseasync-await

I recently incorporated Puppeteer along with its necessary dependencies onto Heroku, and as a result, pushing my small app to Heroku now takes approximately 5 to 6 minutes

I am currently using Puppeteer to create a PDF from an HTML page. I installed the npm package by running the following command: npm i puppeteer However, when I deployed to Heroku, I encountered an error: Error while loading shared libraries: libnss3.s ...

javascriptnode.jsherokupuppeteer

The jQuery Deferred feature on Ajax is failing to properly pass the array in the data option as an array, instead converting

I am facing an issue in my application where I want to use jQuery deferred to handle Ajax success and error uniformly from a central location. It works perfectly fine when I pass strings in the data option, but when I try to pass an array, it gets sent as ...

javascriptjqueryajaxarraysjquery-deferred

Unleashing the full power of Node.JS asynchronous operations

I've been struggling to grasp how to effectively manage the asynchronous nature of Node.JS. Despite reading extensively on the topic and experimenting with message passing and callback functions, I can't seem to get my object constructor to load ...

javascriptnode.jsasynchronous

Arranging numerous Text elements within a solitary Drag and Drop container with the z-index property

I am facing a challenge with stacking twelve arguments in no particular order on a drag and drop element. The texts overlap each other, making it difficult for the end user to see them clearly when dragging and dropping. Is there a way to stack texts using ...

javascripthtmlcss

How can the front design of Material-UI's Card header be customized?

Currently, I am facing an issue with the Material-UI card header as the background color is affecting the readability of the default font. My aim is to use the typography prop h4 for the header, but I am struggling to achieve this. https://i.stack.imgur.c ...

javascripthtmlcssreactjsmaterial-ui

What is the most efficient way to calculate the sum of all the numbers lying between the endpoints

I am faced with a complex array The array looks like this: let arr = [[2, "OR", 22, 22, "OR", 22, 20], [300, "OR", 22, 300, "OR", 22, 22, "OR", 1], [1212, 2, "OR", 1]] My goal is to extract and ...

javascript

Prevent background music from being manipulated

I've implemented an audio HTML element with background music for a game: <audio class="music" src="..." loop></audio> However, I have encountered an issue where upon loading the page, I am able to control the music usi ...

javascripthtmlaudio

What could be causing the directives module to not get properly incorporated into the Angular app module?

I am currently in the process of learning Angular and have come across some challenges with module resolution. In js/directives/directives.js, I have a directive scoped within a directives module: angular.module("directives").directive("selectList", funct ...

javascriptangularjs

What is the best way to add a change event to a textarea that is already applied with a filtered one-way binding?

I have a text area that is already linked with a filter, so it will display the correct information when the page loads. Now, I want to update a model when the text area content changes. However, when I add a model and change event, the initial binding sto ...

javascriptangularjs

"Troubleshooting issue: Popup in react-leaflet fails to display upon clicking

Currently, I have integrated react-leaflet into my ReactJS application to dynamically create markers with popups. However, when implementing the code as shown below, the popup box fails to display and an error message appears in the web developer console. ...

javascriptreactjsleafletpopupreact-leaflet

Having trouble importing post-processing effects from Three.js

Every time I attempt to execute this code within my React application, it fails with the following error message: SyntaxError: Cannot use import statement outside a module import React, { useRef, useEffect } from 'react' import { extend, useThre ...

reactjsthree.jsnext.jsreact-three-fiber

How can you identify when a Vuetify radio button is re-selected?

Currently, I am developing a wizard that involves triggering navigation when a radio button is selected. Users should also be able to go back and change their previous choices. However, one issue I have encountered is the difficulty in detecting a re-selec ...

javascriptvue.jsvuetify.js

Is there a way to execute a callback function once the page has finished loading through AJAX in

I'm in need of a way to attach new events and execute certain functions on a webpage that loads dynamically. Unfortunately, the resources I've found so far are outdated or lack necessary details (even the jqm docs). My current setup involves jQue ...

javascriptjqueryjquery-mobile

Error in Next.js: .env variable not defined

I recently transitioned my project from React to Next.js and encountered an issue where my environment variables are showing as undefined, even though they were functioning correctly in React. Can someone provide some guidance or assistance with this probl ...

javascriptreactjsnext.jsnext.js13