GatsbyからNextJSに移行してみた
目次
Gatsby5 にしてから…
Gatsby5 にしてから、ビルドに時間が掛かる様になりました。
記事を一つ投稿（markdown ファイル + eyecatch 画像）しようとするだけで、数十分掛かる…といった感じです。
（略）
info bootstrap finished - 13.497s
success write out requires - 0.006s
success Building production JavaScript and CSS bundles - 1.338s
Building HTML renderer
Building production JavaScript and CSS bundles まではスムーズに行くのですが、 HTML renderer で時間が取られる。
それが終了して、Running gatsby-plugin-sharp.IMAGE_PROCESSING…の段階に入ると、また時間が取られます。
（略）
success Execute page configs - 1.604s
success Caching Webpack compilations - 0.001s
Running gatsby-plugin-sharp.IMAGE_PROCESSING…
（略）
warn This query took more than 15s to run — which might indicate you're querying
too much or have some unoptimized code:
File path: /XXXXXX/src/pages/{mdx.frontmatter__slug}.j
s?__contentFilePath=/XXXXXX/blog/github-personal-acces
s-tokens/index.mdx
URL path: /github-personal-access-tokens/
動的に作成されるページの分だけ、上記のコードが繰り返し表示され、ビルドが全然終わらない。
ビルド時に最適化された画像を作成しているとは思うんですが、画像の点数もサイズだってそんなに多くないのに…
Gatsby5 の新機能
Gatby5 の新機能は、以下の記事に書かれています。
GraphQL も記事に書かれているコマンドを実行して、新しい書き方に変更済みです。
変更後の GraphQL のコードも、チュートリアル等に書かれているサンプルコードとほぼ一緒なので、GraphQL 自体には問題なさそう。
（Gatsby Cloud を使っていないので、効果はあまり期待出来ないけど）Gatsby Slice も使った上でビルドしてみても、同じ様に時間が掛かる…
node のバージョンを色々変更（v18.0.0〜v18.14.0）してみても、結果は同じ。
NextJS で試してみる
以前に NextJS で markdown ファイルを読み込んで表示させるブログを作成していたので、試しに Gatsby のブログ記事を NextJS に持って行って、画像のパスなどを修正して、ビルドしてみると…
十数秒でビルドが終わった…
えっ、何で？
ちょっと前にサーバーの OS を CentOS から RockyLinux に変更したけど、Gatsby にだけ影響あるとかは考えにくいし…
Gatsby Cloud を使えば、ビルドもサクッと終わるのかもしれないんですけど…
yarn install も NextJS だと（プラグインとかそんなに使っていないので）サクッと終わったし、これなら NextJS でいいんじゃないかと。
なので、暫くは NextJS に切り替えてやってみようかと思っています。