msksgm’s blog

msksgm’s blog

Webエンジニアです。日々の勉強記録、技術書感想、美術観賞感想を投稿します。

「Real-World Next.js」感想

概要

Real-World Next.js」を読みました。 「前提(React・Next.js の経験、読了時間)」「目的」「感想」「次に Next.js で勉強すること」「まとめ」を記述します。

前提

React・Next.js の経験

React の書籍では「りあクト!」を読んだ経験があります。 個人開発だけでなく業務でも使用した経験があり、React の基本的な構文は理解している状態でした。

最近は Next.js の公式チュートリアルを完了し、現在の業務で導入しようとしていました。 Next.js の理解度はあまり高くなく、「Next.js は React のシンタックスを使える何か」というぐらいの認識でした。 特に、SSR の仕組み、使い所を理解できておらず、特にテストとデータの取得周りの知識がない状態でした。

目的

以下の効果が得られることを目的に読み始めました。 総じて、「実務で使える知識がすぐに欲しかった」次第です。

  • Next.js の仕組み、書き方を理解する
  • Next.js のデータの取得方法、テストの記述方法を知る

読了時間

GW 中に 1 日 4 時間程度取り組み、3 日程度で読了しました。 ただし、主目的は「実務で使える知識をすぐに手に入れる」だったため、現在の実務では使わないであろう内容は読み飛ばしています。 具体的には、UI ライブラリ、GraphQL、デプロイ、GraphCMS、SEO の高め方、EC サイトの構築、といった内容を飛ばしました。

感想

具体的かつ丁寧な説明によって、Next.js に対して認識が曖昧で不安だった部分をある程度解消できました。 具体的には以下の部分で理解が深まりました。

  • SSRCSR、SSG の効果やユースケース
  • 外部 API に対してデータの取得方法
  • Next.js の Route API の使い方、ユースケース
  • Custom Server について
  • テスト(react-testing-library)の実装方法
  • 認証認可

これらの部分は、公式チュートリアルでも説明があったり、説明に参考リンクがあったりした部分なので、人によっては当たり前に感じる可能性があります。 ただ公式チュートリアルの解説は簡潔すぎる部分が個人的に多いと感じたので、より具体的にステップを踏みながら学びたいときにおすすめできる内容だと思いました。 特に「Real-World Next.js」ではチャプターのトピックごとにサンプルコードが GitHub に上がっているため、わからない部分を明確化できます。 そして、この書籍を読んだ後にチュートリアルを再び読んでみたら、既に説明してあったり納得感がある説明だったりしたことに気がつきました。

自分が学びたかった基礎的な部分だけでなく、GraphQL、デプロイ、EC サイトの構築といった、実践的な部分にも触れられます。 自分は読み飛ばしたため、具体的に良いかどうかはわかりませんが、しっかり読んでみても得られるものが多いと思っています。

この本を読む上で、必要となる前提知識は React の構文を知っていること、Next.js の公式チュートリアルを終えていることだと思いました。 その 2 つを完了していれば難なく読むことができます。

次に Next.js で勉強すること

以下のことに取り組む予定です。

  • 実務で適用する
    • 雰囲気で実装していた部分を理解できたので、実務で適用してきます
    • 特にデータの取得と、テストについて取り組んでいきます
  • RealWorld を実装する
    • ややこしいですが、RealWorldというプロジェクトがあります
    • 仕様が定義されているので、それに沿った実装をしていく内容です
    • TypeScript、Next.js はなさそうなので、時間があれば実装していきたいと考えています

まとめ

  • Next.js の基本的な知識をすぐに得るために、「Real-World Next.js」を読んだ
  • 基本的な記述方法、概念について述べられていて目的と合っていた
  • すぐに実践に活かせそうなので、取り組んでいく