Skip to content

Next.js, how to open a link in a new window

FULL-STACK WEB DEVELOPMENT BOOTCAMP

2024 COHORT SIGNUPS END TOMORROW

Hereโ€™s how you can open a link in a new window in Next.js:

<Link href={url}>
  <a target="_blank">Click this link</a>
</Link>

You first wrap the a tag in a Link component (the Link component provided by Next.js, and inside the a tag you add a target="_blank" attribute, just like youโ€™d do in plain HTML.

The href attribute stays on the Link component, to play well with client-side routing.

  • Learn modern web development in my BOOTCAMP (SIGNUP END TOMORROW FEB 20, 2024)
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ coding BOOKS, all available in THE VALLEY OF CODE PRO
  • Indie solopreneur internet business masterclass SOLO LAB (summer 2024)