Next.jsには便利な機能が用意されている

HTMLとCSSだけでWebページを作っていたときは、 ページを移動するにはaタグ、 画像を表示するにはimgタグを使っていました。

<a href="/blog/">
  ブログを見る
</a>

<img
  src="/images/photo.jpg"
  alt="記事の写真"
>

Next.jsでもHTMLの要素は使えますが、 より快適なページ移動や画像表示を実現するために、 Next.js独自の機能が用意されています。

import Link from "next/link";
import Image from "next/image";

<Link href="/blog">
  ブログを見る
</Link>

<Image
  src="/images/photo.jpg"
  alt="記事の写真"
  width={800}
  height={500}
/>

まずは細かな仕様を覚えるのではなく、 それぞれが何を担当しているのかを見ていきます。

今回紹介する4つの便利な機能

今回のNext.jsとmicroCMSを使ったWebサイト制作では、 主に次の4つの機能を使用しました。

4つともNext.jsでよく使う便利な機能ですが、 厳密には同じ種類ではありません。

Linkはページを移動するための機能

Linkは、 Next.jsのサイト内で別のページへ移動するときに使う コンポーネントです。

import Link from "next/link";

<Link href="/blog">
  ブログを見る
</Link>

HTMLのaタグに似ていますが、 Next.jsのページ移動に合わせた仕組みが用意されています。

Imageは画像を表示するための機能

Imageは、 通常のimgタグと同じように画像を表示します。

さらに、画像の大きさや読み込み方を調整し、 ページを快適に表示するための仕組みも持っています。

import Image from "next/image";

<Image
  src="/images/photo.jpg"
  alt="記事の写真"
  width={800}
  height={500}
/>

notFound()は404を表示するための機能

microCMSの記事詳細ページでは、 URLに指定された記事が存在しない場合があります。

そのようなときにnotFound()を使うと、 404ページへ切り替えられます。

if (!article) {
  notFound();
}

実際に表示される404画面の内容は、 not-found.tsxというファイルで作ります。

useRouter()は処理からページを移動する機能

Linkは、 画面に表示されたリンクをユーザーがクリックして移動します。

一方のuseRouter()は、 ボタン操作やフォーム送信などの処理をきっかけに ページを移動したいときに使います。

const router = useRouter();

router.push("/contact");

どのように使い分ける？

4つの機能は名前だけを見ると難しく感じますが、 使用する場面で分けると分かりやすくなります。

microCMSサイトではどこで使う？

今回制作したNext.jsとmicroCMSのWebサイトでは、 4つの機能を次のような場面で使用しました。

詳しい内容は個別記事で解説します

この記事では、 4つの機能の役割と使用場面を簡単に紹介しました。

それぞれの詳しい仕組みやコードについては、 個別の記事として一つずつ取り上げる予定です。