PractiX Code Lab

【Next.js】ミドルウェアとCookieを使った初回訪問判定

Share this post

🚪はじめに

管理人のTKGです。

この記事では、Next.jsのミドルウェア機能とCookieを活用して、「初回訪問かどうか」を判定し、初回のみ特定ページ（例：ローディング画面）にリダイレクトする仕組みを実装した方を解説します。

🎯想定読者

  • Next.jsのミドルウェアの具体的な使い方を学びたい方

    初めてミドルウェアを触る方でも、動作の流れと書き方がわかるように解説しています。

  • ユーザー体験を向上させるロジックを導入したいWeb制作者

    ローディング画面や初回限定の演出を設けたい方におすすめです。

  • Cookieを使った状態管理やリダイレクト制御のパターンを探しているエンジニア

    サーバー・クライアント両方でCookieを操作する際のベストプラクティスが得られます。

📘本記事でわかること

  • Next.jsのMiddlewareの基本的な使い方
  • Cookieを用いたユーザー状態の保持方法
  • 初回アクセス時のみ特定ページにリダイレクトするロジック

🛠実装の概要

以下のような流れで処理を行います

  1. ユーザーがサイトに初回アクセス
  2. ミドルウェアがCookieを確認
  3. Cookieが未設定なら → /loading ページにリダイレクト Cookieが存在すれば → 通常通り表示
  4. /loading ページ側でCookieを設定して、リダイレクト

📦Middlewareの実装

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const hasVisited = request.cookies.get('visited')

  // 初回訪問かつloadingページ以外へのアクセス時にリダイレクト
  if (!hasVisited && request.nextUrl.pathname !== '/loading') {
    const url = request.nextUrl.clone()
    url.pathname = '/loading'
    return NextResponse.redirect(url)
  }

  return NextResponse.next()
}

// 適用するパスを設定
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
}

🏗️ Cookieの設定（ローディングページ側）

// app/loading/page.tsx（もしくは /pages/loading.tsx）
'use client'

import { useEffect } from 'react'
import { useRouter } from 'next/navigation'

export default function LoadingPage() {
  const router = useRouter()

  useEffect(() => {
    // クッキーを設定（有効期限は7日など任意）
    document.cookie = `visited=true; path=/; max-age=${60 * 60 * 24 * 7}`

    // 数秒後にトップページへリダイレクト
    const timeout = setTimeout(() => {
      router.replace('/')
    }, 3000)

    return () => clearTimeout(timeout)
  }, [])

  return (
    <div className="flex items-center justify-center h-screen">
      <p>Loading... 初回のみ表示されます</p>
    </div>
  )
}

補足：Cookieの仕様と注意点

  • ミドルウェアで扱うCookieはHTTP Onlyではないため、フロントエンドからも書き込み可能です。
  • path=/ を指定することで、全ページ（子ページにアクセスしても）有効にできます。
  • max-ageで有効期限を設定することが推奨されます（セッションCookieだと再訪時にリセットされる可能性があるため）。

🔖まとめ

Next.jsのミドルウェアとCookieを組み合わせることで、初回だけ表示する体験を手軽に実装することができます。ローディング画面以外にも、ウェルカムメッセージやチュートリアルの表示など、活用範囲は広いので、ぜひ試してみてください。

🚀成果物リンク

👉Takashi Sekiguchi | Portfolio

Share this post