業務でCakePHPしか使ったことないエンジニアが個人開発でNext.js（SSRメイン）を使ってみた感想
まず最初に結論
Next.jsの開発者体験がとても良いことを実感しました（Next.jsというかTypeScriptの影響が大きいかもしれませんが・・）
自分は技術的なレベルがそこまで高くないので、正しくない感想（他の技術を知らないがゆえの感想）があるかもしれません。
薄い内容の記事になっていますが許してください（笑）
もし間違っている部分があればコメントなどで教えていただけると嬉しいです。
Next.jsとCakePHPの似ている点
まずはNext.jsとCakePHPが似ていると感じた点を書いていきます。
どちらも「フルスタックのフレームワーク」ですよね。
SSRで動かせる
Next.jsについての情報を調べると
- CSR
- SSG
- SSR
などのように複数のレンダリング方法が紹介されていると思います。
ケースによって使い分けるのが理想ですが、とりあえずSSRを使えば最低限のアプリケーションは動かせる状態になるはずです。
実際にこれまでの時代でよく使われているフレームワークでもSSRの仕組みが取り入れられていたり。
自分がメインで使っているCakePHPもサーバー側でHTMLを作成する形になっています。
Next.jsもSSRだけで開発することが可能なため、一般的なフレームワークを使った開発経験がある人であれば、そこまで苦労せずにNext.jsの書き方などを理解できるのではないでしょうか。
ルーティングを自動化できる
たとえばユーザー情報に関連するページを作る場合、それぞれ以下のようになります。
Next.js
app
- user
- add
- page.tsx
- edit
- page.tsx
- page.tsx
CakePHP
template
- user
- index.php
- add.php
- edit.php
ルーティング用のファイルを用意しなくても、ディレクトリ構造によってルーティングを決められるのは直感的で良いと思います。
プロジェクトの規模が大きくなると、開発時にエディターが見づらくなってしまいそうですが・・
Next.jsの方が良かったこと
ここからはNext.jsとCakePHPをどちらも使った上での、それぞれの良かったことを比較していきます。
まずはNext.jsから。
フロントをReactで書ける
もともと自社で開発していたプロダクトは、フロント側はCakePHPのテンプレートを使っていました。
引用：CakePHP4のbakeコマンドで、コードを自動で生成する
このような感じの殺風景なデザインです（笑）
おもに社内だけで使うシステムだったので、機能さえ満たしていればOKという感じでした（JavaScriptで動的な動きを少しだけ実装するイメージ）
しかし、もっと使い勝手を上げたいという要望が増えてきたため、今後の管理工数も見据えて一部のページだけReactで書いてみることに。
その開発を通してReactによるフロントエンド開発の魅力に気づきました。
Next.jsであれば基本がReactになるので、特にビルドの設定などをせずにフロント側をReactで書けるのが良い点だと思いました。
TypeScriptを導入できる
これも大きなメリットの1つ。
Next.jsではTypeScriptを使えることが大きな魅力だと感じました。
言語としての人気の勢いも高いですし、ネット上に情報もたくさんあるので、開発しやすい点も良いことだと思います。
PHPは動的型付け言語なので、型による恩恵を受けることができないんですよね・・。
ある程度テキトーに書いても動いてしまう部分があったり、チーム開発のメンバーが増えることで意図せぬバグが起こってしまったり。
もちろんチーム側でしっかり規則を用意すれば良いわけですが、なかなか上手くいかないことが多かった気がします。
そこでPHPではなく静的型付けのTypeScriptを使うことにより、開発段階でのバグが減って気持ち的にも穏やかになりました（笑）
自分は趣味でNext.jsを使って個人開発をしていますが、その程度の規模であっても型の恩恵をめちゃくちゃ感じています。
これからの開発では、よっぽどの理由がない限りは型を使った開発をするべきだと実感しました。
（心の声：TypePHPが開発されないかな・・・）
開発陣（Vercel）が力を入れている
開発元であるVercel社が頼もしいのも良い点。
SNS上では「特定の企業のサービスばかり使っていると、いつかベンダーロックインされるぞ・・」という警告（？）もあったりしますが、ある程度は規模の大きいものに頼った方が安心だと自分は思っています。
実際にVercelのエンジニアと河野太郎さんが交流する機会があったようで、企業としても活動的なイメージで今後大きくなっていきそうな気がします（希望）
デプロイまでの障壁が少ないのも、開発者にとってはNext.jsを気軽に試せる良い点ではないでしょうか？
たとえばVercel社が提供しているホスティングサービスの「Vercel」であれば、GitHubと連携するだけで簡単にデプロイすることができます。
自分がNext.jsに興味を持ち始めたときに、画面をポチポチするだけで一般公開できたことに感動しました。
CakePHPの方が良かったこと
続いてはCakePHPの方が良かったと感じることを書いていきます。
自分は業務で4年ほどCakePHPを使っているため、「Next.jsよりも慣れているのが良いこと・・」と感じてしまいがちでした。
できるだけ慣れていることは考慮せずに、フレームワーク同士の比較として、CakePHPの良い点を挙げていこうと思います。
テンプレート作成のコマンドがある
CakePHPには「bake」というテンプレートを作成してくれる機能が用意されています。
具体的な手順としては
- CakePHPの規約に沿った名前でテーブルを作成
-
bake controller ~~~のコマンドを実行 - model, controller, templateなどの最小限のファイルが作成される
このようになっています。
Laravelの「artisan」と同じですね。
とりあえず最低限の見た目で良いので動かしたいときに、一瞬でテンプレートを作成してくれるコマンドはかなり役立ちました。
Next.jsでは上記のようなコマンドがないため、その面ではCakePHPの方が使い勝手が良いかな〜と感じました。
（Next今後すぐにNext.jsにも実装されそうな気がしますが・・笑）
認証・認可などの公式プラグインが用意されている
Next.jsで認証・認可まわりを実装する場合はいくつか選択肢があると思います。
- Auth.js
- Clerk
- Supabase Authentication
- Firebase Authentication
しかし、いずれもNext.js公式のサービスではないので、取り入れる際に苦労する場面も出てくるかもしれません。
一方でCakePHPには公式のプラグインが用意されているため、思考停止でスムーズに取り入れることができます。
どちらかと言えば枯れた技術なので採用実績などの情報が多い
この記事を書きながら思ったのですが、やっぱり現状ではNext.js > CakePHPという感じだと思いました（CakePHPに慣れている自分であっても）
ただ歴史はCakePHPの方が長いので、採用実績も多いはずではないでしょうか？
- Next.js（2016年）
- CakePHP（2005年）
ちょっと無理ですがCakePHPの良い点も頑張って書いておきました。
これから自社のシステムは少しずつNext.jsに移行していく形になります（といってもAPIはcakePHPで作る予定ですが・・泣）
最後に
やっぱりNext.jsでは静的型付け言語（TypeScript）をベースに使えるのが魅力的です。
個人開発レベルの小規模でも型の恩恵をめちゃくちゃ感じているので、業務で使う場合はよっぽどの理由がなければ型のある言語を使った方が良いと思いました。
どこかの会社がTypePHPを開発してくれないかな・・（2回目）
Discussion