NAWASHIRO

GitHub Pages & Next.jsで個人サイト作ってつまづいたところ

このサイトを作ろうとしたときのはなし。

登場人物

なわしろ：私。関西型言語を使う人の影響で言葉がぶれる。

識者：主に Google 先生。

経緯

なわしろ「個人サイトが欲しいぞ。面接の時とか見せれたら便利やん」

識者「GitHub Pages をご存知？HTML などの静的なコンテンツをホストしてくれる便利なサービスだよ。なんと 1GB までなら無料。テキストで 1GB 埋めるのはなかなかきついのでブログ書き放題だね」

識者「それから Next.js もご存知？WEB サイトを作る時便利なフレームワークだよ。静的なコンテンツを生成する機能があるから今回役に立つよ」

なわしろ「なんかよさそうだね、それやってみよう」

Next.js チュートリアル

識者「まずチュートリアルをやってみようか」

なわしろ「千里の道もチュートリアルやればひとっ飛びやね」

...

なわしろ「でけた！ローカルで動くことを確認したやで」

なわしろ「せっかくだからチュートリアルで作ったサイトを個人サイトに改造してしまおう。モックはFigmaで作ってあるんだよね。デジタル庁のデザインシステムが役に立ったよ」

つまづき デプロイ時のバージョン設定

なわしろ「さっそく GitHub Pages にデプロイしてみよう」

なわしろ「ギャーッ！エラーが出たーッ！」

error npm@10.1.0: The engine "node" is incompatible with this module. Expected version "^18.17.0 || >=20.5.0". Got "16.20.2"

なわしろ「識者助けて！？」

識者「フムン。node のバージョンがあっていないようだね。18.17.0 以上でなければならないのに、16.20.2 になっている」

なわしろ「GitHub Actions で使われてる node のバージョンが古くていけないってこと？どうすればいいの？」

識者「workflows/nextjs.ymlを利用してバージョンを指定できる。GitHub Actions 作るとき聞かれるんだけど、さては見落としていたね？」

workflows/nextjs.yml
-node-version:16
+node-version:18

つまづき next.config.js の設定

なわしろ「ギャーッ！またエラーが出たーッ！」

remote: Permission to nawashiro/nawashiro.github.io.git denied to github-actions[bot].

識者「フムン。権限が足りていないようだね」

なわしろ「権限を要求する操作なんてしてないはず……おかしいな……」

識者「考えられることがあるとすれば、他のリポジトリにアクセスしようとしている、とかかな？」

なわしろ「あっ、next.config.jsがチュートリアルのときのままだ」

next.config.js
-repoName = process.env.GITHUB_ACTIONS && "/nextjs-blog-learn";
+repoName = process.env.GITHUB_ACTIONS && "/nawashiro.github.io";

つまづき next.config.js の設定 2

なわしろ「あれ？デプロイはできたけど、css が適用されていない姿のままだ」

識者「コンソールになにかエラーは出ているかい？」

Uncaught SyntaxError: Unexpected token '<'

識者「なぜか js が読み込まれなくて、代わりに index.html が読み込まれている状態だね。next.config.jsになにかあることが多いよ」

なわしろ「なんもわかんない……とりあえず設定全部消してみよう」

next.config.js
 /**
 * @type {import('next').NextConfig}
 */
-repoName = process.env.GITHUB_ACTIONS && "nawashiro.github.io";
 module.exports = {
-  basePath: repoName,
-  assetPrefix: repoName,
-  trailingSlash: true,
-  publicRuntimeConfig: {
-    basePath: repoName,
-  },
 };

識者「なんかうまくいったね。スタイルが表示されてエラーが消えたよ」

なわしろ「なんで！？」

basePath

識者「basePathだね。これはコードに書かれたパスの前に付け足されるパスを指定する設定だよ。たとえば」

home.jsx
<Link href="/home">home</Link>
next.config.js
module.exports = {
    basePath: "/example",
};

識者「これが出力されると」

<a href="/example/home">home</a>

識者「こうなる」

なわしろ「はえー」

assetPrefix

識者「assetPrefixは Next.js 9.5 以降では推奨されていない。古い情報には気を付けたほうがいいよ」

識者「データを流用するとこういうことも起こる。過去の資産に固執せず一から作ったほうが早いこともあるよ」

まとめ

  • GitHub Pages にデプロイするときはnextjs.ymlをちゃんと確認すること。特にバージョン。
  • next.config.jsもしっかりと確認すること。
  • 古い情報に気をつけろ。
  • 過去のデータを流用するときも気をつけろ。

次回、og 編へ続く。

Back to Home