flex-tools

Next.js の採用

Next.js を採用した経緯などをお話しします。

Next.js 採用のきっかけ

今日は、当サイトの開発に「Next.js(ReactベースのWebアプリケーションフレームワーク)」を採用した経緯などについてお話しします。
私は、仕事のあるプロジェクトで「Next.js」を使用したことで、「Next.js」の様々な特徴を知りました。 その中から今回は、私が当サイトの開発に「Next.js」を採用する理由になった特徴をお伝えできればと思います。

コンポーネント指向

1つ目の理由は、「Next.js」の(正確にはReactの)コンポーネント指向という特徴です。
サイトの各要素を、コンポーネントと呼ばれる部品に分けて作り、これを各ページで使用することができるので、ページ数が増えた場合でも、効率的に変更を加えることができます。

4種類のレンダリング手法

2つ目の理由は、「Next.js」では、レンダリング方法を「CSR・SSR・SSG・ISR」から選択することができる点です。
当サイトは現状、静的サイトとして(html・css・JavaScript のみを使用して)作成しています(SSGを使用している)ので、格安のレンタルサーバーで運営ができています。
「Node.js」を実行できる環境は値が張るため、上述の効率的な開発を行いつつ、安価で運営できる点は非常に魅力的だと感じています。
ただ、今後のサイトの拡張にあたっては、動的サイトに変更する必要が出てくる可能性もあるため、 この場合に、途中から「SSRを採用する(APIを使用する)」という選択肢も取れることは、柔軟性の観点で非常に優れていると思っています。

webツールとの相性

3つ目の理由は、本サイトのメインである「webツール」を簡単に記述できることです。
当サイトのツールは現状、全て「JavaScript」を使用して作成しており、ツールの動作や結果の表示を、非常に簡単に記述できています。
Reactで使用されている「JSX(JavaScript XML)」では、JavaScriptファイル内にHTMLのようなマークアップを記述できます。
記述する際の感覚としては、HTMLコード中にJavaScriptコードを埋め込むことができるようなイメージであり、 jQueryなどを用いてDOM操作を行う場合に比べて、非常に簡潔に簡単に記述できます。

まとめ

ということで今回は、当サイトの開発に使用している「Next.js」についてお伝えしました。
この記事によって当サイトのライバルサイトが増えてしまうと困るのですが、この情報が皆様のお役に立ちましたら幸いです。

2025/02/22