How To Open Link On New Tab With NextJS

Authors

Next.js is a popular React framework that allows developers to build server-side rendered (SSR) web applications.

One of the key features of Next.js is its ability to handle client-side routing seamlessly.

However, sometimes you might want to open a link in a new tab or window when building a Next.js application.

In this blog post, we'll explore how to open links in new tabs or windows in a Next.js application.

Before we dive into opening links in new tabs or windows, let's first take a look at how to create links in a Next.js application.

Next.js provides a Link component that you can use to create links between pages in your application.

The Link component is built on top of the HTML anchor tag and provides a client-side routing solution that doesn't require a full page refresh.

Here's an example of how to use the Link component in Next.js:

import Link from 'next/link'

function HomePage() {
  return (
    <div>
      <Link href="/about">
        <a>About</a>
      </Link>
    </div>
  )
}

export default HomePage

In the example above, we import the Link component from the 'next/link' module and use it to create a link to the '/about' page.

When the user clicks on the link, the page will be loaded using client-side routing without a full page refresh.

Now that we know how to create links in a Next.js application using the Link component, let's explore how to open links in a new tab or window.

There are a couple of ways to achieve this in a Next.js application:

Using the target attribute

One way to open a link in a new tab or window is by using the target attribute on the anchor tag.

The target attribute specifies where to open the linked document. To open a link in a new tab, you can set the target attribute to '_blank'.

Here's an example:

import Link from 'next/link'

function HomePage() {
  return (
    <div>
      <Link href="https://google.com" passHref>
        <a target="_blank">Open Google in a new tab</a>
      </Link>
    </div>
  )
}

export default HomePage

In the example above, we set the target attribute to '_blank' to open the link in a new tab.

Note that we also added the passHref prop to the Link component, which ensures that the href attribute is passed down to the anchor tag.

Using the window.open method

Another way to open a link in a new tab or window is by using the window.open method in JavaScript.

The window.open method opens a new browser window or tab, depending on the user's browser settings.

Here's an example:

import Link from 'next/link'

function HomePage() {
  const handleOpenLink = () => {
    window.open('https://google.com', '_blank')
  }

  return (
    <div>
      <button onClick={handleOpenLink}>Open Google in a new tab</button>
    </div>
  )
}

export default HomePage

In the example above, we create a button that, when clicked, calls the handleOpenLink function.

The handleOpenLink function uses the window.open method to open the link in a new tab. Note that we set the second parameter of the window.open method to '_blank' to open the link in a new tab.

Conclusion

In this blog post, we explored how to open links in new tabs or windows in a Next.js application.

We saw two ways to achieve this: by using the target attribute on the anchor tag or by using the window

TrackingJoy