Next.js 動的ルーティングによるクリーンなURLを作成

2020年3月20日2020年9月13日

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

今回は、LinkとuseRouterでのクリーンなURL作成について進めていこうと思います。

前回は、以下のようなURLになっていました。

// 前回
http://localhost:3000/greet?title=おはようございます!
// 今回
http://localhost:3000/greet/good-evening

今回動的でも綺麗なURLになるようにしていこうと思います。

前回からの続きとなります。

LinkでブラウザのURL表示バーを設定

components/Greet.jsを以下のように修正します。

import Link from 'next/link';
const GreetLink = props => (
  <li>
    <Link href="/greet/[id]" as={`/greet/${props.id}`}>
      <a>{props.id}</a>
    </Link>
  </li>
);
export default GreetLink

Link内のasでブラウザのURLバーに表示するURLを定義します。

<Link href="/greet/[id]" as={`/greet/${props.id}`}>

hrefでの[id]は可変になるため、表示するためのpages/greet/[id].jsを作成します。

[id].js作成

次にpages/greet/[id].jsを作成します。

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

queryパラメータのidを表示するようにします。それ以外は前回と変わりなしです。

Greetのidに値を設定

pages/index.jsを以下のように修正します。

import Layout from '../components/Layout';
import GreetLink from '../components/GreetLink';
const Index = () => {
  return (
    <>
      <Layout>
        <h1>Greets</h1>
        <ul>
          <GreetLink id="good-morning" />
          <GreetLink id="good-evening" />
        </ul>
      </Layout>
    </>
  );
};
export default Index;

id="good-morning"が、props.idにあたるので、クリックすると/greet/good-eveningというパスになります。

ブラウザで確認

/greet/good-morning /greet/good-eveningに切り替われば完成です。

もう少し詳しく知りたい方は、動的ルーティングの公式ドキュメントを参照ください。

お疲れ様でした！今回はここまでとなります。

ありがとうございました。