How to push user to external (incomplete) URL. i.e google.com NEXTJS

Question

Im trying to push a user to an external url but that problem is that the url is incomplete, for example it may look like this: google.com If I used link or even just an tag in Nextjs, it will only link the user to an internal page. I want the user to be redirected to an external page. Here is my Code:

<a href={`${data.link}`}>
    <div className={css.visitLinkContainer}>
        Visit Link
    </div>
</a>

The data.link may have a url that is incomplete like this: google.com. How can I go around this problem?

Have you checked on here https://stackoverflow.com/questions/58173809/next-js-redirect-from-to-another-page — geobudex, May 26 '21 at 16:30
hello, im trying to redirect users to an external site, this forum only talks about internal pages, thanks anyway — Cloyd Abad, May 26 '21 at 16:34
You could consider using nextjs-redirect libray ( https://www.npmjs.com/package/nextjs-redirect ) — geobudex, May 26 '21 at 16:40
Are the URLs always external and incomplete? You could parse them and prepend `https://` to the URLs that need it. — juliomalves, May 29 '21 at 02:29

Sean W · Accepted Answer · 2021-08-06T18:24:02.397

By default, browsers use relative URLs. You can tell the browser to use an implicit protocol by prepending //.

<a href={`//${data.link}`}>Visit Link</a>

If some of your URLs can contain the protocol (http[s]) you will need to remove it first.

const href = new URL(data.link).host;
<a href={`//${href}`}>Visit Link</a>

Additional considerations when linking to external domains - if you link to an external domain and use target="_blank" you should also set rel="noreferrer" to protect your user's privacy and increase site security.

score 0 · Answer 2 · answered Jun 19 '21 at 15:15

0

You could consider using nextjs-redirect libray

answered Jun 19 '21 at 15:15

geobudex

536
1
8
24

How to push user to external (incomplete) URL. i.e google.com NEXTJS

2 Answers2