I'm attempting to trigger a PDF download when landing on a page with next.js. When doing so it's opening another tab with the PDF which i'm fine with, but i'd like to open the PDF on another tab. So I added it with link.target ="_blank" on page load, there are 2 PDF tabs that are open now.

I've attempted get only 1 tab with the PDF to open but I am unable to. Is this an issue with next.js? How can I get my function to only 1 PDF tab.

I think the issue may be related to the server side render? If so how can I only call this function once?

Here is my download file function:

  function downloadFile(filePath) {
    if(process.browser) {

      var link = document.createElement('a');
      link.href = filePath;
      link.target = "_blank"
      link.download = filePath.substr(filePath.lastIndexOf('/') + 1);
      link.click();
    }
  }
  
  downloadFile("http://www.africau.edu/images/default/sample.pdf");

Here is my full next js page:

const Download= () => {

  function downloadFile(filePath) {
    if(process.browser) {

      var link = document.createElement('a');
      link.href = filePath;
      link.target = "_blank"
      link.download = filePath.substr(filePath.lastIndexOf('/') + 1);
      link.click();
    }
  }
  
  downloadFile("http://www.africau.edu/images/default/sample.pdf");

  return (
    <Layout>
      <div> download pdf</div>
    </Layout>
  );
};

export default Download;