見た目・画像・ページ情報を整える

CSSは、適用する範囲を意識する

全体の文字や背景にはグローバルCSS、部品ごとの見た目にはCSS Modulesが使えます。Tailwind CSSも選択肢ですが、Next.jsの必須条件ではありません。キーボードのフォーカス、文字のコントラスト、狭い画面も合わせて確認します。

画像とフォントで、表示の揺れを減らす

next/imageは画像表示の最適化を助けます。サイズやaltの意図を考え、画像の場所を確保しましょう。外部画像には許可設定が必要な場合があります。next/fontはフォントの読み込みを扱いますが、日本語フォントの容量や必要な字種にも注意します。

metadataはページを説明する情報

タイトルや説明文はmetadata、データに応じた情報はgenerateMetadataで設定できます。OG画像は共有時の見え方を助けます。metadataのexportはServer Componentsで使います。設定しただけで検索順位が保証されるわけではありません。

ページの説明と画像

import Image from 'next/image'
import styles from './page.module.css'

export const metadata = {
  title: 'このノートについて',
  description: 'ReactとNext.jsの学習記録をまとめています。',
}

export default function AboutPage() {
  return (
    <main className={styles.page}>
      <h1>学びを、小さく積み重ねる</h1>
      <Image src="/notebook.jpg" alt="開いた学習ノート" width={800} height={500} />
    </main>
  )
}

public/notebook.jpgを自分で用意します。装飾だけの画像ならalt=""を選ぶ場合があります。

部品のCSS

.page {
  max-width: 56rem;
  margin-inline: auto;
  padding: 2rem 1.25rem;
}

.page img {
  max-width: 100%;
  height: auto;
}