Next.js rewrites are functioning properly, however, there seems to be an issue with locating the Javascript

I am currently in the process of setting up multiple Vercel/Next.js projects under one domain, as recommended in this helpful guide.

Given that each of my apps have unique requirements, it makes sense for me to separate them into their own projects.

The main Next.js project will be running on mysite.com. This project includes rewrites to the other projects:

const rewrites = async () => [
  {
    source: "/topic/",
    destination: "https://forums.mysite.com/topic/",
  },
  {
    source: "/topic/:match*",
    destination: "https://forums.mysite.com/topic/:match*",
  },
];

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  rewrites,
};

module.exports = nextConfig;

While these rewrites are somewhat functional, there seems to be an issue. When I try to access mysite.com/topic/, Next.js attempts to load content from forums.mysite.com, but fails to display it properly due to missing JavaScript scripts resulting in a 404 error.

Essentially, it is trying to fetch scripts from forums.mysite.com on the domain of mysite.com, where they do not exist.

Is there a workaround for this situation? It appears to be a significant oversight, despite being suggested as the method by Next.js in their documentation.

Any suggestions on how to resolve this issue?

javascriptnext.jsvercel

Answer №1

After investigating, it turns out that the root cause of this problem lies in the way Next.js loads its scripts. The paths are all hardcoded to be absolute to the root directory (/_next/script instead of being relative like 

https://mywebsite.com/_next/script
).

The resolution to this issue involves utilizing the assetPrefix configuration:

const nextConfiguration = {
  rewrites,
  assetPrefix: 'https://mywebsite.com',
};

module.exports = nextConfiguration;

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

Rows that have been removed from an HTML table remain within the ReactDOM

After diving into JavaScript three months ago, I recently began learning React.js just two days back. While creating a simple TODO app, I noticed that when deleting a row, it disappears from the DOM but not from the React DOM. Can anyone shed some light ...

javascripthtmldomreactjs

Code is not running in ReactJS

My challenge is to use canvas and script to draw a rectangle with one diagonal line. However, when I try to do so, only the rectangle appears on my browser. It seems like the script is not being executed. Here's the code: import React, { Component } ...

javascripthtmlreactjsreact-redux

What methods are available for incorporating JavaScript classes from separate files into HTML while maintaining compatibility with IOS?

Currently, I find myself in a situation where I am required to utilize classes from JavaScript across various js files. For instance, there is a class named Panel located within the file js/radar-home.js. Below is how I am currently utilizing the class wit ...

javascriptioslaravel

How can you limit access to certain routes in Nuxt.js to only clients who possess a valid JWT token?

In Nuxt.js, implementing authentication can be done in the following steps: The client authenticates by sending its credentials in an HTTP request to a specific API route in the Nuxt backend; The Nuxt backend responds with a JWT token for accessing protec ...

javascriptvue.jsauthenticationnuxt.jsbackend

Messaging through Express.js via whatsapp-web.js is not working on the server

After successfully confirming the QR code with my phone, the console displays "READY," but I encounter a "404" error when sending a JSON request to the "/sendmessage" endpoint. The same issue arises when accessing the "/getqr" endpoint. Despite referencing ...

javascriptnode.jsjsonexpresswhatsapp

I am having trouble understanding why my GraphQL query is not retrieving any data from the WordPress GraphQL API when using SWR

I have created a query to retrieve my WordPress navigation menus using the WordPress graphql plugin along with swr, graphql, graphql-request, and next.js on my local files. When I add the query on the wp-grphql section of my site, I am able to successfully ...

javascriptwordpressgraphqlnext.js

Elevate sublevel vue component

I am facing an issue with a nested and reused vue component. I am attempting to use v-show to display a part of the component (icons) when its outer parent is hovered. In order to achieve this, I am passing the parent and child index as props. However, I ...

javascriptvue.js

Sequentially run jQuery functions

