🎭

Nx & Next.js で Middleware を使う

2022/06/14に公開

v12から追加された Next.js の Middleware。
さっそく自社プロダクトで導入しようと試したものの、以下のエラーが。

To use middleware you must provide a `hostname` and `port` to the Next.js Server

あれ、別にCustom Serverとか導入してないのにな...もしかしてMiddleware使うにはCustom Server必須なのかな、と思って検索したらドンピシャなDiscussionを発見。

まさにこの通り、今回のプロジェクトでは Nx を採用しており、serve時に @nrwl/next:server を使用しているのを忘れていたのだった。

というわけで、上記ページのコメントにあるように、 project.json のserveターゲットを以下のように変更すればOK

project.json

"targets": {
  "serve": {
    "executor": "@nrwl/next:server",
    "options": {
      "buildTarget": "projectName:build",
      "dev": true,
      "port": 3000,
      "hostname": "localhost"
    }
  }
}

buildTarget と port は適宜置き換えてください。

Enjoy