Next.js で Basic認証

インストール

yarn add nextjs-basic-auth

設定

lib/basicAuth.js
import initializeBasicAuth from 'nextjs-basic-auth'

const users = [
  { user: 'user', password: 'Password@1' }
]

export default initializeBasicAuth({ users })

_app.js
import basicAuthCheck from '@/lib/basicAuth'

...省略

MyApp.getInitialProps = async (appContext) => {
  const { req, res } = appContext.ctx
  if (req && res && process.env.ENABLE_BASIC_AUTH) {
    await basicAuthCheck(req, res)
  }

  const appProps = await App.getInitialProps(appContext)
  return { ...appProps }
}

export default MyApp

envの設定

next.config.js
module.exports = {
  env: {
    ENABLE_BASIC_AUTH: process.env.ENABLE_BASIC_AUTH,
  },
}

.env.local
ENABLE_BASIC_AUTH=true