Zenn
🌌

現実世界のNext.js

2023/02/02に公開
Next.js
React
初心者
読書
オライリー
tech

始めに

本記事ではNext.js本「Real-World Next.js (”現実世界のNext.js”といった意味）」を紹介します。この本はオライリーサブスクで読めます。本記事は以前にQiita投稿した記事の再構成です。

20220326_nextjs.png
原題 「Real-World Next.js」
リリース年月 2022/2 （🚨少し昔の本です）
カテゴリ Next.js入門
お勧め度（5段階） ⭐⭐⭐☆☆
対象者 Reactは軽く分かるけどNext.jsは全然知らない人🔰
概要 ● Next.js入門書
● 内容としては公式チュートリアルと大差なし（とはいえ、書籍で読めるのはありがたい）

内容

書籍構成

  • パート1第1～3章Next.jsの機能紹介
  • パート2第4～11章各機能のNext.jsでの実装方法の紹介
    • 8章以降は読み飛ばしています
  • パート3第12～13章Webアプリケーション例
    • 特に興味なかったので読み飛ばしています
  • 第14章まとめ
  • 書籍公式GitHubリポジトリ

第1章「Next.jsの簡単な紹介」

第2章「レンダリング戦略」

  • 公式リポジトリコード
  • 【概要】SSR/CSR/SSG(ISR含む）の簡単な記述例を紹介
  • SSR
    • 【利点】レンダリングのコストがサーバ側に移るので「セキュリティ/互換性/レスポンス」の面で有利
    • 【欠点】サーバ側にWebアプリケーションを要実装／レンダリングするのでさすがにSSGよりは遅い
    • Next.jsはデフォルトだと静的ページになる
    • 【SSRの使い方】getServerSideProps()というasync関数をexportするとこのページがプリレンダーされるようになる
      • 関数の戻り値をページのコンポーネント内で使える
  • CSR
    • 普通のReact
  • SSG
    • ビルド時に生成される静的ページ
    • それだと使い勝手が悪いのでNext.jsではISR（Incremental ~）を採用
      • revalidate時間を決め、その時間を過ぎてから最初のリクエストで再レンダリング

第3章「Next.jsの基本とビルトインコンポーネント」

  • 公式リポジトリコード
  • コンポーネントファイルの配置をもとに自動でルーティング
  • ルートパラメータはファイル名を［～]とすることで設定可能（例：[name].js)
    • getServerSidePropsで取得してprops経由で渡す方法とuseRouterを使う方法あり
      • 処理時間かかる内容でもないので、後者の方が楽そう
        image.png
        image.png
  • useRouterでは上記ルートパラメータとクエリパラメータが同じuseRouter()結果に格納される。同じ名前の場合はルートパラメータが優先される
  • <Link>コンポーネント(aタブの代わり)。デフォルトだとプリロードが有効。無効にするには preload={false} を指定する
    image.jpg
  • リダイレクトを行う場合はいくつか方法あり
    • 最初はuseEffect使うのが楽そう
    • ページの遷移はrouter.pushとrouter.replaceの両方で行えるが、ページ履歴にリダイレクト前のページが残るかどうかの違い（push:残る、 replace:残らない）
  • 静的ファイルの扱い
    • /public/に配置すると自動で静的ファイルとしてみなしてアクセス可能
  • CLS対策
    • 画像を埋め込む場合、標準の<image />で画像を埋め込むとCLS(ローディング前後の位置ずれ）が発生しSEO的に不利
    • Next.jsでは独自画像コンポーネント<Image />が用意されておりCLS対策済
      image.png
  • ＜Image＞コンポーネントのlayoutプロパティで画像の引き延ばし設定を変更可能（fixed:固定サイズ、responsive:デバイス横幅に合わせて調整等）
  • メタ情報
    • <Head>コンポーネントを使う
      • コンポーネント化して複数ページで使う回すのが一般的
  • _app.js
    • 全ページ共通で表示するコンテンツを定義（ナビゲーションバー等）
      image.png
  • _documen.js
    • <html>や<body>タグのつくりをカスタマイズ可能
    • 4種のコンポーネントを使用（どれも抜けてはいけない）
      1. <Html>⇒<html>タグ(lang等の設定)
      2. <Head>⇒これまで見てきた<Head>とは別物（動作はほぼ同じ）
      3. <Main>⇒ページコンポネント
      4. <NextScript>⇒カスタムスクリプト
      • サーバ側の処理（getServerSideProps等）は実装不可

パート2「ハンズオン」

  • パート1（～3章）はNext.jsの個別要素を紹介してきた
  • パート2（4〜11章）では特定のトピックのNext.jsでの実現法を紹介する
    • 通常のフロントエンドでの実装方法と同じ内容を説明している箇所が多々あり
      • 「Next.jsで実装するなら～」という趣旨ですので、必ずしもNext.js独自の手法というわけではない
    • 各章トピック
      4.「APIをたたく」
      5.「状態管理」
      6.「CSS」
      7.「UIフレームワーク」
      8.「カスタムサーバ」
      9.「テスト」
      10.「SEO・性能」
      11.「展開先」

第4章「データ取得」

  • 公式リポジトリコード
  • 環境準備
    • create-next-appの環境にAtomic Design用にコンポーネントフォルダを作成
    • コンポーネントをexportしない汎用スクリプトはユーティリティとしてフォルダを分ける（テストファイル
      *.test.jsも作っておく）
    • /publicフォルダ配下にデータ種別フォルダ（css,js等）とmanifest.jsonを作成
    • CSS：標準的な方法はない（6,7章でCSSとUIフレームワークについて扱う）
    • 3rdパーティライブラリ用ラッパスクリプトは/libフォルダ配下に置く
    • 準備終了後フォルダ構成
      image.png
  • データ取得
    • Next.jsはバックエンド機能があるのでDB/ファイルシステム等にアクセス可能
      • ただ、セキュリティ的に問題あり。フロントエンドエンジンらしくAPI経由でのアクセス推奨
  • サーバ側からのAPIアクセス方法は2種
    1. Node.jsのhttpライブラリ
    2. 3rdパーティ　　〃
    • [一般］APIの主な認証手段Oauth2.0 / JWT / APIキー
    • 例：axiosでRest API発行（ヘッダにAPIトークンを載せる。トークンは。envで管理）
  • クライアント側
  • GraphQL

第5章「状態管理」

  • Next.jsの状態管理はReact同様コンテキストAPIやReduxで管理する
  • コンテキストAPI：useState（)を使う。_app.jsに入れ込むことで全ページ共通の状態管理が可能に（当然useContext(）でもOK）
  • Redux
    • 追加ライブラリ：reduxreact-redux（release）とredux-devtools-extension（dev）
    • /redux/フォルダ作成（reducerを書いたスクリプトを置く）
    • ストア（reducer+state)はcreateState()で作る

第6章「CSSと組込みタイリング方法」

  • Node.jsでのCSSの基本的な使い方を紹介する
  • Styled-JSX
    • <style jsx>{CSS表記}</style> ⇒ 書いたコンポーネントに適用
    • <style jsx global>{CSS表記}</style> ⇒ 全コンポーネントに適用
  • CSS modules
    • Styled-JSXだとIDE対応が不十分かつパフォーマンスに難あり
    • CSS modulesは「プレーンなCSS表記」＋「パフォーマンスオーバーヘッドなし」
    • スクリプト同様にimportして使える
      • 重複しないクラス名が自動的に割り当てられる
    • グローバル適用するには：globalを追加
    • 他のルールを継承（?)して拡張したい場合はcomposes:
    • CSS modulesはNext.jsに追加インストール不要で即使用可能
  • SASS
    • 追加：sass（release）
    • CSS modulesでSASS/SCSS文法利用可能に