function functionOne() { $('#search-city-form').trigger('click'); } function functionTwo() { $("form input[name='tariffId']").val("137"); $('#search-city-form').trigger('click'); } function funct ...

javascriptjquery

Is there a way to integrate Rust WebAssembly into NextJS?

Currently, in my Next.js project, I am utilizing the following: import { greet } from "backend"; The dependencies listed in my package.json are as follows: "dependencies": { "backend": "file:../backend/pkg", "next": "11.1.2", "react": "17.0.2", "react-dom ...

next.jswebassembly

Reinitializing a form with jQuery validation inside a modal box

While utilizing jQuery Validate in a form within a jQuery dialog, I am encountering an issue. Upon closing the dialog, I aim to clear all form fields and reset any fields with error feedback displayed. Although the fields are being reset to blank as expec ...

javascriptjquerydialog

Error: Attempting to access the 'headers' property of an undefined variable in a next.js application router

Following the recommendations from the comments, I have updated the code (still encountering the same error): const bcrypt = require("bcrypt") const User = require("../../model/userModel") export async function POST(req: NextRequest) { ...

javascriptreactjsnext.js

The NWjs iteration of Bad Time Simulator is having trouble playing background music

Recently, I came across an interesting online game and decided to try my hand at modding it. However, I faced challenges while modifying the source code on Github - the pages took too long to load and my browser cache seemed impossible to clear. In a ...

javascripthtmlaudiooggnwjs

The initial result from reactQuery may start off as undefined, but eventually it will provide the data as

Currently, I am working on fetching data using reactQuery and storing the response in a variable when clicked. const { data: response, refetch } = useQuery({ queryKey: ['get-response'], queryFn: async() => { return await Axios ...

javascriptreactjsreact-query

Mongoose - Mastering the Art of Executing Multiple Update Statements in a Single Operation

In the MongoDB documentation, I found out that you can execute multiple update statements in a single command. How can this be accomplished with Node.js and Mongoose? db.runCommand({ update: <collection>, updates: [ { q: <q ...

javascriptnode.jsmongodbmongoose

The export button in the React Material Table doesn't seem to be displaying correctly

[I am encountering an issue with the React export button in Material Table. The bar is not showing completely. My code includes the following: options = {{exportButton:true}} How can I resolve this?]1 ...

javascriptreactjsmaterial-uimaterial-table

What is the best way to load images into dynamically generated divs?

I recently wrote a code snippet that dynamically creates divs based on the number of text files found in a local directory. However, I encountered an issue while trying to add code to append photos to each of these created divs. Unfortunately, the photos ...

javascriptjqueryajax

Adding react-hook-form as an external library in webpack: A step-by-step guide

I'm currently working on a form where I'm trying to integrate react-dropzone with react-hook-form. In order to achieve this, I referred to a Github discussion found here: https://github.com/react-hook-form/react-hook-form/discussions/2146. Howeve ...

reactjswebpacknext.jsreact-hook-form

Enhance npm package by implementing custom functionality with React Component

I have designed an app that bears a striking resemblance to the following code: class MyCustomApp extends React.Component { constructor (props) { super(props) this.state = { tags: [ { id: 1, name: "Oranges" }, { id: 2, ...

javascriptreactjsreact-nativenpmtags

Leveraging the combination of <Form>, jQuery, Sequelize, and SQL for authentication and navigation tasks

My objective is to extract the values from the IDs #username-l and #pwd-l in an HTML form upon the user clicking the submit button. I aim to compare these values with those stored in a SQL database, and if they match exactly, redirect the user to a specifi ...

javascriptjqueryhtmlsqlsequelize.js

Slideshow: I hope the Radio Button triggers the appearance of the next item in the rotation

I need to implement a carousel that displays the next item (Id="item2") when a specific radio button (Id="item1") is selected by default and another radio button (Id="item2") is pressed. Ideally, I would like to achieve this ...

javascriptlaravelbootstrap-5