Next.js 動的ルーティングによるクリーンなURLを作成
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に切り替われば完成です。
もう少し詳しく知りたい方は、動的ルーティングの公式ドキュメントを参照ください。
お疲れ様でした!今回はここまでとなります。
ありがとうございました。
関連記事
Next.js Layout作成してみよう
こんにちは、Yuuichi(@WestHillWorker)です。 今回は共通で ...
Next.js Tailwindcss 導入編
こんにちは、Yuuichi(@WestHillWorker)です。 前回Tail ...
React チュートリアル 手を動かして学習 入門
私がReactを初めて学習した際に、学習した内容についてまとめました。 Reac ...
Next.js getInitialPropsでページの非同期処理を学ぶ
こんにちは、Yuuichi(@WestHillWorker)です。 今回は前回作 ...
React 条件付きレンダーを学ぶ 入門
今回は、条件に応じて表示を切り替えるような処理について学びたいと思います。 良く ...