it is work as route middleware if user is not logged then go back to login page.

auth.service.js

import Cookies from 'js-cookie';
import Route from 'next/router';

export const TOKEN_STORAGE_KEY = 'token';
export const USER_STORAGE_KEY = 'userName';

class AuthService {

  static getUserAuthHeader = () => {
    const token = Cookies.get(TOKEN_STORAGE_KEY);
    return {
      Authorization: 'Bearer ' + token,
    };
  };

  static handleLogin = async (email, password) => {
    const res = await fetch(`${YOUR_LOGIN_URL`, {
        method: "POST",
        body: JSON.stringify({
            email,
            password,
        }),
        headers: {
          "Content-Type": "application/json",
        },
      })

    const result = await res.json()

    if (res.status !== 200) alert('Please try to login again.');

    if (res.status === 200) {
      Cookies.set(TOKEN_STORAGE_KEY, result.access_token);
      Cookies.set(USER_STORAGE_KEY, result.clientData.name);
      Route.push('/dashboard');
    }
  };
}
export default AuthService;

dashboard.js

import { ProtectedRoute } from '@/components/High-order-component'
import React from 'react'

const Dashboard = () => {
    return (
        <div>
            <h3>
                welcome to dashboard
            </h3>
        </div>
    )
}

export default ProtectedRoute(Dashboard)

High-order-component.js

import { Component } from "react";
import cookies from "next-cookies";
import { TOKEN_STORAGE_KEY, USER_STORAGE_KEY } from "@/services/auth.service";

export function ProtectedRoute(WrapperComponent) {
  return class extends Component {
    static async getInitialProps(ctx) {
      const token = cookies(ctx)[TOKEN_STORAGE_KEY];
      if (!token) {
        // const route = '/login?dest=' + ctx.asPath;
        const route = "/login";
        if (ctx.res) {
          ctx.res.writeHead(302, { Location: route });
          ctx.res.end();
        }
      }
      const initialProps = {
        token,
        userName: cookies(ctx)[USER_STORAGE_KEY],
        query: ctx.query,
        asPath: ctx.asPath,
      };
      if (WrapperComponent.getInitialProps)
        return WrapperComponent.getInitialProps(initialProps);

      return initialProps;
    }
    render() {
      const { ...propsWithoutAuth } = this.props;
      return <WrapperComponent {...propsWithoutAuth} />;
    }
  };
}