Next.js-動的ルーティング
Next.jsでは、ルートを動的に作成できます。この例では、ページとそのルーティングをオンザフライで作成します。
Step 1. Define [id].js file− [id] .jsは、idが相対パスになる動的ページを表します。このファイルをpages / postディレクトリで定義します。
Step 2. Define lib/posts.js−posts.jsはIDとコンテンツを表します。libディレクトリはルートディレクトリに作成されます。
[id] .js
パスを設定するgetStaticPaths()メソッドとgetStaticProps()メソッドを使用して[id] .jsファイルを更新し、idに基づいてコンテンツを取得します。
import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'
import { getAllPostIds, getPostData } from '../../lib/posts'
export default function Post({ postData }) {
return (
<Container>
{postData.id}
<br />
{postData.title}
<br />
{postData.date}
</Container>
)
}
export async function getStaticPaths() {
const paths = getAllPostIds()
return {
paths,
fallback: false
}
}
export async function getStaticProps({ params }) {
const postData = getPostData(params.id)
return {
props: {
postData
}
}
}
posts.js
posts.jsには、IDを取得するためのgetAllPostIds()と、対応するコンテンツを取得するためのgetPostData()が含まれています。
export function getPostData(id) {
const postOne = {
title: 'One',
id: 1,
date: '7/12/2020'
}
const postTwo = {
title: 'Two',
id: 2,
date: '7/12/2020'
}
if(id == 'one'){
return postOne;
}else if(id == 'two'){
return postTwo;
}
}
export function getAllPostIds() {
return [{
params: {
id: 'one'
}
},
{
params: {
id: 'two'
}
}
];
}
Next.jsサーバーを起動します
次のコマンドを実行してサーバーを起動します-。
npm run dev
> [email protected] dev \Node\nextjs
> next
ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully
出力を確認する
ブラウザでlocalhost:3000 / posts / oneを開くと、次の出力が表示されます。
ブラウザでlocalhost:3000 / posts / twoを開くと、次の出力が表示されます。