はじめに
Nuxt 3には、サーバーミドルウェア、ルートミドルウェア、ページミドルウェアの3種類のミドルウェアがあります。
今回はそれら3つのミドルウェアの違いについて記事を残したいと思います！
サーバーミドルウェア (Server Middleware)
役割
サーバーサイドで動作し、リクエストがAPIエンドポイントやページに到達する前に処理されます。
つまり、サーバー全体に対してグローバルに適用されるミドルウェアです。
ディレクトリ
server/middleware/に配置されます。
使用例
// server/middleware/auth.js
export default defineNuxtMiddleware((req, res, next) => {
// 認証処理など
next()
})
特長
- サーバーサイドの全リクエストに対して適用される
- リクエストの前処理や認証、ログなどの共通処理に使用される
ルートミドルウェア (Route Middleware)
役割
ルートミドルウェアは、特定のページやルートに適用されるミドルウェアです。
つまり、クライアントサイドで動作し、特定のページにナビゲートする前に実行されます。
（グローバルミドルウェアと呼ばれることもある）
ディレクトリ
middleware/に配置されます。
使用例
// middleware/auth.js
export default defineNuxtRouteMiddleware((to, from, next) => {
// 認証チェック
next()
})
特長
- 特定のルートにのみ適用される
- 認証チェックやリダイレクトなどのページナビゲーションに関連する処理に使用される
ページミドルウェア (Page Middleware)
役割
ページミドルウェアは、特定のページコンポーネント内で定義され、そのページに対してのみ適用されるミドルウェアです。
つまり、クライアントサイドで動作し、そのページが表示される前に実行されます。
ディレクトリ
ディレクトリではないがpages/配下のVueコンポーネント内で記載される事が多いです。
使用例
// pages/index.vue
<script setup>
definePageMeta({
middleware: 'auth'
})
</script>
特長
- ページ単位で適用される
- ページごとに個別の前処理が必要な場合に使用される
まとめ
今回説明したミドルウェアをまとめると以下になります。
- サーバーミドルウェア (Server Middleware)
- サーバー全体に対して適用され、サーバーサイドで動作する
- ルートミドルウェア (Route Middleware)
- 特定のルートに対して適用され、クライアントサイドで動作する
- ページミドルウェア (Page Middleware)
- 特定のページに対して適用され、クライアントサイドで動作する
ここまで読んでくださりありがとうございました！
少しでもMiddlewareに対する解像度が上がれば幸いです！