開発チームの沼田です。

Next.jsを用いて、note内に簡単にページが作れるCMS『サイト作成機能』をリリースしました。以下のように、採用や広報に向けたページを作ることができます。

noteではNext.jsへ段階的に置き換えてるフェーズで、エディタや設定画面などはすでにNext.jsに移行しています。今回はApp Routerを使ったページとしては初機能リリースになりました。

App Routerを使用した開発のTipsや苦労について書いていきたいと思います。

Next.jsでリリースした機能と開発体制

このプロジェクトはもともと別のエンジニアが担当しており、プロトタイプ作りや社内メンバーへのインタビュー、基盤づくりなど事前検証にかなり時間をかけて行っていました。CMS機能は手を広げればどこまでもできてしまうので、最初のターゲットを人事の採用サイトと決めて、最小コストで目的達成する方法を模索しました。

方向性が決まってベースが固まった段階で、私の方で実装を行うことになりました。また、noteではリアーキテクチャを行っている最中なので、新機能はNext.jsのApp Routerでつくっていく方針になりました。

私自身はReactでの開発経験があったのですが、Next.jsのApp Routerを使用した場合のComponentの扱い方の違いを理解するのに最初は苦労しました。

また、サイト作成機能は私がすべて作ったわけではなく、フロントエンドチームに協力してもらいながら開発を進めました。noteにもともとあったノーコードでサイトを制作できるNuxt製の社内ツールをフロントエンドチームがReact用にパッケージ化し、さらにその機能を流用する形で私がNext.jsで開発を行いました。

Next.js機能開発でのハマりポイント

新機能としては、noteとして今回がNext.jsでの初リリースとなりました。本当は他機能が先行してリリースする予定だったのですが、スケジュールの関係でサイト作成機能がファーストリリースになりました。急遽、決まった部分もあり、リリースまでにハマってしまった部分もあったため、Tipsとして残しておこうと思います。

アップデートの早さとキャッチアップ

Next.jsのアップデートが非常に早いため、キャッチアップが大変でした。2021年に私が開発を担当していたときはReactがv17でNext.jsがv12だったため、かなり変わっていて驚きました。フロントエンドチームが常に情報を追っているので、なにかあれば聞ける状態なのはありがたかったです。

サーバ側とフロント側とでレンダリングを意識しなければならない部分が多く、「Next.jsが単なるアプリケーションフレームワークから、ユーザーエクスペリエンスの向上を主目的としたフレームワークに変わってきている」と言われてる意味が実装してみて初めて理解できました。

React Server Componentsに慣れるまでが大変

一つ前の章で話題に出しましたが、Next.jsはレンダリングのタイミングを常に意識しなければいけません。App Routerを使いこなすためにはReact Server Components（RSC）を理解する必要があります。

例えば、App Routerではページが先にレンダリングされてその後にレイアウトが表示されます。データフェッチのタイミングなどを考えておかないと、思わぬ落とし穴にハマってしまう可能性もあります。

Suspenseの処理を意識する

リリース直前で一部の画面の表示が異常に遅いことがありました。調べてみると、こちらは Suspense内の処理によるものでした

Suspenseで囲ったコンポーネントは、非同期的にデータ取得中にローディング画像を表示させることなどができます。（※ Suspenseの使い方はここでは簡易的に説明させていただきます）

今回の事象では、Suspenseで囲った中でクライアントで呼び出されるべき処理が、サーバー側で実行されていました。そのため、 サーバー上で処理が遅延してレスポンスが返ってくるのに時間がかかっていたのです。

解決策として、SSRとCSRの両方に対応するように作られたnote内のコンポーネントを利用することにしました。こちらのバグは複合的な事象が多く説明が難しいため、また別の記事にて説明をしたいと思っております。

開発以外で苦労した点

今回のプロジェクトでは、開発以外の部分でも多くの苦労がありました。特にT&S系の調整は私が初めての試みであったため、予想以上に時間がかかりました。不正なコンテンツが入らないないような工夫をするために、CSチームと協力しながら運用方法を決めていきました。

また、サイト作成機能はnoteとしても新しい機能だったため、プレスリリースの準備への協力などもあり、通常の開発業務とは異なる体験でした。社内コミュニケーションをもっと密にとって進めていかなければならないなと痛感しました。

新機能をリリースするときには、機能開発だけではなく、その周辺の業務も考えて進めていかなければならないことを学びました。

課題と今後の展望

今回は社内制のツールをラップして開発を進めたので、データ設計自体を変えたり、再帰的な呼び出しを変えたりと、API周りを改修していく必要があります。現状のつくりだとAPIでの呼び出しが多いため、これを一回で取得できるように改善したいと思っています。

Next.jsに移行したことでキャッシュ機能などが効いて性能は大幅にあがりましたが、上記のようにまだまだ改善できる余地があります。

また、サイト作成機能はリリースしたばかりです。機能面においても、ユーザーが使いやすく、直感的に操作ができる環境を提供していきたいと考えています。

そのためにも、継続的にフィードバックを収集し、技術的な改善とユーザーエクスペリエンスの向上を目指して取り組んでいきたいと思います。

▼noteの技術記事がもっと読みたい方はこちら