How to protect to access unauthenticated static page in next js directly through url?

Question

I want to navigate to a Page only through button click on some other page and not through typing direct url route in browser in Next JS. Page is static and unauthenticated.

Answer 1

To achieve this , you have to use getServerSideProps. In getServerSideProps a request object is passed on every request. In the request object referer header is available which contains address of the page making the request.

Note that referer header in only available when user comes to specific page through a link. The header is not availabe when url is directly typed in search bar.

You can do something like this:

export async function getServerSideProps ({ params , req  }) {
  const post = await githubCms.getPost(params.slug)  
  const referer  =  req.headers.referer || null
  


  return {
    props: {
      post , referer
    }
  }
}

Now you can pass referer prop to your component and can change your rendering logic.

Important: Note that when you refreshes your page the referer becomes null . So you need to check if someone refreshes the page logic or you have to store the referer in local storage