📚

読書感想文「実践 Next.js」

2024/06/08に公開

概要

書籍

読もうと思った背景

業務にて、Next.js で書かれたアプリケーションを本格的に触るようになり、Next.js への理解を深める必要性が生まれました。

それと同時期に、 自分の周りで、本書の輪読会が企画されました。

良い機会だと思い、輪読会に参加する形で読書に踏み切りました。

本文 概要

サブタイトルの通り、Next.js v13 から導入された App Router モデルに焦点を絞った解説本です。

github上にサンプルコードが用意されており、サンプルコードを解説する形で App Router モデルの各種機能を解説する...といった流れで進みます。

Next.js は React とも密接にかかわるのですが、 React の基礎は本書の対象外です。
事前に React の基礎を押さえたうえで本書を読み始めると、Next.js の新機能の学習に専念できそうです。

ハンズオン形式の本ではないため、コードをコピペするだけでは動かないことが多々あります。
ご注意ください。

ハンズオン形式の本ではないため、「コードをコピペしつつ、自分でコードを組み上げながら学びたい!」という方には向いていないかもしれません。

一方で、「動くサンプルアプリケーションを触りながら仕組みを学びたい」という方には向いていると思います。

教訓・学び・感想

フロントエンドの開発経験は少なく、新鮮な気持ちで学習に取り組みました。

特に、「デフォルトでキャッシュが有効」という挙動です。

キャッシュは、「パフォーマンス向上のためのオプション機能」ぐらいの認識だったので、「デフォルトでキャッシュが有効」という発想は自分には無く、非常に驚きました。

数多くのパフォーマンス向上機能を学び、フロントエンドでは、「パフォーマンス向上」は非常に重要な要素だと、認識を改めました。

特に、パフォーマンス向上の観点で、以下二点が非常に重要だと感じました。

  • Server Component と Server Action を適切に設定し、重たい処理をバックエンドに委譲する
  • キャッシュを上手に設定する

◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇

動くアプリケーションを基に解説が進むため、各機能のユースケースが非常にイメージしやすかったです。

  • 「こういう機能や挙動を実現したいから、この機能を使う」「こういう時に困るから、こういった機能や設定を使用する」といった具合

◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇ ◆ ◇

従来だと、クライアント側のマシンスペックが期待できなかったので、アプリケーションロジックはサーバー側での実装が主流でした。
Next.jsを使う(≒現在)と、クライアント側のマシンスペックもいくらか期待でき、アプリケーションロジックをクライアント側で実装するか、サーバー側で実装するか、エンジニアが選択できるようになったかと思います。

(アプリケーションロジックを、全部クライアント側で実装するという選択をとったのが CSR という認識)

選択肢の余地が生まれて自由度は上がりましたが、言い換えると「選択することが増え、適切な設計が難しくなった」ようにも思います。

ロジックを、クライアント側で実装するか、サーバー側で実装するか。

要件やパフォーマンスを意識したうえで、適切な設計判断を下せる能力が、Next.jsを使いこなすポイントになりそうだ、と感じました。

Discussion