CODEWITHSUNDEEP
reverse-proxynext.js13nextjs-rewrites
Martin Lupa
Martin Lupa

Reputation: 89

NextJS rewrite to publicly accessible app not working

I am reaching out since I am working on migrating a reverse proxy deployed using AWS to a NextJS app, by using the support Next has on redirects/rewrites. The goal is to use the NextJS app as the entry point for the remaining apps, which are autonomous full-stack applications.

The issue I am trying to solve is that the apps I need to rewrite to are publicly accessible through a url, but when accessing them through a rewrite, some or most of the functionality is lost, or they do not even load.

I understand that this might be a CORS issue to prevent the website we are requesting to, to make requests to other origins that might potentially be malicious. This is maybe a conceptual misunderstanding from my side, but I am a student developer and some concepts still scape from me.

How can I assess that this is, in fact, a CORS issue? And given that this might be the case, then the solution would be to ask the owner of such app to include this Next app in the Access-Control-Allow-Origin header?

Thanks for your help.

Upvotes: 0

Views: 371

Answers (1)

Martin Lupa
Martin Lupa

Reputation: 89

After some research and work on this task, I would like to share my findings and explain how I came up to a solution that suits my use case. Hoping it can be helpful to somebody else in the same process.

Problem: I want a Next.JS platform to work as a reverse proxy, allowing me to connect multiple independent apps while providing a unified user experience and being able to control what url I am showing to the client.

Solution: use Next.JS built in support for rewrites inside next.config.

How I did it:

Configuring a rewrite in NextJS might require more than one rule by app.

  • First we configure a base rewrite: as documentation in Vercel suggests in rewriting to an external URL section.

With this setup we can see in the browser’s developer tools that the HTML document is being retrieved correctly, but neither JavaScript, CSS, nor font files are being loaded correctly.

  • Configure further rewrite rules to allow loading scripts and assets.

Rewriting to an app in the use cases I have required a set of multiple rules. This following example shows the logic behind them:

// .html doc
{
  source: '/some-path',
  destination: 'https://some-host.com/some-path/:path*/',
},
// .js and .css scripts
{
  source: '/some-path/scripts/:path*',
  destination: 'https://some-host.com/some-path/scripts/:path*',
},
// images
{
  source: '/some-path/images/:path*',
  destination: 'https://some-host.com/some-path/images/:path*',
},
// fonts
{
  source: '/some-path/fonts/:path*',
  destination: 'https://some-host.com/some-path/fonts/:path*',
},

Upvotes: 0

Related Questions