ムーザルちゃんねるのzaruです。今回はムーさんと、Next.jsを使い続けたい好きなトコロについて話しました。Next.jsが合うか合わないかは、正直プロジェクトとチーム体制や方針に大きく左右されます。僕たちが好きなトコロにピンときた方にはきっと合うと思いますのでぜひさわってみてください。
フロントとバックの境界線がなくなる
フロントエンドとバックエンドの境界線がなくなるって、何、なくなるわけないだろ！と思うかもしれません。確かに実際には境界線がなくなるわけではなく隠蔽されているのが実態ではありますが、それによる開発体験の向上がとても好きです。
バックエンドの処理を簡単に実行できる
Next.js（実態はReact）のServer Componentを使えば、コンポーネント内でSQLの実行などがそのままできます（以下のコードは例のために直接SQLを書いているので「うぇ？」と思うかもしれません）。
export default async function Page() {
// バックエンドの処理がコンポーネント内で使える
const likeCount = await sql`SELECT COUNT(*) FROM likes`;
return <div>{likeCount}</div>;
}
また、Server Actionsという機能で、バックエンドで定義した関数を、フロントエンドからそのまま呼び出すことができます。
まず、バックエンドで実行する like() 関数を定義します。 "use server"; というのは外部から呼び出せるサーバの処理ですよと宣言するものです。
"use server";
export async function like() {
await sql`UPDATE likes SET count = count + 1`;
return { status: "success" };
}
そしてクライアントコンポーネントの onClick から関数をそのまま実行することができます。サーバの処理を呼び出しているのにまるでそんな雰囲気はないですね。
"use client";
export function LikeButton() {
const onClick = async () => {
// バックエンド側の関数がそのまま使える
const result = await like();
};
return (
<button type="button" onClick={onClick}>
Like
</button>
);
}
このようにフロントエンドとバックエンドの境界線を乗り越えることを意識することなくコードが書けます。嬉しいですね！！ （実態は自動でfetchしているだけで特別な技術が使われているわけではない）
型を共有できる
個人的にはバックエンドで定義した関数のInput/Outputの型をそのまま共有できる点が好きです。
"use server";
export async function like() {
await sql`UPDATE likes SET count = count + 1`;
return { status: "success" };
}
この return { status: "success" } というのを型推論してくれますし、当然引数の型も使えます。OpenAPIなどでインターフェイスの定義をしなくても済むのでだいぶ楽になります。
状態管理が減る
SPAで作っていくと、状態管理ライブラリが欲しくなります。今までそれなりの規模のSPAを開発してきましたが、きちんと使うには使い手の技量が求められるなというのが感想です。しかし、Server Componentの登場によりMPA的に作りつつも使い勝手はSPAのような体験が作れ、結果的に状態管理が減りました。
また、状態管理ライブラリが欲しい最大のポイント、変更の通知処理については…
状態の変更を遠いコンポーネントに伝えたい図
Next.jsではDBのデータを更新したときに revalidatePath を呼び出すだけで勝手に画面を再描画してくれます。シンプルで嬉しいですね。アプローチは異なりますが、RailsのHotwireも似たような方向の問題解決をしているように感じ、僕は好きです。
おわりに
という感じで、Next.jsを使い続ける好きなトコロを紹介しましたが、不安なところがないわけではないです。
- Vercelロックインされる？
- 僕たちはAWS ECSにNext.jsをよくデプロイしていますが、今のところ困ってはいないです
- バージョンアップの品質が不安定？
- AppRouterが出たばかりのv13-v14の時はけっこう不安定だった…ｗ
- でも最近は落ち着いてきた気がする
- 学習コストが高い？
- 低いとは言えないけど、SPAでガリガリ作るよりは簡単に感じます
- ログ出力のサポートが弱い
- これは今一番困っているトコロ…回避策はなくはないけど、もっとサポートを充実させて欲しい
それでもメリットが上回っているので今のところはNext.jsを使って開発を続けていきます。Remix（今後はまたReact Router）の今後も気になりますし、HTMXやHotwireなど他のアプローチの進化も楽しみですね！
Discussion