Next.js の特定のディレクトリ下において指定したCookieの有無で閲覧制御をする

例えばアプリケーションのログインページおよび新規登録ページが、それぞれ /auth/login、/auth/signup に配置されていると仮定します。

- pages
    - auth
        - login.tsx
        - signup.tsx

このとき、これらのページにアクセスできるのは未ログイン状態のユーザーのみで、ログイン済のユーザーにはアクセスさせたくない（トップページにリダイレクトさせるなど）という場面はあるかと思います。

一般的には、ページコンポーネントの getServerSideProps 内や、クライアント側で Cookie の有無を判定したりするかと思いますが、Next.js の Middleware 機能が有効活用できます。

Middleware は、どこに配置するかによって実行順序を指定できるようになっており、 この場合、 auth ディレクトリ配下に _middleware.ts を置くことで、auth ディレクトリ配下のページにおいて優先的に Middleware が実行されるようになります。

- pages
    _middleware.ts // ルートのミドルウェア
    - auth
        - login.tsx
        - signup.tsx
        _middleware.ts // auth用のルートのミドルウェア

nextjs.org

_middleware.ts 内では、指定の Cookie の値（このケースでは sb:token）を評価し、truthy な場合（つまり、ログイン状態である場合）はトップページにリダイレクトさせています。

逆に、falthy な場合は NextResponse.next() としてそのまま表示させています。

import { NextRequest, NextResponse } from 'next/server'

export function middleware(req: NextRequest) {
  const sbCookie = req.cookies['sb:token'] // Cookie 内の任意の値

  if (sbCookie) {
    return NextResponse.redirect('/')
  }

  return NextResponse.next()
}