ブログ投稿のルーティングを設定

URL のルール

今回は Wordpress からコンテンツを移行してきているのを前提としているため、URL のルールを似た形で実装していきます。

Wordpress のブログの記事で利用する URL は、標準では以下のような形となっています。

• /2017/04/17/sano-marathon/

つまり YYYY/MM/DD と日付を利用して、最後に Slug を利用して記事を作成している形です。このため、URL として利用している Slug と合わせて以下のように実装していきます。

• /YYYY/MM/DD/slug

Next.js App Router のルーティング

まずリンクを調整するためのライブラリを作成します。今回は、apps/nextjs/lib/linkBuilder.ts というファイルを作成して、コードは以下のように設定します。

export const LinkBuilder = (
  slug: string | undefined,
  publishDate?: string | null
) => {
    const formattedDate = publishDate ? publishDate.substring(0, 10).replace(/-/g, "/") : "";
      return `/${formattedDate}/${slug}/`;
    };

この LinkBuilder に対して Slug　と公開日を渡すと、URL に変換して文字列を返す役割を実装しています。これを利用して、トップページでのリンクを単なる slug ではなく日付を含めた URL でリンクを設定します。

import { LinkBuilder } from "@/lib/linkBuilder";

...

        {posts.map((post) => (
          <li className="hover:underline" key={post._id}>
            <Link href={LinkBuilder(post.slug.current, post.date)}>
              <h2 className="text-xl font-semibold">{post.title}</h2>
              <p>{new Date(post.date).toLocaleDateString()}</p>
            </Link>
          </li>
        ))}

続いてこの URL を受けるためのページを作成します。Next.js App Router では

[…slug] といったフォルダを作成してその中に page.tsx を配置することで、slug に設定されている複数の値を取得してページを表示することができる仕組みがあります。このルーティングの仕組みを利用して、以下のページを作成します。

type PostParams = {
    params: Promise<{ slug: string[] }>;
};

export default async function PostPage({ params }: PostParams) {
    const { slug } = await params;
    
    const slugPath = slug.join('/');
    
    return (
        <div>
            <h1>Post Page</h1>
            <p>Slug: {slugPath}</p>
            {slug.length >= 4 && (
                <div>
                    <p>Year: {slug[0]}</p>
                    <p>Month: {slug[1]}</p>
                    <p>Day: {slug[2]}</p>
                    <p>Post Slug: {slug[3]}</p>
                </div>
            )}
        </div>
    );
}

このコードでは […slug] で受ける複数のパスの値を取得して、それぞれの値を表示するだけのシンプルなテストコードになります。

動作確認

準備ができたところで npm run dev で Next.js のサイトを立ち上げて、トップページにアクセスをします。URL が変わっているのはマウスカーソルなどで確認ができます。実際にクリックをすると、以下のように slug に設定されている値を取得してページが表示されています。

これでブログページの下準備ができました。この後ブログのページで実装すべき内容は以下のようになります。

• URL で指定されたコンテンツを取得してページを表示する
• URL で指定されたページがない場合はエラーページを表示する

特に２つ目に関しては、今回はすべての Slug の値を受けてページを表示する実装になっているため、該当するページがない場合の処理を入れていく必要があります。ブログの場合はエラーページを表示するだけで問題ありません。それは後日実装します。

まとめ

今回はブログの記事に向けての URL のルーティングの処理を追加しました。タグやカテゴリに関してもこの処理を入れていく形となりますが、その前に次回はブログの記事を取得したいと思います。