Next.js 動的なページを作成してみよう
2020年9月13日
こんにちは、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=おはようございます!
今回はここまでで完了です!ありがとうございました。
関連記事
Next.js APIを作成してみよう
こんにちは、Yuuichi(@WestHillWorker)です。 今回は、Ne ...
React propsとstateについて 入門
前回Reactの超入門ということで、プロジェクトの作成からReactでのブラウザ ...
Next.js コンポーネントのスタイリングを学ぼう
こんにちは、Yuuichi(@WestHillWorker)です。 今までは特に ...
Next.js getInitialPropsでページの非同期処理を学ぶ
こんにちは、Yuuichi(@WestHillWorker)です。 今回は前回作 ...
React react-router-dom ネストやパラメータについて 入門
前回react-router-domについて、画面遷移を学習しました。 今回は、 ...