Next.jsってどうなの？ フロントエンド初心者が調べてみた
自分の現在の技術スタック
インフラ: AWSを中心としたクラウドインフラはある程度理解している。GCPもちょっと
サーバーサイド: rails, cakephpなどのフルスタックフレームワークはわかる。言語はpython, ruby, phpなどが多め。
フロントエンド: rails等のテンプレートとしての使い方しか基本的にはわからない。以前ReactとかNustJSとかのUdemy講座はやってみて、なんとなくの書き方等の雰囲気はわかっているけど、具体的にどこで動かすのかとか、サーバーサイドとかとの連携はわかっていない。
背景
という前提で、今回Reactをやってみたいと思って、その中でも色んな求人票を見ているとNext.jsがよく見るので、これを個人開発で使ってみたいなと思った次第です。また、サーバーサイドではGoを使ってみたいという条件もありました。
自分の技術力アップのために、静的型付け言語を一度やってみたいと思っており、サーバーサイド言語としては色々比較検討しましたが、これやっとけば間違いないでしょ的にGo、そしてフロントエンドもわかるようになって、一人で小規模なサービスなら作れるくらいになりたいと思い、何かしらに手を付けようと思いました。
VueかReact（他にもありますかね？）の中の選択肢で、qiitaのタグの数は同じくらいで、stackoverflowのタグの数は、reactが圧倒的に多くて（これはタグが分散されている問題もあるかもしれないです）、GoogleTrendでは2021年末あたりからreactの勢いが増してきているように見えました。
なので、reactを選んでおけば無難かなと思いました。
VueとReactでは、自分の印象ではVueの方がReactよりも習得難易度がちょっと低いという認識でしたが、ReactはReact Native？とかでスマホアプリも作れるとのことで、これを使えるようになったら幅が広がりそうだなと思い、Reactを使ってみる前提で考えました。
そこで、単純に求人票などでよくNext.jsを見るなと思い、これに興味を持ちました。
しかし、そもそもNext.jsってなんなのか？Reactとの違いは？他のどんな技術と組み合わせることができるの？サービス運用のどの部分を担うの？どこで動くものなの？他に勢いのある競合技術はないの？本当にNext.jsの選択でいいの？
と、まだわからないことが多かったため、一度整理しつつ、個人開発にアクセルを踏めるようなところまで調べてみたいと思いました。
参考記事①
Next.jsとは、Reactをベースに開発された、フロントエンドフレームワークです
Next.jsとReactの1番の違いは、サーバー機能の有無です。Next.jsはサーバー機能を持っていますが、Reactにはサーバー機能がありません。つまり、Next.jsは単体でWebアプリを動作させることができますが、Reactは別途サーバーを用意する必要があります。サーバーを用意するということは、サーバー用のモジュールをインストールし、ディレクトリ構成などを検討する必要があるため、Reactのほうが学習コストや難易度が高くなります。
参考記事②
とても良くまとまっていて参考になりました。
Next.jsを使う際のユーザー的なメリットなど理解できました。
高速化とかSEOとかは今回は特にそこまで意識する必要がないので、どちらかというとアーキテクチャ的に作りやすいか、開発を高速にスムーズに行うことができるか？などの観点で見てみたいと思います。
まず、Reactがどういう構成で使われるかの把握からしたほうが良さそうです。
よく見るのはrails + reactという構成です。この場合、どんな計算リソースを用意してどこに何を配置するのかを整理したいと思います。
参考記事③
railsとreactを組み合わせる方法としても構成パターンはいくつか有るみたいです。
ただ、reactもとどのつまりJavascriptなので、クライアントサイド(ブラウザ)上で動きます。
railsのアプリケーションはサーバーにあり、reactをレンダリング？したJavascriptをhtml, cssと一緒にクライアントサイドに送って、その後ユーザーの挙動によってブラウザからreact部分がサーバーにリクエストを送ってサーバーからコンテンツを取得して、随時Javascript？で反映するというのがreactの仕組みのようです。
railsとreactを分割するパターンと分割しないパターンがあるようです。
他のreactを使ったアーキテクチャも見てみましょう。
参考記事④
python + reactを見てみました。
これもrailsと同じ考えですね。そりゃそうだって感じですが。
reactはクライアントサイドで動くものなので、サーバーサイドからAPIを返してくれるものは別途必要になるということですよね。railsなりpythonなりgoなり。(あるいはFirebase?ここの連携イメージが掴めていませんが)
となると、Next.jsはサーバーの機能があるものということで、サーバーサイド言語が別途必要ではないということでしょうか？
参考記事⑤
rails + Next.jsのパターン。
サーバーの機能があるとはいいつつも、Next.jsだけでサーバーサイドを完結させるのはあまり得策では内容です。DBとのやりとりが整備されていないため結構手間になると。なので結局reactと同じようにrails部分ではAPIの提供をして、フロントの描画をNext.jsという分け方にするのが吉のようです。
ここでGraphQLをその間にかませるという方法もあるようなのですが、GraphQL、単語としては頻繁に見かけるんですが、実際なのをやるものなのかわかっていなかったので、GraphQLについても少し調べます。
参考記事⑥
フロントエンドがAPIサーバーからデータを取得するときに、フロントがほしい形でデータを渡してくれるためのインターフェースみたいな役割を果たす、という認識です。
これをかまさないと、毎回全データ？がサーバーサイドから返ってきてしまうのでコストになると。
そのほか参考記事
ちょっと余談気味かつ古い記事ですが、従来の(railsのような)アプリケーション開発と、reactでの開発は頭を切り替えていかないと理解できないとのこと。reactを習得していく上でのつらみとかの雰囲気がわかりました。とはいえ、この記事から4年くらい経過しているので、今は色んな情報が溢れていて、そのあたりの概念の理解の助けになる記事は多くあるかと思います。
結論
このあたりまで自分で調べてみて、友人のフロントエンジニアに聞いてみたところ、やはりNext.jsでいいと思うとの進言をいただいたので、Next.jsで行きたいと思います。
周辺の技術はおいおい調べつつやっていきたいと思います。
