Next.js + Vercel で Basic 認証をかける

Vercel 上にホスティングしているページに Node.js で Basic 認証をかけようと、こちらの記事を参考に Next.js で試行錯誤した際のメモ

$ yarn add -D static-auth safe-compare

Kenta Watashima

Basic 認証を行い、認証が通ったら /out 配下の静的アセットを serve する Node.js スクリプトをプロジェクトルートに作成

app.js

const protect = require('static-auth');
const safeCompare = require('safe-compare');

const app = protect(
  '/',
  (username, password) =>
    safeCompare(username, process.env.USERNAME || 'admin') &&
    safeCompare(password, process.env.PASSWORD || 'admin'),
  {
    directory: `${__dirname}/out`,
    onAuthFailed: (res) => {
      res.end('Authentication failed');
    },
  }
);

module.exports = app;

必要に応じて、環境変数 USERNAME と PASSWORD を設定

Kenta Watashima

任意のパスから app.js を実行させたいので、プロジェクトルートに配置した vercel.json に builds とroutesを追加

vercel.json

{
  "builds": [
    {
      "src": "app.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [{ "src": "/.*", "dest": "app.js" }]
}

Kenta Watashima

package.json の build コマンドを下記に変更し、新たに vercel-build コマンドを追加

package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start",
    "vercel-build": "yarn build"
  }
}

Kenta Watashima

next.config.js 内で trailingSlash を true にしておく

next.config.js

module.exports = {
  trailingSlash: true,
};

これを設定しないと、/pages/hoge.js から /hoge へのルーティングに失敗する

このスクラップは2021/01/21にクローズされました