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

What to do when the 'image' property in Next.js next/image has an implicit 'any' type and needs fixing?

I'm a newcomer to Next.js and TypeScript and I can't seem to find any helpful resources on resolving this particular issue: import Image from 'next/image'; export default function Item({ image }) { // <-- parameter image needs a &ap ...

javascriptreactjstypescriptnext.jsfrontend

Navigating through the year selection with your keyboard

By default, a dropdown menu containing years allows for keyboard navigation. For example, if you type in 1992 while the dropdown is selected, it will automatically move to that specific year option. I am curious to know if there is a way to activate a two ...

javascriptjqueryjquery-plugins

Utilize the splice function when resizing the window based on specific breakpoints

On a series of div elements, I have implemented some JS/jQuery code that organizes them by wrapping every three elements in a container with the class .each-row. <div class="element"></div> <div class="element"></div> <div class ...

javascriptjqueryhtmlcss

Cypress: Uncovering the method invoked by a button click

I'm currently utilizing Vue3 with Vite and Cypress. My Vue3 component utilizes the script setup SFC syntax. Below is the code snippet for my component: <template> <div> <button data-cy="testBtn" @click="btnClick()&q ...

javascripttypescriptvue.jscypresscypress-component-test-runner

Exploring the functionality of Radar Chart within a React component

Within the index.html file that is being utilized, there exists a javascript code specifically designed for the chart function. <script src="js/plugins/chartJs/Chart.min.js"></script> var radarData = { labels: ["In Perso ...

javascriptreactjschartschart.js

Tips on verifying the count with sequelize and generating a Boolean outcome if the count is greater than zero

I'm currently working with Nodejs and I have a query that retrieves a count. I need to check if the count > 0 in order to return true, otherwise false. However, I am facing difficulties handling this in Nodejs. Below is the code snippet I am strugg ...

javascriptnode.jssequelize.js

Is it impossible to access the length property of an undefined variable?

After developing a function that calculates the length of a string entered into an HTML textbox, I encountered an error when trying to display the result in another textbox. The function is designed to get the value from the 5th textbox on my HTML page and ...

javascriptbuttontypesonclick

What is the name of the JavaScript code editor that includes line numbering for plain text?

Looking to incorporate a text area with line numbering features. I experimented with EditArea, but encountered difficulties when working with text files. While syntax highlighting for various programming languages would be a nice touch, my primary focus ...

javascripteditorwysiwygline-numbersplaintext

Hide other dropdown when one dropdown is clicked

I am currently working with a dropdown data-filter in combination with the isotope plugin. My goal is to have the ability to close an open dropdown when another list item is clicked, and also have the arrow twirl down when the dropdown is open. I am seek ...

javascriptjqueryhtmldrop-down-menu

Webpack does not support d3-tip in its current configuration

I'm having some trouble getting d3-tip to work with webpack while using TypeScript. Whenever I try to trigger mouseover events, I get an error saying "Uncaught TypeError: Cannot read property 'target' of null". This issue arises because th ...

javascriptd3.jstypescriptwebpack

Unable to locate module '@utils/prisma' or its associated type declarations.ts(2307)

If you encounter a comparable issue in your Next.js project where TypeScript cannot locate the module @utils/prisma or its related type declarations, there is a potential solution. Simply open your Visual Studio Code terminal and execute the command: npx ...

next.js

Encountering challenges with the angular2-infinite-scroll plugin

I encountered 2 errors while using my application: Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3002/angular2-infinite-scroll angular2-polyfills.js:1243 Error: XHR error (404 Not Found) loading htt ...

javascriptangularjsangularnpm

Postponing the findings of a database for a quarter of an hour

Hey there, I'm a new coder and like to dabble in a bit of everything, so go easy on me! So, here's the deal: data from a poker tournament is constantly being updated in a database, but we're delaying the video feed by 20-25 minutes to preve ...

javascriptphpmysqlajax

Using Vue to alter data through mutations

Greetings! I am currently in the process of developing a website for storing recipes, but as this is my first project, I am facing a challenge with modifying user input data. My goal is to create a system where each new recipe added by a user generates a u ...

javascripthtmlcssvue.jsvuex

Guide to getting Material-UI Dialog up and running smoothly in your React application

I'm currently working on a project using material-UI, and I'm having trouble with the Dialog component not working properly. Despite trying various solutions, I haven't been able to get it to function correctly in my React application with m ...

javascripthtmlreactjsreact-reduxmaterial-ui

Struggling with determining the perfect transition speed for the sidemenu display

I'm a newcomer to web development and facing an issue with setting the transition speed for opening and closing this side menu. Despite adding transitions in the CSS and specifying duration in the Javascript, the menu continues to open instantly. I di ...

javascripthtmlcss

Assigning nested JSON values using Jquery

My JSON data structure is as follows: { "Market": 0, "Marketer": null, "Notes": null, "SalesChannel": null, "ServiceLocations": [ { "ExtensionData": null, "AdminFee": 0, "CommodityType": 0, ...

javascriptjqueryajaxjson

The name 'SafeUrl' cannot be located

I'm working on resolving the unsafe warning in the console by using the bypassSecurityTrustUrl method, but unfortunately, I keep encountering an error. user.component.ts import {Component,OnInit} from '@angular/core'; import { DomSanitizer ...

javascripthtmlangularionic2

Combining photos seamlessly and bringing them to life through animation upon window loading

My main goal is to seamlessly fit the images together, but I'm struggling to achieve this. I tried using masonry, but unfortunately it didn't work for me. All I want is to tightly pack the divs together. For instance, in my fiddle example, I woul ...

javascriptjqueryhtmlcss

Dealing with an unexpected quantity of parameters in a jQuery.when.apply situation

Being new to programming in JavaScript, I am looking for a way to trigger multiple requests while preserving the order and ignoring any errors. After researching the documentation and code, I have come up with the following pattern: var requests = []; for ...

javascriptjquery