第7章「UIフレームワークの使用」

  • 使うUIライブラリはReactと同等（Chakra UI / TailwindCSS / ヘッドレスUI等）
  • Chakra UI
    • 追加：@chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6 @chakra-ui/icons
    • _app.js内でページコンポーネントを<ChakraProvider>でラップする
    • 既存のテーマをオーバーライドするにはextendTheme()をインポートして指定
    • カラーモード対応(ダークモード等）も_document.jsに少し変更を加えることで対応可能
  • TailwindCSS
    • 概要：CSSルールの追加だけなので フレームワーク非依存
    • 追加（dev)：autoprefixer postcss tailwindcss
    • tailwind.config.js：テーマやダークモード等の設定が行える
    • postcss.config.js：内部で使用しているPostCSSの設定が行える
    • _app.js内でページコンポーネントを<ThemeProvider>でラップ
  • Headless UI
    • TailwindCSSを補間するような形でCSSスタイルのない動的コンポーネントのみを提供（TailwindCSS非依存）
      • 作っているのはTailwindCSSと同じ組織

第8章「カスタムサーバ」

  • Next.jsのバックエンドをExpress.jsやFastifyサーバと一緒に運用する方法について
  • スキップ

第9章「テスト」

  • Next.jsのテストは特に特別なことはなし（Jest/CypressやReact Testing Libraryを使用
  • 別の本を読む予定なのでスキップ

第10章「SEO対策」

  • Next.js自体がSEOに対して特別なことはなし
  • ただ、第2章で述べたようにNext.jsはCSR/SSR/SSGを組み合わせでSEO対策が可能
  • また、パフォーマンス評価用の組込み数reportWebVitals()がある（Googleと共同開発）
    • Vercelにデプロイするとダッシュボードが提供される

第11章「さまざまな環境へのデプロイ」

  • Next.jsアプリケーションのデプロイ方法（Vercel／CDN（静的サイト）／その他（各種PaaS）／コンテナ化）が軽く紹介されている
  • 特質すべき内容なし。スキップ

パート3

第12~13章「アプリケーション例」

  • 実際のアプリケーションに近い例（外部サービスの利用等）を紹介
  • あまり興味がないのでスキップ

第14章「次の学習のためのガイド」

  • これまでのまとめと次に学習すべきことについて
  • 習作アプリケーション向けテーマ
    • ストリーミングWebサイト
    • ブログプラットフォーム
    • リアルタイムチャットWebサイト
  • 追加の学習すべきこと
    • TypeScript／webpack設定方法／レンダリング戦略等

最後に(読み終わった後での感想）

image.png

  • 読んでて思ったことは「必要な情報は公式ドキュメント・チュートリアルにだいたい載っているな」ということです
  • 本書は「重要な内容をシンプルに説明」というスタンスを取っていますが、これが公式チュートリアルと重複してしまっており、比較したときに「ほぼ同じ内容じゃないかよ」と感じることが何回かありました
  • とはいえ、本書籍独自の内容も当然ありますし、コンテンツの形式との違いや公式視点・第三者視点での違いなどもあり、どちらを好むかは人それぞれかと思います

オライリー・ジャパンブスクについて

オライリー・ジャパンサブスクO'Reilly「Learning Platform」では、オライリー・ジャパン書籍を初めに、約6万冊の書籍や動画等が読み放題です。話題になった技術書は半数以上は読める印象です。英書がメインなのがネックですが、ブラウザの翻訳機能を使えば問題なく読めます。個人的にこのサブスクで学習の質が劇的に改善したので、全然関係ない立場ですが勧めて回っています。

概要／使い方／価格などは 以前にまとめたこちらの記事 を参考にしてください

Discussion