Next.js automatically adds the current path as a prefix to any external site links

I'm encountering a strange issue with a link in a Next.js component that leads to a profile/:id page:

<Typography style={linkStyles} variant='body2' color='text.secondary'>
  <Link href={user.website}>
    <a target='_blank'>{user.website}</a>
  </Link>;
</Typography>

The URL path currently looks like 

https://localhost:3000/users/someid

But when I click on a user's website link, such as www.test-site.com,

The path unexpectedly changes to 

https://localhost:3000/users/www.test-site.com

Any insights into why this might be happening?

javascriptnext.js

Answer №1

Concerning NextJs's <Link> component and external links, it appears that the component does not handle them. To include links to external sites, it is recommended to utilize a standard <a> element or custom redirects which can be configured in the next.config.js file (which seems to be the preferred method). Further information on this feature can be found here.

Answer №2

@barmar's response is spot on. Simply add the href attribute to either a Link or an a tag with //. Here's an example:

<Link href={`//${url}`} rel="noopener noreferrer" target="_blank"> {url} </Link>

or

<a href={`//${url}`} rel="noopener noreferrer" target="_blank"> {url} </a>

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

Deciphering the Cause of mapStateToPropsCall in Redux and React

When handling an unsuccessful http call resulting in an error message being displayed, I encounter subsequent state changes triggering multiple render calls. Is there a technique to identify the cause of these state changes and mapStateToProps calls? Alter ...

javascriptreactjsreduxreact-redux

Response: "Merge Button Not Found Error in GitHub API Pull Request Merge"

When attempting to utilize the Github Merge Pull Request (Merge Button), I am encountering a 404 Not Found response both in Postman and my application. Despite confirming that the :owner, :repo, and :number are correct. https://api.github.com/repos/:owner ...

javascriptreactjsgithub-api

Changing a PHP array into Javascript format

Is there a way to transform a PHP array structured like this Array ( [0] => 001-1234567 [1] => 1234567 [2] => 12345678 [3] => 12345678 [4] => 12345678 [5] => AP1W3242 [6] => AP7X1234 [7] => AS1234 ...

phpjavascriptarrays

What is the significance of [Function: bound ] in the context of node debugging?

So I was trying to debug my .js file using node debug and when I used catch(error) { It only displayed [Function: bound ] when I tried console.dir(error) What is causing this issue? How can I access the full error object? And how do I retrieve the stack ...

javascriptnode.js

What is the reasoning behind having two separate permission dialog boxes for accessing the webcam and microphone in flash?

I am currently using a JavaScript plugin known as cameratag () in order to record videos through the web browser. This plugin utilizes a flash-based solution. When the flash application requests permission to access the webcam, it presents a security dialo ...

javascriptflashactionscriptwebcammicrophone

"Three.js rendering issue: Particle sphere appearing as a straight line instead of a sphere

Exploring the world of THREE.js library has led me to attempt creating a particle sphere within my React App. Drawing inspiration from this project, I've made some progress but seem to have hit a roadblock. Strangely, despite similarities in code - e ...

javascriptthree.js

Issue 415: The battle between x-www-form-urlencoded and JSON

The online application allows for 'application/json' format, however when using .ajax() with dataType set to 'json', it attempts to send data in 'application/x-www-form-urlencoded' format. What could be causing this behavior? ...

javascriptjqueryajaxweb-services

Is it possible to accomplish the following behavior when arranging an array of strings?

My array is structured as follows: let arr = ['A1.1', 'A1.3', 'A1.2', 'A1.1 (2)', 'A1.3 (2)', 'A1.2 (2)', 'A1.1 (3)', 'A1.3 (3)', 'A1.2 (3)'] After using the sort() ...

javascriptarraysangularsorting

What is the best approach for implementing a getworldposition functionality with Three.js?

Looking for a way to create a getWorldPosition function in Three.js that will return a vector? This is the code I have to obtain the World Position of an object (obj) and store it in the vector vec. obj.updateMatrixWorld(); var vec = new THREE.Vector3(); ...

javascriptthree.js

JavaScript code for initiating the npm start command

Is it possible to include the npm-start command in a JavaScript script? Requirement: Develop a JS script capable of triggering the npm-start command. Operating System: Microsoft Windows I need to turn it into a Windows service. However, in the code snip ...

javascriptnode.jsnpmnpm-start

Creating Structure with Highcharts - Sorting Through Unprocessed Data

In reviewing various demos of highcharts, I noticed that they all tend to adhere to a fairly straightforward data structure: Categories,Apples,Pears,Oranges,Bananas John,8,4,6,5 Jane,3,4,2,3 Joe,86,76,79,77 Janet,3,16,13,15 However, the data I have doesn ...

javascripthighcharts

Identifying the Back Button in Vue-Router's Navigation Guards

For my specific situation, it is crucial to understand how the route is modified. I need to be able to detect when the route changes due to a user clicking the back button on their browser or mobile device. This is the code snippet I currently have: rout ...

javascriptcordovavue.jsvuejs2vue-router

Embedding JQuery within a PHP file

Recently, our inventory web page was coded in PHP by someone else. I've been working on integrating a jQuery function into the webpage that displays a description whenever a barcode is scanned. While testing on jsbin.com everything works perfectly, bu ...

javascriptphpjquery

Encountering a "Connection Refused" error when attempting to test a React and Express application

Currently, I am developing an order system using React for the frontend (port 3000) and Express for the backend (port 3001). Everything functions perfectly when tested on the same MacBook that hosts the node project. However, when testing it on a differen ...

javascriptnode.jsreactjsexpressjsx

Is it possible to directly update the label text in AngularJS from the view itself?

I found the following code snippet in my HTML <span ng-class="newProvider ? 'newProvider' : ''" class="help-block"> {{ 'new-product.provider.helper' | locate }} </span> Whenever newProvider is se ...

javascriptangularjs

Mongoose: strange outcomes observed when trying to delete the final element from an array

Update: I made a change in my approach by filtering the array directly and saving it instead of using updateOne and $pull. Surprisingly, this fixed the issue of html elements getting removed. However, the same problem persists when deleting the last item i ...

javascriptnode.jsexpressmongoose

Struggling with a peer requirement for grunt@~0.4.0 during the installation of grunt plugins? Here's how to resolve

I recently tried to set up some Grunt plugins such as grunt-contrib-clean and grunt-contrib-watch using the commands npm install grunt-contrib-clean --save-dev and npm install grunt-contrib-watch --save-dev However, I encountered the following warnings: n ...

javascriptnpmgruntjsgrunt-contrib-watchgrunt-plugins

using ajax to fetch a file from laravel

My goal is to download a file by sending necessary parameters through an ajax request. In the process, I saved the output file in the public/exports directory and attempted to redirect to that file path in the success callback. public function downloadRe ...

javascriptajaxlaravelmaatwebsite-excel

Two tags attached to four hypertext links

Within my HTML code, I have hyperlinks present on every line. However, I am seeking to eliminate these hyperlinks specifically from "your previous balance" and "your new balance".https://i.sstatic.net/ekVGT.png In the following HTML snippet: <tr *ngFor ...

javascriptangulartypescript

Image not showing up on HTML page following navigation integration

Having trouble with my responsive website setup - the background image for ".hero-image" isn't showing up after adding the navigation. Google Chrome console is throwing a "Failed to load resource: the server responded with a status of 404 (Not Found)" ...

javascripthtmlcss