rai

Next.js の公式チュートリアルで作ったブログを GitHub Pages でデプロイした


ふと自分のポートフォリオを作りたいなと思い、Next.jsに入門してきた。公式チュートリアルが滅茶苦茶分かりやすくて良かった。

困った点

SSGでの画像最適化

Next.js の画像最適化はSSR時に行われるらしく、SSGに対応していないらしい。yarn export時にエラーが出る。

Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
  Possible solutions:
    - Use `next start` to run a server, which includes the Image Optimization API.
    - Configure `images.unoptimized = true` in `next.config.js` to disable the Image Optimization API.

Next Export Optimize Imagesを使うことで解決した。開発者は日本人らしく、公式ドキュメントも分かりやすくて良かった。注意点として、GitHub Pagesでデプロイするには以下の通りの設定ファイルを作成する必要がある。場所はプロジェクト直下で、ファイル名はexport-images.config.js。<YOUR_REPOSITORY_NAME>にはあなたのGitHub Pagesのリポジトリ名が入る。

/**
 * @type {import('next-export-optimize-images').Config}
 */
const config = {
  basePath: process.env.GITHUB_ACTIONS ? "/<YOUR_REPOSITORY_NAME>" : "",
};

module.exports = config;

プロジェクトサイトとしてデプロイすると、URLがおかしくなる。

URLが全て<GITHUB_USERNAME>/hogeみたいな感じになっているので、おかしくなってる。

  • 現状(誤り): <GITHUB_USERNAME>.github.io/hoge/fuga
  • 修正版(正しい): <GITHUB_USERNAME>.github.io/<GITHUB_REPOSITORY_NAME>/hoge/fuga

これは、next.config.jsのbasePathを<GITHUB_REPOSITORY_NAME>/にすることで治った。次が実際に使ったnext.config.jsで、<GITHUB_REPOSITORY_NAME>にはリポジトリ名が入る。

const withExportImages = require("next-export-optimize-images");

module.exports = withExportImages({
  reactStrictMode: true,
  basePath: process.env.GITHUB_ACTIONS ? "/<GITHUB_REPOSITORY_NAME>" : "",
  trailingSlash: true,
});
← Back to home