100秒で分かるNextjsの公式チュートリアル

Nextjsの公式チュートリアルを実践したので、簡単に内容をまとめました。
全十六章あります。

第一章　Getting Started

プロジェクトを作成して、appやscriptなどのフォルダ構造の説明があります。
サーバーを起動してブラウザで確認して終了です。

第二章 CSS Styling

tailwindとCSSモジュールの適用方法について。
なお、この章以降はtaiwindを使用していきます。
clsxというclassnameを動的に変更するライブラリの紹介もありました。
今までは{}でjavascriptのif文でやっていたため、参考にしようと思います。

<span
      className={clsx(
        'inline-flex items-center rounded-full px-2 py-1 text-sm',
        {
          'bg-gray-100 text-gray-500': status === 'pending',
          'bg-green-500 text-white': status === 'paid',
        },
      )}
    >

第三章 フォントと画像の最適化

interやlustitanaなどフォントを切り替える方法と、画像表示について。
画像を表示する際は<img>を拡張した<Image>を使うことが推奨されています。

第四章 レイアウトとページの作成

ページ構成について。
通常はファイル名がurlになりますが、nextjsはファイル名はpage.tsxで統一されており、一つのフォルダに対してpage.tsxが一つの構成になってます。

第五章　ページの移動

リンク間の移動は通常aタグですが、nextjsではlinkコンポーネントを使うことを推奨しています。
nextjsはlinkが書かれた先のコードをプリフェッチするので、ページ遷移時に遅延がほぼないらしいです。

第六章 データベースの設定

varcelに今回のプロジェクトをデプロイした後、データベースを設定しました。
デプロイは初めてしたのですが、かなり簡単にできて驚きました。

第七章 データの取得

サーバーからデータを取得する際に、前のリクエストの完了に応じて処理を実行するウォーターフォールと全てのデータ取得を同時にする並行データフェッチのやり方について違いがあります。

第八章 静的および動的レンダリング

静的と動的なレンダリングの違いについて。
動的レンダリングはユーザーの情報によってページの表示が変わります。

第九章 ストリーミング

ダッシュボードアプリの情報をストリーミングする際のloading表示について。
ストリーミングは小さいチャンク単位で行われ、段階的に転送されるためこの画像のようにloading中のデータ箇所ではスケルトンを表示することができます。

第十章 部分的な事前レンダリング

前章と重なるような内容になりますが、静的なコンポーネントは事前に読み込んでおき、動的なコンポーネントは段階的に読み込んでいくことを部分的な事前レンダリングというそうです。

第十一章 検索とページネーションの追加

クエリに入力情報やページ情報を追加する方法について。
入力して検索ボタンを押さなくても表示コンテンツが変わるのはreactならではだと思いました。

第十二章 データの変更

サーバーアクションズはサーバー上でAPIを実行するため、セキュリティ面で優れています。
そのためクライアントサイドであるブラウザの検証ツールに実行したAPIの履歴が残らないです。
取得、登録、削除などのデータ変更についてハンズオンします。

第十三章 エラーの処理

try catchでエラー処理するところから、共通エラーページの作成や特定のエラーページの作成をします。

第十四章 アクセシビリティの向上

imageのaltをつけないとwarningが出るなど、アクセシビリティの問題を見つけてくれるプラグインの紹介があります。
またバリデーションを設定して、フォームの入力を検証できるようにしました。

第十五章 認証の追加

NextAuth.jsを使って、ログイン、ログアウト等のユーザー認証を実装します。

第十六章 メタデータの追加

メタデータはSEOを強化したり、Twitter等で引用した際の画像を表示するOpen Graphなど、外観改善にもつながります。
今まで作成したページについてメタデータを追加していきます。

振り返り

Nextjsでアプリを作ったことはあるのですが、使ったことのないライブラリがいくつかあり勉強になりました。
業務でも使うことがあれば提案していきたいと思います。