はじめに

こんにちは！ライトコードでは主にPHP,Laravelを使用したWEB開発経験を積んできました、かんだむです。10月末にNext.js 14 がリリースされ、色々な発表がありました。
https://nextjs.org/blog/next-14#nextjs-learn-course
バックエンドメインでそれまでのNext.jsについてはほとんど知識がなかったのですが、GAとなったServer ActionsがまるでPHPじゃないか！という反響に興味をもち、今回14のリリースに合わせて刷新された公式チュートリアルに取り組んでみようと思いました。
今回やっていくのはこちらです。
https://nextjs.org/learn

チュートリアルの概要

今回のチュートリアルでは、CRUD処理を一通り備え、ログイン機能や検索機能がついた請求ダッシュボードアプリを作成します。GAされたばかりのServer Actionsをガッツリ使っていき、フルスタックフレームワークとしてNext.jsを使用します。
全16チャプターで構成されており、さらっとやるなら1チャプターあたり15 ~ 30分あたりで終わりますが、しっかり理解しようと関連ドキュメントを見に行ったりする必要があります。
対象範囲は開発を学び始めた初心者 ~ 新しくNext.jsを学びたい他フレームワークの経験者でしょうか。今回GAになったばかりの新機能が前提とされているため、従来のNext.js開発者でも楽しめそうです。

おもしろポイント

チュートリアルの細かい内容は割愛して、個人的にいいと思った内容や面白かったところを書いていこうと思います。

択一式のクイズ

チャプターの途中にそれまでの説明が理解できているか、簡単な択一式のクイズが用意されています。一つ抜粋するとこんな感じです。

公式が出しているガイドやチュートリアルでクイズが出てくるのは初めての体験だったのですが、シンプルな択一式で難易度もちょうどよく、とてもいい体験でした。改めて説明を読み返したりするいいフックになっていて、これは研修担当になったとき取り入れようと思いました。

Vercelを使った開発体験の良さ

散々言われていると思いますし、自身も以前に触ったことはありますが、Vercelを使ったデプロイの簡便さがもうハンパじゃないです。
本チュートリアルでは半ばでGithubへのコードプッシュとVercelを使ったアプリ公開、Vercel Postgresとの連携があります。
Vercelでのプロジェクト作成からアプリ公開までは一瞬で終わり、あとはGithubのMainブランチへ更新があるたび勝手にアプリも更新されます。インフラやCI/CDの構築・設定も面白いですが、特に初心者においてとりあえずWEBに作ったものが躓かずに公開できるというのは素晴らしいと思います。経験者であっても、このプロジェクト作成の容易さを食らうと、とりあえずVercelで……という選択肢は全然ありなんじゃないかと感じました。

本チュートリアルでは作成したVercel Postgresにローカル環境からもアクセスします。
これは本番環境とローカル環境でDBを共通化することを意味していて、ちょっとどうなのかと思わなくはないです。しかし例えばDockerなどでコンテナを立ち上げて~というプロセスを踏むのに比べて全く躓く要素がないため、大変初心者に寄り添ったチュートリアルになっているなと感じました。

Next.jsの自体の面白さ

フロントエンドの経験は浅く、Laravelでテンプレートエンジンを普通に使い、一部Vueのコンポーネントを組み合わせるタイプの開発を長くやっていました。今回Next.jsのチュートリアルを通して、フロントエンドに注力するとこうなるのか！という体験ができました。
React Server ComponentとServer Actionsの組み合わせを組み合わせると、以下のようなコンポーネントができます。

1async function fetchCardData() {
2  noStore();
3  try {
4    const invoiceCount = await sql`SELECT COUNT(*) FROM invoices`;
5
6    const numberOfInvoices = Number(invoiceCount.rows[0].count ?? '0');
7    console.log('Number of invoices:', numberOfInvoices);
8
9    return numberOfInvoices;
10  } catch (error) {
11    console.error('Database Error:', error);
12    throw new Error('Failed to fetch card data.');
13  }
14}
15
16export default async function CardWrapper() {
17  const numberOfInvoices = await fetchCardData();
18
19  return (
20    <>
21      <Card title="Total Invoices" value={numberOfInvoices} type="invoices" />
22    </>
23  );
24}

普段はバックエンドからフロントエンドのページにデータを渡すという意識で開発していたため、このコンポーネントごとに必要なデータを必要なときに必要なところから取ってくるというのは結構おもしろく感じました。結局データの取得元がAPIかDBかなだけで、APIを立てる手間が省ける分、単純にオトクな感じがします。
しばらくこれで色々作ってみて、チーム開発においてどうなのか考えてみたいですね。

やってみての感想

以前のNext.jsを知らない上にPHPに慣れているからかもしれませんが、App RouterとServer Actionsを使ったアプリ開発は違和感なく、普段のコーディングよりシンプルに作れるように感じました。
特にスピード感が優先される初期開発などにサクッと作ってVercelにデプロイし、スケールした際にバックエンドを分離したりインフラを移行したりするのはいい選択肢になりそうです。
とても面白かったのでちょっと腰を据えてNext.jsに取り組んでみようかと思います。
お読みいただき、ありがとうございました！