NetlifyでscrapboxからSSG

このページは

https://github.com/yuiseki/scrapbox-nextjs-template を使ってscrapboxページをNetlify上にクローンしたいので、やってみた記録(資料リンク集)。

やったこと概要

上記リポジトリを自分のgithubにforkして作業マシンにclone。

資料

上記リポジトリはnext.jsを使っているので、next.jsをNetlifyにデプロイする方法をまず調べる。

npm runとは何か

package.jsonのscriptsセクションに書いてあるコマンドを引数にして実行するコマンド。

next.config.js

const nextConfigの値として設定を書く。上記リポジトリのnext.config.jsにはreactStrictMode、output、basePath、envの4つのエントリがある。

const nextConfigエントリの中で使われているprocess.envとは何か

node.jsの機能で、システムの環境変数を使うためのフレーズ

Netlifyにおける環境変数

next.config.jsでprocess.envを使って引用されている環境変数は次の4つ

NODE_ENV: "development"又は""

BASE_PATH: サイトのURLのディレクトリ名部分のプリフィクス?

SCRAPBOX_PROJECT: 読み込むScrapboxのプロジェクト名

SITE_NAME: SSGで生成するサイト名?

SITE_ORIGIN: SSGで生成するサイトのURL

デプロイ

上記でクローンしたリポジトリをNetlifyで選ぶと自動的にNext.jsプロジェクトと認識される。

設定項目は次のようにする。

Base directory: /

Build command: next build

Publish directory: /.next

Function directory: /netlify/functions

環境変数

BASE_PATH: ""

SCRAPBOX_PROJECT: "for2ando"

SITE_NAME: "for2ando's scrapbox clone"

デバッグ

public/data/pages.jsonがない、というエラーになる。