How to create protected page in react nextjs

Question

i am fairly new to nextjs. I am trying to create protected page for authorised users on my web app.

Does anyone have any thoughts on how to structure it? Thanks!

Answer 1

To answer you question, it depends. You can do it two ways:

Front end protection

When the page loads, show some kind of loading state. For example spinner. Meanwhile, checks if user is logged and if not, use next/router to redirect user to Login page (for example).

Server protection

For server protection, you can use getServerSideProps function. It can look something like this:

export async function getServerSideProps(context) {
  // fetch user logged state
  // check if user is logged
  // you can use server side redirection or pass "redirect" prop to 
  // the component and redirect on page load
  return {
    props: {}, // will be passed to the page component as props
  }
}