前回まで、ブログの URL を決めるために Dynamic Routes を利用してページの URL を決めて、４つ目のパスを Slug として扱う形で作成しました。今回は、日付を利用してそのパスも確定するようにしていきます。
generateStaticParams の追加
今回は日付を利用するために、 react-moment のパッケージを利用して、日付に関しての処理をするように進めていきます。そこで、プロジェクトに追加します。
PowerShell
npm install react-momentインストールが完了したあと、generateStaticParams を追加ます。処理としては、すべてのブログ記事を取得、それに対して path となる値を staticParams にそれぞれ格納して、return で返すことで静的ページを生成する処理としています。このコードに対して、
TypeScript
export const dynamicParams = false;を記述することで、生成していないページに関してはページがない形とします。src/app/blog/[...slug]/page.tsx に以下のコードを追加してください。
TypeScript
import moment from "moment";
export const dynamicParams = false;
export async function generateStaticParams() {
const posts = await getAllBlog();
const staticParams: { slug: string[] }[] = [];
posts.map((post) => {
const yearmonthdate = post.publishDate?.slice(0, 10);
const blogUrlDate = moment(yearmonthdate);
staticParams.push({
slug: [
blogUrlDate.format("YYYY"),
blogUrlDate.format("MM"),
blogUrlDate.format("DD"),
post.slug || "undefined",
],
})
});
return staticParams;
}テストとして、正しいパスとなる URL を入れてアクセスをするとブログの記事を参照できるようになりました。
なお正しくない日付を指定するとエラーが表示されます。
リンク URL 生成関数
ブログの記事に対するリンクの記述ですが、publishDate と slug の２つを組み合わせて生成することになるため、簡単にリンクを作成することができるように、対象のブログが分かれば生成できるような関数を追加で準備しました。src/utils/url/index.ts のファイルを作成して、コードは以下のように設定しています。
TypeScript
import { Blog } from "@/interfaces/Blog";
import moment from "moment";
export function getBlogUrl(post: Partial<Blog>) {
const yearmonthdate = post.publishDate?.slice(0, 10);
const blogUrlDate = moment(yearmonthdate);
return (
"/blog/" +
blogUrlDate.format("YYYY") +
"/" +
blogUrlDate.format("MM") +
"/" +
blogUrlDate.format("DD") +
"/" +
post.slug
);
}これをトップページ src/app/page.tsx で読み込みます。
TypeScript
<main>
<h1>Content Hub ONE - Title list</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>
<Link href={getBlogUrl(post)}>{post.title}</Link>
</li>
))}
</ul>
</main>これで、ブログの記事の情報があればブログの URL を取得することが簡単にできるようになりました。
まとめ
３回に分けて、ブログの読み込み、URL を生成するところまで進めていきました。この手順はいろいろと応用が利くため、ベースになる手順として覚えておくといい形です。
関連ページ
- Nextjs の App Route の Dynamic Routes を利用してブログのページを作る（前編）
- Nextjs の App Route の Dynamic Routes を利用してブログのページを作る（中編）
- Nextjs の App Route の Dynamic Routes を利用してブログのページを作る（後編）