Next.js

Next.jsの導入

パッケージのインストール

yarn add next react react-dom

package.jsonにスクリプトコマンドを追記します

package.json

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

静的生成とサーバーサイドレンダリング

Next.jsではページという概念を中心に構成されています。ページとはpagesディレクトリ配下のjsファイルからエクスポートされているreact component です。pagesディレクトリ配下にindex.jsを作成しyarn dev を実行しlocalhost:3000にブラウザでアクセスするとindex.jsの内容が表示されるいるのが確認できます。

mkdir pages && cd pages && touch index.js

/pages/index.js

function HomePage(){
    return(
        <div>
            <h1>Welcome to Next.js</h1>
        </div>
    )
}
export default HomePage

Next.jsではページはreact component でありそれぞれのページはファイル名によってルーティングされます。
例えばpages/about.jsを以下の内容で作成した場合、localhost:3000/aboutでabout.jsの内容が表示されます。

/pages/about.js

function About(){
    return(
        <div>
            <h1>About</h1>
        </div>
    )
}
export default About

ナビゲーションバーの作成

ここまで作成したふたつのページ間を遷移できるようにナビゲーションを作成します。componentsディレクトリ配下にNavbar.jsを作成しreact component を記述します。
その際、クライアントサイドでの遷移はnext/linkからエクスポートされているLinkコンポーネントを使用します。

/components/Navbar.js

import Link from "next/link";

const Navbar = () => {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/about">
          <a>About</a>
        </Link>
      </li>
    </ul>
  )
}

export default Navbar;

ナビゲーションバーを各ページに表示させるには、pagesディレクトリ配下の各ファイルでNavbarコンポーネントを読み込み描画します。
※記述例はHomePageのみを記載しています。

/pages/index.js

import Navbar from '../components/Navbar'

function HomePage() {
  return (
    <>
      <Navbar />
      <div>
        <h1>Welcome to Next.js</h1>
      </div>
    </>
  )
}
export default HomePage

ここまででNextjsによるふたつのページを遷移するアプリケーションが完成しました。

Homeページ(http://localhost:3000/)

Aboutページ(http://localhost:3000/about)