Next.js 動的なページを作成してみよう

2020年3月19日

こんにちは、Yuuichi(@WestHillWorker)です。

今回は、LinkとuseRouterを使って、動的なページを作成していきます。

Linkのhrefでページのパスと動的なクエリパラメータを渡すコンポーネントを作成し、useRouterでコンポーネントのルーターオブジェクトを表示するような流れになります。

動的なリンクを生成するコンポーネントを作成

components/GreetLink.jsを作成

import Link from 'next/link';
const GreetLink = props => (
  <li>
    <Link href={`/greet?title=${props.title}`}>
      <a>{props.title}</a>
    </Link>
  </li>
);
export default GreetLink

必要なパスとして、/greet

titleがクエリパラメータになります。

GreetLinkを表示する

pages/index.jsにて、GreetLinkをimportします。

import Layout from '../components/Layout';
import GreetLink from '../components/GreetLink';
const Index = () => {
  return (
    <Layout>
      <h1>挨拶一覧</h1>
      <ul>
        <GreetLink title="おはようございます！" />
        <GreetLink title="こんにちは！" />
        <GreetLink title="こんばんは！" />
      </ul>
    </Layout>
  )
}
export default Index

GreetLinkで受けるtitleに動的に値を渡します。

今回は3つ挨拶系のものを設定しました。

greet用のページ作成

GreetLink.jsでは、パスに/greetを設定したため、pages/greet.jsを追加します。

pages/greet.js

import { useRouter } from 'next/router';
import Layout from '../components/Layout';
const Content = () => {
  const router = useRouter();
  return (
    <>
      <h1>{router.query.title}</h1>
      <p>時間帯に応じた挨拶について...</p>
    </>
  );
};
const Greet = () => (
  <Layout>
    <Content />
  </Layout>
);
export default Greet;

<GreetLink title="おはようございます！" />のtitleにあたるのが、router.query.titleになります。

ブラウザで確認

ここまででブラウザで確認してみましょう。

リンクにアクセスするとパスが変わって、titleが表示されるようになります。

http://localhost:3000/greet?title=おはようございます!

今回はここまでで完了です！ありがとうございました。