初心者がNext.jsを使いながらGithubPagesにデプロイする際につまずいた件

そもそも何がしたかったのか

元々、GitHub Pagesを使ってサイトを立ち上げてみたいと思ったものの、静的サイトしか動かせないということでDjangoしか使えなかった自分は断念
　↓
カジュアル面接で、TypeScriptや他のフレームワークが熱いことを知る
　↓
勉強の過程でNext.jsに出会った
　↓
Reactなら習っていたし、なんかいけるかも！
　↓
デプロイできずに頭を悩ます

使用したもの

• GitHubにあるNext.js用のワークフローのテンプレ
  
  ↑こいつ

• Next.js(App Router,srcフォルダー使用)

発生した問題

タイトルから察せるように、ワークフローが完了せずエラーを吐いてきた。
テンプレートを使用したんだから、できて当たり前じゃないの？！→☓だった

ログを確認すると、ファイルの生成には成功するものの、生成物がどっかにいっちゃってアップロードするタスクに渡せてなかった。

解決策

• next.config.mjsのnextConfig内にてbasePathとoutputの指定
• ワークフローのテンプレとImageタグのsrcパスの修正

next.config.mjsのnextConfig内にてbasePathとoutputの指定

yarn create next-appで生成されたnext.config.mjsを

const nextConfig = {
    basePath: "/[レポジトリ名]",
    output: "export",
    images: { unoptimized: true } ,
}

に編集

2024-02-28追記
images: { unoptimized: true } の部分、静的サイトとして（サーバーサイドでレンダリングしない場合）使う場合はつけないと画像が表示されないかも。
というかされなかった。yarn devで表示されるのにGitHubPagesで表示されないと思ったらこいつが原因だった。src=の部分が正しくならなかった

ワークフローのテンプレの編集

Setup Pagesのアクションを消すか、コメントアウトさせる

      - name: Setup Pages
        uses: actions/configure-pages@v4
        with:
          # Automatically inject basePath in your Next.js configuration file and disable
          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
          #
          # You may remove this line if you want to manage the configuration yourself.
          static_site_generator: next

以下の部分を削除orコメントアウト

      - name: Static HTML export with Next.js
        run: ${{ steps.detect-package-manager.outputs.runner }} next export

手元の画像を載せるためにImageタグを使用している際は、src属性のとこを修正する
→ basePathを適切なところに追加する。(基本 basePath + 今のパス だと思う)

なんでこうなったのか

1. バージョン変更によるもの
   yarn exportというコマンドを使って静的ファイルを今まで生成していたのですが、方法が変更になったらしいです。これはエラーメッセージでご丁寧に指摘されます

    ⨯ 
       The "next export" command has been removed in favor of "output: export" in next.config.js. Learn more: https://nextjs.org/docs/advanced-features/static-html-export
     
   error Command failed with exit code 1.
   info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
   

2. テンプレは良くも悪くもテンプレート

   • さっきの、Setup Pagesの部分。ここでnext.config.jsが生成(?)されるみたいで、自分で作成したconfigを使用するにはここを消さないといけないらしい。読んでから気付いた

3. 正直良く理解できてない
   GitHub Pagesの使用上、レポジトリ名に基づいてURLが決まるらしく、今回の場合basePathを指定するのと、Imageタグのsrc属性の変更をしないと、CSSや画像が表示・反映されないみたい。多分レポジトリ名によって異なるんだと思うけど正直よくわかんない今回はプロジェクトサイトだから？

まとめ

調べることって大事だなってさ。
初心者なのでお手柔らかにお願いします😢