2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Posted at

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

登場人物

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

識者:主に 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 編へ続く。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?