Next.jsの理解を深める！Chapter 1-3

https://nextjs.org/learn/dashboard-app/getting-started

Chapter 1

• /app: Contains all the routes, components, and logic for your application,
  this is where you'll be mostly working from.
• /public: Contains all the static assets for your application, such as images.

Chapter 2

• CSS-in-JS libraries such as styled-jsx, styled-components, and emotion.
  RSCに対応してるCSS-in-JSとしてstylexとかPanda CSSのほうが良さそう。

Chapter 3（fonts）

Why optimize fonts?
Fonts play a significant role in the design of a website, but using custom fonts in your project can affect performance if the font files need to be fetched and loaded.

Cumulative Layout Shift is a metric used by Google to evaluate the performance and user experience of a website. With fonts, layout shift happens when the browser initially renders text in a fallback or system font and then swaps it out for a custom font once it has loaded. This swap can cause the text size, spacing, or layout to change, shifting elements around it.

• Googleのパフォーマンス評価システム（Core Web Vitals）にCumulative Layout Shiftがあって、
  避けないと低評価となってSEOにも影響出てしまう。Cumulative Layout Shiftとは、
  レイアウト崩れによってパフォーマンスに影響が出るようなもの。
  （なにか商品を購入する購入するときに異なるボタン押してしまうなど）
  フォントサイズによってもそれが適切でないと発生してしまう。

Next.js automatically optimizes fonts in the application when you use the next/font module. It downloads font files at build time and hosts them with your other static assets. This means when a user visits your application, there are no additional network requests for fonts which would impact performance.

• Next.jsはnext/fontを利用することによってフォントを最適化できる。
  Googleフォントなど利用するとネットワーク上のリクエストが発生し、
  そのレスポンスを待つため、Cumulative Layout Shiftが発生したりする。
• でもnext/fontならビルド時にフォントファイルをダウンロードし、
  他の静的ファイルとともにホストするため、追加のネットワーク上の
  リクエストも発生せず、Cumulative Layout Shiftが発生しない。

import { Inter } from 'next/font/google';
 
export const inter = Inter({ subsets: ['latin'] });

• Interというフォントにはたくさんのアセットがあって、
  全てを読み込んでしまうとNext.jsがどんなに最適化してくれても、
  重くなってしまう。。subsetsによってlatin文字のみ必要としてる。
  weightも同じ。400と700のみ必要ならそれのみ定義する。
  そもそも400と700しかないというフォントもある。

Chapter 3（images）

Why optimize images?
Image Optimization is a large topic in web development that could be considered a specialization in itself. Instead of manually implementing these optimizations, you can use the next/image component to automatically optimize your images.

• img要素を使って画像を最適化するのはとても難しいため、next/imageに任せるべし。
  （next/imageが自動で画像を最適化してくれる）
• 表示が遅いページはだいたい画像がボトルネックとなってる。
  （画像を圧縮して読み込むだけでも変わったりする）

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import { lusitana } from '@/app/ui/fonts';
import Image from 'next/image';
 
export default function Page() {
  return (
    // ...
    <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
      {/* Add Hero Images Here */}
      <Image
        src="/hero-desktop.png"
        width={1000}
        height={760}
        className="hidden md:block"
        alt="Screenshots of the dashboard project showing desktop version"
      />
    </div>
    //...
  );
}

• widthとheightは自らアスペクト比を確認し、調整する。

https://nextjs.org/docs/app/building-your-application/optimizing/images#local-images

import Image from 'next/image'
import profilePic from './me.png'
 
export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
      // width={500} automatically provided
      // height={500} automatically provided
      // blurDataURL="data:..." automatically provided
      // placeholder="blur" // Optional blur-up while loading
    />
  )
}

• statically importedならwidthとheightを指定する必要なし。
• blurDataとは画像がはっきり読み込まれる迄ぼかしの画像を作って表示してくれる。