全ルートに共通で認証チェックを入れたい。どこに書きますか。
プロジェクト直下の proxy.ts です。リクエストがルートに届く前に実行されます。ここに書くのは未ログインを弾く程度の粗い制御で、細かい認可は各処理の中で行います。
面接官が見ているのはproxy / middleware の位置づけ。改名を知っているか。
よくある答えと、面談でどう見られるか
- プロジェクト直下の proxy.ts に書く。ただし細かい認可はデータに近い場所で行う
入口の防御と認可を分けて考えられています。 - middleware.ts に書く
15 以前ならそれで正しく、現場のコードもそうなっています。Next.js 16 では proxy.ts に改名されているので、そこを知っているかで差が出ます。 - ルートレイアウトで認証チェックを行う
動きますが、layout はルートごとに階層が違うので、抜けが出やすい置き場所です。また layout に重い処理を置くと、配下の全ページに効きます。 - 各 page の先頭で毎回チェックする
確実ではありますが、新しいページを足した人が書き忘れます。「書き忘れても守られる」構造にしたいところです。
面接官は何を見ているか
- プロジェクト直下の1ファイルに書くと理解している
- リクエストがルートに届く前に走ると言えた
- そこだけに頼らない、という但し書きを付けられた
模範解答
プロジェクト直下に置く proxy.ts に書きます。pages や app と同じ階層に1つだけ置ける特別なファイルで、リクエストがルートに届く前に実行されます。
ここで書くのは粗い制御です。未ログインならログイン画面へ飛ばす、といった入口の判定に向いています。
重要な但し書きとして、ここに認可を全部寄せてはいけません。「ログイン済みか」と「その操作をしてよいか」は別の話で、後者は実際にデータを触る場所で確認します。
なお、このファイルは Next.js 16 で middleware から proxy に改名されました。15 以前のプロジェクトでは middleware.ts のままです。公式のアップグレード用コードモッドが、この改名も行います。
ここからどう深掘りされるか
この問いに答えられた場合、面談は次の質問に進みます。
観点をすべて押さえられた場合
middleware という名前を知っていましたが、proxy.ts は初耳です。中身も変わったのですか。一部しか触れられなかった場合
この共通処理は、リクエストのどのタイミングで動きますか。触れられなかった場合
この共通処理は、リクエストのどのタイミングで動きますか。