7．Headerコンポーネント

NextJS

src/components/Header.js

import Link from "next/link";

export default function Header() {
  return (
    <header>　<--- ※1
      <nav>
        <ul>
          <li><Link href="/">Home</Link></li>
          <li><Link href="/about">About</Link></li>
          <li><Link href="/contact">Contact</Link></li> 
        </ul>
      </nav>
    </header>
  );
}

pagesディレクトリ直下ではなく、srcディレクトリ直下にcomponentsディレクトリを置くのが一般的です

※1…ここを<Header>とすると「RangeError: Maximum call stack size exceeded」というエラーが発生します。Header関数が自分自身を呼び出しているので永遠にループするためです

src/pages/index.js

import Header from "@/components/Header";  <--- エイリアスを使っていない場合は../components/Header

export default function Home() {
  return (
    <>
      <Header />
    </>
  );
}
BACK