Zenn
📘

「Next.js+ヘッドレスCMSで始めるモダンWebサイト制作入門」を読んで

2024/10/03に公開
Next.js
microCMS
入門
tech


Amazonリンク

はじめに

一度Next.jsとmicroCMSを使ってサイトを作成したことはありましたが、あまり覚えていない＋正しい構築方法が知りたいという思いで、はじめました。

環境構築

  • Node.js v22.9.0
  • Next.js v14.2.12
  1. npm initでpackage.json作成
  2. volta pin node@latestでnode.jsバージョン指定
    3.プロジェクトディレクトリに入り、volta pin node@latestでnode.jsバージョン指定
    4.npm run devでスタート画面が見れれば成功
app
├── _actions
├── _components
│   ├── Article
│   ├── ButtonLink
│   ├── Category
│   ├── ContactForm
│   ├── Date
│   ├── Footer
│   ├── Header
│   ├── Hero
│   ├── Menu
│   ├── NewsList
│   ├── Pagenation
│   ├── SearchField
│   └── Sheet
├── _constants
├── _libs
├── contact
├── fonts
├── members
└── news
    ├── [slug]
    ├── category
    │   └── [id]
    ├── p
    │   └── [current]
    └── search
public

学べた点

next/imageの使い方

  • next/imageを使うことによってブラウザ幅に適したサイズの画像を自動で生成して最適化してくれる。
  • 画像はpublicフォルダ内に格納
import Image from "next/image";

export default async function Home() {
  return (
    <>
        <Image
          className={styles.bgimg}
          src="/img-mv.jpg"
          alt=""
          width={4000}
          height={1200}
        />
    </>
  );
}

Linkの使い方

  • 「リロードしないことで高速な遷移を行うことができる」らしい
import Link from "next/link";

export default function Article({ data }: Props) {
  return (
     <>
        <Link href="/">リンク</Link>
     </>
  );
}

Nested-layouts

  • 階層ごとにlayout.tsxをおけば、各階層での共通レイアウトが設定できる。

クライアントサイドでの実行もできる

  • 先頭に"use client"を指定すれば、簡単にクライアントコンポーネントを利用できる
  • Reactフックとか。今回はハンバーガーメニューのボタンクリックなどで使用していた。

microCMSとの連携

  • 繋ぎ込みは簡単だが、スキーマをしっかりと設計しないとTypescriptがごちゃごちゃになりそう。（慣れの問題なのかも知れないが）

SSG、ISRの使いわけ

  • 下記の記述だけで、SSR,ISRに対応できる
export const revalidate = 10;

Next.jsのみでカテゴリー分け、ページネーション、検索機能もつけれる

デプロイ

VercelとmicroCMSの設定だけで、CMS側もSSGも自動でビルド・デプロイしてくれる。

感想

  • ページ遷移がとにかく早い！
  • Reactの知識がないと難しいので、それなりに学習コストは高い
  • コンポーネントなど細かく作り込んでいくコストもかかる

Next.jsを使った参考サイト

https://cwt.jp/category/58/1

Discussion