実践Next.js ——App Routerで進化するWebアプリ開発

著者の一言

この記事を読むのに必要な時間:およそ 1 分

2023年3月17日,Reactの新しい公式ドキュメントが公開されました。その公式ドキュメントのなかでも特に筆者の目にとまったのは「Start a New React Project」という冒頭のセクションです。そこには「新しいWebサイトをReactで構築したい場合は,Reactベースのフレームワークを採用することをお勧めする」と明記されており,本書のテーマである「Next.js」が筆頭に取り上げられています。

Next.jsは年々採用実績が増しているフレームワークです。本書を手に取られた方のなかには「すでにプロダクトに採用している」という方も少なくないでしょう。本書の執筆を始めた2023年春現在,Next.jsは大きな転換期にあります。新しく導入された「App Router」はこれまでの実装パターンを覆すものであり,これからどのように開発を進めればよいのか,誰もが手探りの状況といっても過言ではありません。

Next.jsの進化はフレームワーク単独のものではなく,ベースとなるReactの進化が背景にあります。Next.jsのApp Routerには,Reactの新機能であるRSC(React Server Components)が導入されており,App Routerはこの機能を活かしたいくつかの優位性をもちます。

まず「パフォーマンス」が筆頭に挙がります。App Routerには,RSCによるレンダリングだけでなく,このレンダリング結果をパフォーマンスに繋げる「キャッシュ」が導入されています。快適に利用できるWebサービスは魅力的な付加価値となりえ,競合サービスとの差別化が期待できます。

つぎに「開発者体験」です。よりよい開発者体験は,目的を達成するための余裕をもたらします。パフォーマンス観点のベストプラクティスは開発者体験を犠牲にしがちですが,Next.jsはどちらも諦めることなく「より速く,より使いやすく」という理想を叶えるため進化してきたと,筆者の目には映っています。

そして「多様性」です。アプリケーション配信・運用において,どのような関連システムで構成されているかという背景は重要です。システム構成に適したフロントエンドの実装方法,配信方法は多岐にわたります。多様性に応える選択肢が多く提供されている点は,Next.jsが広く採用されている理由のひとつでしょう。

本書を通じてNext.jsへの理解を深めていくなかで,この3つの優位性に気づくことでしょう。なによりApp Routerには「Reactアプリケーション開発が今後どのようになるのか?」という未来が示されており,今すぐ試すことができます。Next.jsの進化を迎える読者の皆さんにとって,本書が一助となれば幸いです。

「はじめに」より

著者プロフィール

吉井健文(よしいたけふみ)

フロントエンドを専門とするエンジニア。著書として『フロントエンド開発のためのテスト入門』(翔泳社,2023年),『実践TypeScript』(マイナビ,2019年)があるほか,WEB+DB PRESSへの寄稿なども行う。Twitter: @takepepe