NextJSのmiddleware.ts(Beta)の実装

Inspiration

Nextでフロントを作っていたところ、サーバー側でクライアントのアクセスログを出力はできないか？について気になりました。
ぶっちゃけの話、各ページをレンダリングする際にexport async function getServerSideProps（）の中にログを出力すれば問題ないですが、ページ数が大量になるとあまりにも非効率的、管理の手間が増えるのは目に見えるのでやめました。
その中、NextJsのミドルからアクセスログの出力はできないか。を調べたところBeta版の機能があることを確認、早速実装して期待通りの結果が取得できました。
まず、レファランス。

Ref

• https://nextjs.org/docs/advanced-features/middleware
• https://nextjs.org/docs/api-reference/next/server
• https://nextjs.org/docs/api-reference/edge-runtime
  ※これはミドルが動く環境の制限事項になります。

実装

1. まず、追加のモジュールをインストール
   npm install next@canary

2. プロジェクトのRootDirにmiddleware.tsファイルを作成

3. 下記のソースコードを記載します。

   import { NextRequest, userAgent } from 'next/server'
   
   const timestamp = () => `[${new Date().toUTCString()}]`
   const log = (...args: any) => console.log(timestamp(), ...args)
   
   export function middleware(req: NextRequest) {
     // Parse user agent
     const { device } = userAgent(req)
   
     log("nextURL : ", req.nextUrl)
   }
   

結果

サーバーのコンソールログからアクセスログを確認できます。

ただ、提供されているサンプルコードからだとより複雑な制御等も対応できるので使いこなすと助けになるかと想定してます。

終わりに

今回の実装で使ったソースコードはたいしたことをしてないので割愛します。ただ、下記のGitから公式が提供しているサンプルコードがあるので確認いただければと思います。

また、サーバー側の実行環境に制約(edge-runtime)があるので、使える機能等をよく調べてから機能の追加しないといけないようです。
この機能についていつ正式版に上がるかは確認してないですが、アプリのミドルから一括設定、制御ができるようになるので、より扱いやすくなるかと思います。