技術選定について

Next.js(Pages Router)

フロントエンドのフレームワークとして、Next.js(Pages Router)を採用する。

選定理由は以下の3つ

• 人気
• パフォーマンス
• SEO, OGPの設定

人気

現状(2024/04/09時点)、フロントエンド開発ではライブラリやフレームワークを使用した開発が主流となっており、特にReactが最も使用されている。

jackwebを後世に引き継いでいくためにも、使用人口が多いライブラリであるReactを選定した。また、情報の多さもメリットとして挙げられる。

パフォーマンス

Reactはブラウザ上でJavaScriptを実行してHTMLを描画する(クライアントサイドレンダリング、CSR)のに対し、Next.jsはサーバー側で生成したHTMLをレスポンスする仕組み(サーバーサイドレンダリング, SSR)をとっている。

ReactのようなCSRでは、URLにアクセスしたときに、空のHTMLファイルとJSファイルが返ってきてブラウザ上でDOMを構築するため、

• 初期表示が遅い
• Metaデータが最初に含まれていないので、SEO,OGPに弱い
• セキュリティ上のリスクがある

といったデメリットがある。

Next.jsはReactのこれらの問題を解決するフレームワークである。SSRでは、サーバー側で生成したHTMLを返してくれるので、セキュリティ上の懸念は少なくなる。

また、SSRにはSSG(静的サイト生成)という方法もある。これは、アプリケーションのビルド時にあらかじめページを生成しておき、リクエストに応じて出来上がった状態のページを返す方法である。すでに出来上がった状態のHTMLが返ってくるので、ページの読み込みが爆速になる。

Next.js(Pages Router)では、各ページごとにCSR、SSR、SSGの設定が用意にできるため選定した。

Next.js(App Router)では、コンポーネントごとにCSRかSSRかの選択をすることができるが、jackwebの開発には必ずしも必要がないと判断し、可読性などを考慮してPages Routerを採用した。

SEO, OGPの設定

パフォーマンスでも述べたが、素のReactではMetaデータが最初に含まれていないので、SEO,OGPに弱いというデメリットがある。

Next.jsのSSRを使用すれば、事前にMetaデータなどの設定ができるため、SEOに強いサイトになる。

また、blogページで各記事に対して動的にOGP画像を生成することなども可能である。

Notion API

jackのメンバーが気軽にブログやプロダクトを追加して欲しいという思いからNotionをCMSに採用した。