はじまり

Gatsby で構築していたブログを Next.js に移行しました。

久々の Gatsby のメンテついでに TypeScript (TS) 移行を進めていたのですが、思うように進まず、どうせなら Next.js やってみるかで移行しました 💦

もともと、Gatsby 自体の開発体験に飽きたのもありました。

とはいえ、ブログ構築という観点であれば、Gatsby と Next.js を比べたら Gatsby の方が圧倒的にスピードが出ると感じました。「個人ブログ」という小規模なコンテンツサイトと、SG（静的サイトジェネレーター） + netlify のビルド体験が最強すぎますね。加えて、ほとんどの機能がプラグインで提供されていて、設定ファイルを少し書き足すだけで気の利いたブログが構築できます 😎

対して、当然ですが、Next.js はインタラクティブなサイトを作るのに最適だと感じます 😅

今回、13.4 で stable になった App Router を採用したのですが、これが良い方で衝撃的でした。比較や詳細は、毛が生えた程度のものが述べても仕方ないので他の優良記事にお任せしますが、次の機能は慣れれば使い易いと感じました。

• ファイルベースの Layout 機能
  • ルートでの Layout 指定がネストされた各ページにも適用され、各ページ（正確にはディレクトリ）でも Layout が個別設定可能
    • 不慣れだと意図しないバグを生みそうだなと思いつつ、アーキテクチャが把握できれば体験が良さそう
• (ディレクトリ名)のルートグループ機能
  • (auth)や(non-auth)などで囲んだディレクトリを設置することでパス上は同じなのに、個別 Layout や共通処理を適用できるのは良き 👍
• ルート単位でのメタデータ設定
  • page router 時代をほぼほぼ知らないですが、ルートやページ単位で柔軟に共通・個別メタデータを設定できるのは良き

とはいえ、まだまだ新しい機能なため、各種ライブラリが追従できておらず、別の開発で amplify を組み込んだ際にエラー祭りに陥りました 😢

なのでその開発では結局 page router に戻して進めています。

おわりに

とはいえ、Server Components を活用したサーバーレンダリングによる高速化、バンドルサイズの縮小などのアーキテクチャにある程度賛同するので、Next.js でゴリゴリとサービスを開発したいですね 💪

最後に、ありがとう Gatsby 👋