How can I add a link to an external url with nextjs 13? do I still use next/link?
#How to link to external url
hallow thorn
cyan pilotBOT
Hi @hallow thorn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
In Next.js 13, you can still use the next/link component to link to external URLs. However, the way you use it has changed slightly. You no longer need to manually add an <a> tag as a child. Instead, next/link will automatically render an <a> tag for you. Here's an example:
import Link from 'next/link'
// Next.js 13: `<Link>` always renders `<a>`
<Link href="<https://external-website.com">>
External Website
</Link>
However, if you want to rewrite a specific route of your application to an external URL, you can use the rewrites feature in your next.config.js file. This is especially useful for incrementally adopting Next.js. Here's an example:
module.exports = {
async rewrites() {
return [
{
source: '/blog',
destination: '<https://example.com/blog',>
},
{
source: '/blog/:slug',
destination: '<https://example.com/blog/:slug',> // Matched parameters can be used in the destination
},
]
},
}
In this example, accessing /blog in your application will redirect to <https://example.com/blog.>
Sources:
- Next.js 13 Announcement (https://nextjs.org/blog/next-13)
- Rewrites Documentation (https://nextjs.org/docs/pages/api-reference/next-config-js/rewrites)
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
hallow thorn
How can the second approach incrementally adopt nextjs? @cyan pilot
cyan pilotBOT
Let me check the knowledge base for you. One moment! :books:
The second approach, using rewrites in next.config.js, can help in the incremental adoption of Next.js by allowing you to redirect specific routes of your existing application to a new Next.js application. This means you can gradually move parts of your application to Next.js without having to do a complete rewrite all at once.
For example, if you have an existing application and you want to start using Next.js for a new blog feature, you can create a new Next.js application for the blog and then use rewrites to redirect the /blog route of your main application to the new Next.js application.
Here's the example code from the extracts:
module.exports = {
async rewrites() {
return [
{
source: '/blog',
destination: '<https://example.com/blog',>
},
{
source: '/blog/:slug',
destination: '<https://example.com/blog/:slug',> // Matched parameters can be used in the destination
},
]
},
}
In this example, accessing /blog in your main application will redirect to <https://example.com/blog,> which could be your new Next.js application.
This approach allows you to gradually adopt Next.js, testing and iterating on a small part of your application before deciding to move more parts over. This reduces the risk and complexity of adopting a new technology.
Source: Rewrites Documentation (https://nextjs.org/docs/app/api-reference/next-config-js/rewrites)
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
hallow thorn
how do I use mailto: email with next link? @cyan pilot
cyan pilotBOT
Let me check the knowledge base for you. One moment! :books:
You can use the mailto: protocol with next/link in Next.js just like you would with a regular <a> tag. Here's an example:
import Link from 'next/link'
export default function ContactPage() {
return (
<Link href="mailto:example@example.com">
Email Us
</Link>
)
}
In this example, clicking on "Email Us" will open the user's default email client with a new draft to example@example.com.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
glossy acorn
@cyan pilot how do I make sure that the browser opena a new tab, when linking to an external URL like tjis
cyan pilotBOT
Let me check the knowledge base for you. One moment! :books:
To open a link in a new tab, you can use the target="_blank" attribute in an <a> tag. However, since Next.js 13, the next/link component automatically renders as an <a> tag, so you can't directly add the target="_blank" attribute to next/link.
Instead, you can use a regular <a> tag with the target="_blank" attribute for external links that you want to open in a new tab. Here's an example:
<a href="<https://external-website.com"> target="_blank" rel="noopener noreferrer">
External Website
</a>
The rel="noopener noreferrer" attribute is recommended for security reasons when using target="_blank".