React（Create React App=CRA）とNext.jsは何が違うのか

1分で読めます
新技術の試用

目的

  • React（Create React App=CRA）とNext.jsは何が違うのかを調べて整理する。

背景

  • CRAで作ったReactアプリは何となく雰囲気で動かせるようになってきた人が、Next.jsに関わるケースがあると思います。
  • そしてその際、CRAで作ったReactアプリの知識のうち、何を流用できる/できない、また注意点は何かを素早く知りたい状況になると思います。
  • ここではそのようなケースに遭遇した際に参考になる記事を書きます。

概要

Next.jsにできること

  • 適切な場所でレンダリングするサービスを提供できる。
    • CRAで作ったReactアプリのように、アプリケーションをブラウザ上でレンダリングできる。
    • サーバーサイドアプリのように、アプリケーションをリクエスト時でレンダリングできる。（いわゆるSSR）
    • 静的サイトジェネレータのように、ビルド時にレンダリングできる。（いわゆるSSG）
  • 対象のコンポーネントへTS/JSファイルのパスでルーティングできる
    • CRAで作ったReactアプリでは、react-router-domなどの3rd pathyライブラリを利用して、Componentへルーティングするのが一般的。
    • Next.jsではpageディレクトリ配下にあるTS/JSファイルにルーティングされる。
    • ファイルパスを pages/post/[pid].js などと指定することで、動的にルーティングできる。
  • 画像をトリミングして配信できる
  • Rustコンパイラでビルドできる（Next.js ver12.0 ~）

注意点

  • Reactはライブラリで、Next.jsはフレームワークである。
    • Reactは仮想DOMを扱うためのユーティリティライブラリだが、Next.jsはフレームワーク。
    • Reactは利用者が、必要なライブラリを選んだり構造を検討する必要がある。ポジティブにいうと自由度がある。
    • Next.jsは、SSR／SSGのフレームワークなので、構造は決まっていたりお作法がある。ポジティブにいうと規律がある。
  • Next.jsはサービスになる。
    • Reactアプリをデプロイする場合、ビルドしてJSファイルを取得し、別のHTTPサーバーが配信するように思う。（もしくはそのままserveするか）
    • Next.jsアプリをデプロイする場合、ビルドして静的な情報を配置し、Next.jsをサービスとして起動して、Next.jsが配信する。
  • Next.jsでページ共通処理を入れるとき、Custom Appという機能を使う必要がある
    • Next.jsはファイルベースでルーティングするので、Reactで言うところのRouter／Switchコンポーネントがない。
    • Reactなら共通処理はSwitchの外に定義するが、Next.jsの場合は、Custom Appを利用する。
  • 普通のReactで動くライブラリがそのまま動かないケースがある。
    • 動かない理由までは追ってないが、Dynamic Importという機能を使うと良いらしい。
    • 情報源と解決Tips
  • CSSモジュールを使っている際に、ブラウザ読み込み時にCSSが当たるのが遅れる。
  • Next.jsでHTTPサービスを起動でき、Nginx等でリバースプロキシして利用する
    • SSRするので当然ですが、そのままHTTPサーバーになります。
    • PythonならWSGI、RubyならRack、PerlならPSGIみたいなものがありますが、そういうのはない。
  • Next.jsのお作法は学ぶ必要がある
    • 例えば getStaticPaths getStaticProps getServerSideProps がそれぞれどういう処理の流れになってるかなど。

所感・感想

  • 最初 React / Next.jsで比較して調査を始めたが、対立としては「Create React App vs Next.js 」の方が適切だということに途中で気づいた。
  • 漠然と「調査を始める前は、SSRが欲しいなら Next.jsを利用し、そうでないならCreate React Appが良い」と思っていたがフレームワークとしての規律が欲しいから Next.jsを採用するケースはありそうに思った。またCreate React Appで初めても自分で設定を調整すればSSRできる話も見えた。（大変だから Next.jsが出てきたのだと思うが）
  • 言われてみれば当然だが、Next.jsはBFFのサーバーになる。そして、ミドルウェアを持って共通処理を挟むことができる。やろうとすればNext.jsはDB接続やキャッシュ、セッション管理も可能に見える。どこまでNext.jsのミドルウェアで行うべきなのだろうか。（Next.jsはBFFだと思うが、純粋なバックエンドとの役割分解はどうなるか。）

疑問はあるので、詳細は、調べていく必要がある。

参考にしたページ（順番に読むと読みやすい）