Next.js Discord

Discord Forum

Rewrites to external URL not working for me

Answered
Gabriel Moresco posted this in #help-forum
Open in Discord
Gabriel MorescoOP
Hello guys, I have a system made in React Native Web (https://app.favorito.digital) using Expo, and my website in NextJS (https://favorito.digital).

I want to redirect my website users when entering the /app path to my React Native system.

I did the following rewrite in next.config.js.
/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/app',
        destination: 'https://app.favorito.digital',
      },
    ]
  },
}

module.exports = nextConfig


But when entering the /app path, an error occurs when directing. This rewrites is on my production website, so you can test it.
Answered by joulev
How to fix: also rewrite the assets required to load the page, or use absolute url (with the domain) inside your app.domain.com static asset URLs
View full answer

49 Replies

Common paper wasp
I also need that, please help
Australian Freshwater Crocodile
Rewrites can't be used for that. Docs: 

Rewrites act as a URL proxy and mask the destination path, making it appear the user hasn't changed their location on the site. In contrast, redirects will reroute to a new page and show the URL changes.


You want to use redirects, altough im not 100% sure it will work for external URLS

https://nextjs.org/docs/app/api-reference/next-config-js/redirects
Gabriel MorescoOP
But there is an example in Next.js docs
I did the same way, but is not working
Australian Freshwater Crocodile
link?
Australian Freshwater Crocodile
Ok, sorry about the misinformation.

I had a look in yourwebsite. The problem seems to be that your redirect is owrking fine. but then the website is looking for other resources like https://favorito.digital/static/js/663.faae7576.js and cannot find them there. They are available on https://app.favorito.digital/static/js/663.faae7576.js

To fix this, I suggest changing from a rewrite to a redirect. Alternatively. you can add more rewrites for these paths... but this can get messy.
you could try with 

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/app',
        destination: 'https://app.favorito.digital',
      },
      {
        source: '/app/:path*',
        destination: 'https://app.favorito.digital/:path*',
      },
    ]
  },
}

module.exports = nextConfig
Gabriel MorescoOP
I already tried that, but when i add the /app/somethinhere, next move to not found page
https://cln.sh/gmqR8kSY
i recorded a video here
The app.favorito.digital/somethinghere link is added to most of our customers, so if i could change to favorito.digital/app/somethinghere i think my SEO backlinks will improve
@Gabriel Moresco I already tried that, but when i add the `/app/somethinhere`, next move to not found page
Australian Freshwater Crocodile
Can you show the redirect you are using. Can you try with a path you know exists? Like the one I posted above?
https://cln.sh/X7RMjq95
this is a real example
Australian Freshwater Crocodile
You can see something else is in play on that video, you are being reidrected from /app/nordenbleau to /nordenbleau Could it be that on the real next config you have another redirect?
Gabriel MorescoOP
/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/app',
        destination: 'https://app.favorito.digital',
      },
      {
        source: '/app/:path*',
        destination: 'https://app.favorito.digital/:path*',
      },
    ]
  },
}

module.exports = nextConfig
this is my entire next.config.js
Australian Freshwater Crocodile
as a test, can you try with a more specific path? 

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/app',
        destination: 'https://app.favorito.digital',
      },
      {
        source: '/app/nordenbleau',
        destination: 'https://app.favorito.digital/nordenbleau',
      },
    ]
  },
}

module.exports = nextConfig


this will test if the issue is with the path matching, or if there is something else at play
Gabriel MorescoOP
same behavior, redirecting to not found page 😦
Gabriel MorescoOP
sorry!
Australian Freshwater Crocodile
is this also happening in a dev environemnt?

could it be you have a redirect in place with the name service? This is not my area of expertise... but it could be the case
joulev
How to fix: also rewrite the assets required to load the page, or use absolute url (with the domain) inside your app.domain.com static asset URLs
Answer
Gabriel MorescoOP
hummm, i will try to do that, thanks
@joulev How to fix: also rewrite the assets required to load the page, or use absolute url (with the domain) inside your app.domain.com static asset URLs
Gabriel MorescoOP
what do you mean with or use absolute url (with the domain) inside your app.domain.com static asset URLs?
How to do that depends on how you built your app.domain.com and it may not be easy
Gabriel MorescoOP
I use React Native Web with Expo, i will search how to do that
I added two new rewrites and worked

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/manifest.json',
        destination: 'https://app.favorito.digital/manifest.json',
      },
      {
        source: '/static/:path*',
        destination: 'https://app.favorito.digital/static/:path*',
      },
      {
        source: '/app',
        destination: 'https://app.favorito.digital',
      },
      {
        source: '/app/:path*',
        destination: 'https://app.favorito.digital/:path*',
      },
    ]
  },
}

module.exports = nextConfig
/manifest.json and /static/:path*
but when trying to go to /app/somethinghere redirects to not found page
any idea why?
https://cln.sh/jVhj88Cb
i recorded the case
      {
        source: '/app/:path*',
        destination: 'https://app.favorito.digital/:path*',
      },
i had this rewrite
joulev
interesting....
i can reproduce that too
@Gabriel Moresco any idea why?
joulev
ok cause found, this is a pretty nasty bug.

* /app/somethinghere
* rewritten to https://app.domain.com/somethinghere but the domain remains domain.com
* redirected to /somethinghere/ because of the trailing slash handling
* browser makes request to domain.com/somethinghere/ which 404
you need to handle the trailing slash explicitly too
i suppose you can do it in either the nextjs side or the expo app side
@joulev you need to handle the trailing slash explicitly too
Gabriel MorescoOP
I tried that, but not works, can you help me?

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/manifest.json',
        destination: 'https://app.favorito.digital/manifest.json',
      },
      {
        source: '/static/:path*',
        destination: 'https://app.favorito.digital/static/:path*',
      },
      {
        source: '/app',
        destination: 'https://app.favorito.digital',
      },
      {
        source: '/app/:path*',
        destination: 'https://app.favorito.digital/:path*',
      },
      {
        source: '/app/',
        destination: 'https://app.favorito.digital/',
      },
      {
        source: '/app/:path*/',
        destination: 'https://app.favorito.digital/:path*/',
      },
    ]
  },
}

module.exports = nextConfig
@Gabriel Moresco I tried that, but not works, can you help me? js /** @type {import('next').NextConfig} */ const nextConfig = { async rewrites() { return [ { source: '/manifest.json', destination: 'https://app.favorito.digital/manifest.json', }, { source: '/static/:path*', destination: 'https://app.favorito.digital/static/:path*', }, { source: '/app', destination: 'https://app.favorito.digital', }, { source: '/app/:path*', destination: 'https://app.favorito.digital/:path*', }, { source: '/app/', destination: 'https://app.favorito.digital/', }, { source: '/app/:path*/', destination: 'https://app.favorito.digital/:path*/', }, ] }, } module.exports = nextConfig
joulev
try
/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/manifest.json',
        destination: 'https://app.favorito.digital/manifest.json',
      },
      {
        source: '/static/:path*',
        destination: 'https://app.favorito.digital/static/:path*',
      },
      {
        source: '/app',
        destination: 'https://app.favorito.digital',
      },
      {
        source: '/app/:path*',
        destination: 'https://app.favorito.digital/:path*/',
      },
    ]
  },
}

module.exports = nextConfig;
note: depending on how you build app.favorito.digital, this may stop working in the future if the way that app handles trailing slash changes. but as of now, this works well
Gabriel MorescoOP
Solved ✅🙏🏻
Thank you so much @joulev