tech

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

/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コンポーネントを読み込み描画します。

/pages/index.js:

import Navbar from '../components/Navbar'

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

/pages/about.js:

import Navbar from "../components/Navbar";

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

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

ナビゲーションバーを共通レイアウトとして使用する

ただしこのままではページごとにNavbarコンポーネントを読み込む必要があるので共通のレイアウトとして利用できるようにします。まずLayoutコンポーネントを作成します。

/components/layout.js:

import Navbar from "./Navbar";

export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
    </>
  );
}

Next.jsは、Appコンポーネントを使用してページを初期化します。pagesディレクトリに_app.jsを作成することによって、これをオーバーライドして、ページの初期化を制御できます。(開発サーバーを再スタートする必要があります)

/pages/_app.js

import Layout from '../components/layout'

export default function MyApp({ Component }) {
  return (
    <Layout>
      <Component />
    </Layout>
  )
}

これに伴い各ページのコンポーネントに変更を加えます。各ページのコンポーネントには中身の部分のみを記述します。このコンポーネントがMyAppコンポーネントに渡りLayoutコンポーネントにはchildrenとして渡されます。

/pages/index.js

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

/pages/about.js

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

これで共通レイアウトを使用する前と同様の振る舞いをおこなうように出来ました。

return Tech

owned service

more

contact

ひとつひとつの出会いを
大切にしています。

「課題を発見できる価値」
「本質にアプローチできる価値」
「唯一無二を提案できる価値」
わたしたちの強みは、ひとつひとつの出会いを大切にし、
共により良いほうへ向かっていけるよう真摯に取り組むことです。
オンラインでも個別の相談の場を設けます。
お気軽にご連絡ください。

お問い合わせフォームへ