Zenn
🍊

Learn Next.js学習メモ①

に公開
Next.js
tech

今までApp Routerを触った経験がなかったので、改めてNext.jsをちゃんと勉強してみようと思いLearn Next.jsを始めました。
https://nextjs.org/learn/dashboard-app

※この記事は自分用の学習メモです。

Chapter1

  • pnpm install
  • vercelのGitHubにあるサンプルプロジェクトについて説明

Chapter2

CSS Stylingについて。この辺りは触ったことがあるので項目だけ記載。

  • アプリケーションにグローバルCSSファイルを追加する方法
  • スタイリングの2つの異なる方法：Tailwind と CSS モジュール
  • clsxユーティリティパッケージを使って条件付きでクラス名を追加する方法

Chapter3

フォントの最適化の重要性

フォントはウェブサイトのデザインにとって不可欠な要素。しかし、カスタムフォントを使用する際、フォントファイルの取得と読み込みが必要で、これがパフォーマンスに悪影響を及ぼすことがある。

累積レイアウトシフト（Cumulative Layout Shift, CLS）

  • 定義: Googleがウェブサイトのパフォーマンスとユーザー体験を評価するために用いる指標。
  • フォントとCLS: フォントに関連しては、ブラウザが初期にフォールバックフォントやシステムフォントでテキストを表示し、カスタムフォントが読み込まれた後にこれに切り替わるときにレイアウトシフトが発生。この切り替えはテキストのサイズや間隔、レイアウトを変更し、結果として周囲の要素が移動することがある。

Next.jsの対策: next/font モジュール

  • Next.jsではnext/fontモジュールを使用してフォントの自動最適化を実現。
    • このモジュールはビルド時にフォントファイルをダウンロードし、他の静的アセットと共にホストするため、ユーザーがアプリケーションにアクセスする際にパフォーマンスを低下させる追加のネットワークリクエストが発生しない。
      これにより、最適なユーザー体験を提供しつつ、サイトのパフォーマンスを維持可能。

<Image> コンポーネント

<Image> コンポーネントはHTMLの <img> タグの拡張であり、自動的な画像最適化を提供する。これには以下が含まれる：

  • 画像が読み込まれる際のレイアウトシフトを自動的に防ぐ。
  • 端末のビューポートが小さい場合、大きな画像を送信しないように画像のリサイズを行う。
  • デフォルトで画像の遅延読み込みを行う（画像はビューポートに入ると読み込まれる）。
  • ブラウザがサポートしている場合、WebPやAVIFなどの現代的なフォーマットで画像を提供する。

始めてみた感想

  • 重要なポイントに集中できるようにサンプルプロジェクトを作ってくれているので助かる
  • クイズが出てくるのでその場で復習できるのも良い◎
  • 練習問題があるので自分で手を動かして理解できる
  • じっくり進めていると時間がかかってしまうので知っている項目は飛ばした方が良いかも

Reactの基礎編もあるのでLearn Next.js終わったらこっちも覗いてみたい（順番逆だけど...）
https://nextjs.org/learn/react-foundations

Discussion