NextAuthはoutput: ‘export’と併用できない

  • 投稿日
  • 著者 kngsmym
  • カテゴリー Next.js

初学者の馬鹿な気づきを自分のためにメモっておく。

まず、[slag].tsxなどで動的にページを生成するような作りにした場合はISRとなり、そもそも静的buildができない。

静的buildして一般的なレンタルウェブサーバーにアップして静的サイト（コンテンツの中身はJSで動的だが、初期レンダリングが静的であるというニュアンス？）として動かす場合はベースとなるHTMLを静的HTMLとして書き出させる。（SSG）

その場合、next.config.jsに以下の設定を書き加える。

module.exports = {
  output: 'export',←これ

ちなみに以前は以下のような感じでpackage.jsonに書いてnpmからexportというコマンドを実行していたらしいが新しめのバージョンでは廃止されている。

  "scripts": {
    "dev": "next",
    "build": "next build && next export",

こういうの調べてても情報の時期と書いた人のスキルによって結構情報が錯綜してしまい、どこまで何ができるかを後発の初学者がネットの情報から正確に把握するのはかなり無理目なので、ある程度のルールを学んで、その現場のその環境でやりながら即したやり方に馴染むのが結局早そう。あとすごく詳しい師匠を見つけるとか。

さて、これでoutというフォルダが作成されてその中身を丸ごとアップするとアップしたフォルダをルートとしてサイトが見れるようになる。

WordPressをヘッドレスCMSにしてテーマ的に表示できればよければ基本的にこれでいけそう。

REST APIやGraphQLで読み込みや書き込みはできるので、ある程度の動的な処理も可能。

そして自分の場合はOAuthログインしてそのアカウントごとに情報をもつようにローカルで作っていた。

OAuthログインにはNextAuth.jsを用いた。

NextAuth.js
Authentication for Next.js
next-auth.js.org

ローカルでは成功していたが、静的ビルドするとapi以下が書き出されないのでログインできない。調べると、APIroutesという機能が静的buildに対応しておらず、それならば生成されるURLを変更してこれも静的に動かすことはできないかと色々調べてみたが、NextAuthの動作にそもそもサーバー側でNode.jsのランタイムが必要らしい。

[…nextauth].ts not exporting during Next Export · Issue #6604 · nextauthjs/next-auth
Question 💬 Currently I can login fine when using localhost but for the deployed version of my site, I am having trouble accessing the login page on sign-in. I …
github.com

Hi, next-auth requires a server runtime (API routes), meaning that it’s not compatible with next export. See https://nextjs.org/docs/advanced-features/static-html-export#unsupported-features

上記はググって見つけたgithubのissueの一分だが、簡単に意訳すると要はNextAuthはnext exportと互換性がないよ、と。

ということで、ログインして使う機能を実装したかったらサーバー側でNode.jsを動かすしかなさそう。

一般的なレンタルサーバーでは無理なので、そこから検討し直し。

いやー先は長いな。

Next.js 手探りReact