NotionAPIで取得したslugの値で記事リンクを作成する | getStaticPathとDynamic routesが便利だ_Blog learn04

📅 2022-04-26

Learning

NotionAPIで取得したslugの値で記事リンクを作成する | getStaticPathとDynamic routesが便利だ_Blog learn04

Blog learn Next.js

🔄 2024-02-29

ブログ用に用意しているNotionデータベースにslug列を追加します。

作りたいのはこんな感じ

やること

NotionAPIを使ってslugを表示させる
slugを記事毎のURLとして割り振る
割り振ったURLを記事タイトルに埋め込む

NotionAPIを使ってslugを表示させる

表示させるのは前回の記事を元にするとすぐ実装できそう⭐

https://herohoro.com/blog/blog-learn_notion-api-read

やることは４つ

読み込む列typeに合わせた型をlib/interfaces.tsに追加
propsで使うpostにslugデータをlib/client.tsで追加
componentを使って表示させるためにcomponents/blog-parts.tsxに追加
表示させたい場所pages/blog/index.tsxにcomponentを追加

export interface Post {
  PageId: string;
  Title: string;
  Excerpt: string;
  Date: string;
  Slug: string;👉追加
}

読み込む列typeに合わせた型をlib/interfaces.tsに追加

//省略
function _buildPost(data) {
  const prop = data.properties;
  const post: Post = {
    PageId: data.id,
    Title: prop.Title.title[0].plain_text,
    Excerpt: prop.Excerpt.rich_text[0].plain_text,
    Date: prop.Date.date.start,
    Slug: prop.Slug.rich_text[0].plain_text  👉追加
  };
  return post;
  //postに収納
}

propsで使うpostにslugデータをlib/client.tsで追加

//省略
export const PostSlug = ({ post }) => <p>{post.Slug ? post.Slug : ""}</p>; 👉追加

componentを使って表示させるためにcomponents/blog-parts.tsxに追加

//省略
const RenderPosts = ({ posts = [] }) => {
  return (
    <div className={styles.container}>
      <div className={styles.mainContent}>
        <p>***main-content***</p>
        <h2>BlogList page</h2>
        <br />
        {""}
        <section>
          <div>
            {/* 変数postsを1つの塊ごと取り出していく */}
            {posts.map((post) => {
              return (
                <div key={post.Date}>
                  <PostDate post={post} />
                  <PostTitle post={post} />
                  <PostExcerpt post={post} />
                  <PostSlug post={post} />　　👉追加
                </div>
              );
            })}
          </div>
        </section>
        <br />
      </div>
      <div className={styles.subContent}>
        <p>***sub-content***</p>
      </div>
    </div>
  );
};
export default RenderPosts;

表示させたい場所pages/blog/index.tsxにcomponentを追加

ここまでの結果

https://codesandbox.io/embed/slug-read-syy3lk?fontsize=14&hidenavigation=1&theme=dark

slugを記事毎のURLとして割り振る

１つのファイルを使い回すDynamic Routesという実装をしていきます＼(^o^)／

https://nextjs.org/docs/routing/dynamic-routes

記事毎のページを作れるようにpages/blogフォルダ内に[slug].tsxを用意する
[slug].tsxにひな形を少し修正して追加

import { useRouter } from "next/router";
import styles from "../../styles/blog.module.css";

const RenderPost = (post) => {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div className={styles.container}>
      <div className={styles.mainContent}>
        <p>Post: {slug}</p>
      </div>
    </div>
  );
};

export default RenderPost;

pages/blog/[slug].tsx

こんな感じに表示したい.....

そのためには......

🤔

slugの値毎に固有のページリンクが設置されるようにする必要がありそう........

やること１：propsを作る

https://nextjs.org/docs/basic-features/data-fetching/get-static-props

NotionAPIから取得したデータをいざ使うぜっていうときには

getStaticPropsを本編(今回でいうとRenderPost)の前に記述します。

指定したslugの値と一致したNotionデータベースの行を取得するためにclient.tsにgetPostBySlugを追加
記事毎のページはgitPostBySlugのデータを使うようにpages/blog/[slug].tsxのgetStaticPropsに追加

//省略
export async function getPostBySlug(slug: string) {
  const data = await client.databases.query({
    database_id: DATABASE_ID,
    filter: {
      property: "Slug",
      rich_text: {
        equals: slug
      }
    }
  });
  return _buildPost(data.results[0]);
}

指定したslugの値と一致したNotionデータベースの行を取得するためにclient.tsにgetPostBySlugを追加

import { useRouter } from "next/router";
import { getPostBySlug } from "../../lib/client";
import styles from "../../styles/blog.module.css";

export async function getStaticProps({ params: { slug } }) {
  const post = await getPostBySlug(slug);
  return {
    props: { post },
    revalidate: 60
  };
}


const RenderPost = (post) => {
//省略

記事毎のページはgitPostBySlugのデータを使うようにpages/blog/[slug].tsxのgetStaticPropsに追加

やること２：pathを作る

https://nextjs.org/docs/basic-features/data-fetching/get-static-paths

Dynamic RoutesのpageでgetStaticPropsを使うなら、pathの一覧をを定義するgetStaticPathsは必要。

必要な場面で必要なNotionデータベースの行を取り出せるようにclient.tsにgetAllPostsを追加
slugの値が記事毎のURLになるようlib/blog-helpers.tsに追加
getAllPostsから記事毎のリンクを生成できるようにpages/blog/[slug].tsxのgetStaticPathsを追加

export async function getAllPosts() {
  let results = [];
  const params = {
    database_id: DATABASE_ID,
    page_size: 100
  };

  const data = await client.databases.query(params);
  results = results.concat(data.results);
  params["start_cursor"] = data.next_cursor;

  return results.map((item) => _buildPost(item));
}

必要な場面で必要なNotionデータベースの行を取り出せるようにclient.tsにgetAllPostsを追加

😵

記事一覧ページで使ったgetPostsと何が違うの？？

getPostsとgetAllPostsの違い

export async function getPosts() {
  const params = {
    database_id: DATABASE_ID
  };

  const data = await client.databases.query(params);

  return data.results.map((item) => _buildPost(item));
}

pages/blog/index.tsxで使うためにlib/clients.tsへ以前記述したgetPosts

export async function getAllPosts() {
  let results = [];
  const params = {
    database_id: DATABASE_ID,
    page_size: 100
  };

  const data = await client.databases.query(params);
  results = results.concat(data.results);
  params["start_cursor"] = data.next_cursor;

  return results.map((item) => _buildPost(item));
}

getAllPosts

🤔

getAllPostsではresultsという変数にdata.resultsを収納してる.....

https://developers.notion.com/reference/property-item-object#paginated-property-values

だからなに？って感じなのでよくよく調べてみると.....

こんなリファレンスを発見しました🤦‍♀️

https://developers.notion.com/reference/pagination

objectの一覧を返すエンドポイントでは、Paginationが使われる。
Pagenationにより、APIはリストの一部をリクエストし、結果の配列(array)とnext_cursorをレスポンスで受け取ることが可能になる。
APIは、他のリクエストでリストの次の部分を受け取るためにnext_cursor を使用できる。
このテクニックを使って、APIはリスト全体 (または必要な部分だけ) を受け取るようにリクエストし続けることが可能。

※ リクエスト・リスポンスという表現が分かりにくい方はBlog learn02を参照ください

🤔

next_cursorってparamsの部分で後から追加していたな......

もういちどgetAllPostsを確認....

export async function getAllPosts() {
  let results = [];
  const params = {
    database_id: DATABASE_ID,
    page_size: 100　
  };

  const data = await client.databases.query(params);
  results = results.concat(data.results);
  params["start_cursor"] = data.next_cursor;　👉ここ

  return results.map((item) => _buildPost(item));
}

getAllPosts

Requestsにはstart_cursorとpage_sizeがある。

start_cursorはデフォルトでは一番目のデータを示す。
次のページのrequestで使うとき、直前のresponseから返ってきたcorsorになる。

🤔

start_cursorにnext_cursorを代入してたよな......next_cursorってどこにあるんだ？？？

Responsesにnext_cursorを発見！！！

ついでにさっき「だからなに？」ってなってしまったresultsもある！！！

▼ next_cursorについて.....

同じエンドポイントに start_cursor パラメータとして値を渡すことで、次のページの結果を取得するために使用される。

start_cursorは直前の値。

next_cursorの値としてstart_cursorを更新してあげれば

次のデータがrequestされたことになる

＼(^o^)／わんこそばみたい＼(^o^)／

▼ resultsについて.....

Pagenationの出だしに説明されていた、

Pagenationにより、APIはリストの一部をリクエストし、結果の配列(array)とnext_cursorをレスポンスで受け取ることが可能になる。

って部分。

この配列ってresultsのことを意味している＼(^o^)／

その上でもう一度getAllPostsを眺めてみる.....

export async function getAllPosts() {
  let results = [];
  const params = {
    database_id: DATABASE_ID,
    page_size: 100　
  };

  const data = await client.databases.query(params);
  results = results.concat(data.results);
  params["start_cursor"] = data.next_cursor;　👉ここ

  return results.map((item) => _buildPost(item));
}

getAllPosts

いい景色だ.....(*´ω`*)(*´ω`*)💚

まだ２つやってなかったこと

slugの値が記事毎のURLになるようlib/blog-helpers.tsに追加
getAllPostsから記事毎のリンクを生成できるようにpages/blog/[slug].tsxのgetStaticPathsを追加

ブラケットで囲ってパスを記述します。

https://nextjs.org/docs/routing/introduction#dynamic-route-segments

//省略
export const getBlogLink = (slug: string) => {
  return `/blog/${slug}`;
};

slugの値が記事毎のURLになるようlib/blog-helpers.tsに追加

import { getPostBySlug, getAllPosts } from "../../lib/client";   //getAllPosts追加
import { getBlogLink } from "../../lib/blog-helpers";
//他のimportは同じなので省略

//同じなので省略 export async function getStaticProps

export async function getStaticPaths() {
  const posts = await getAllPosts();
  return {
    paths: posts.map((post) => getBlogLink(post.Slug)),
    fallback: "blocking"
  };
}
//同じなので省略 const RenderPost

getAllPostsから記事毎のリンクを生成できるようにpages/blog/[slug].tsxのgetStaticPathsを追加

ここまでの結果

↓

すると表示される＼(^o^)／

https://codesandbox.io/embed/slug-read-router-9e1fbm?fontsize=14&hidenavigation=1&theme=dark

割り振ったURLを記事タイトルに埋め込む

記事一覧ページに表示されるタイトルにリンクを埋め込み、

手打ちをしなくても記事固有のページへ移動できるようにしてみます(*´∀｀*)

やること

記事タイトルにリンクを埋め込むためのcomponentをcomponents/blog-parts.tsxに追加

import Link from "next/link";
import { getDateStr, getBlogLink } from "../lib/blog-helpers"; // getBlogLinkを追加
//他のimportは同じなので省略

export const PostTitle = ({ post }) => {
  const postTitle = post.Title ? post.Title : "";
  return (
    <h3>
      <Link href="/blog/[slug]" as={getBlogLink(post.Slug)} passHref>
        <a>{postTitle}</a>
      </Link>
    </h3>
  );
};
//他の export constは同じなので省略

記事タイトルにリンクを埋め込むためのcomponentをcomponents/blog-parts.tsxに追加

😅

getBlogLinkってなんだっけ....???

slugをリンクに追加されるように設定したこれ👇

//省略
export const getBlogLink = (slug: string) => {
  return `/blog/${slug}`;
};

slugの値が記事毎のURLになるようlib/blog-helpers.tsに追加

Next.jsのLinkについて

https://nextjs.org/docs/api-reference/next/link

href：pathかURL
as：ブラウザ上のURLに表示されるpath
passHref：hrefを子要素にする

🤔

子要素ってas(ブラウザ上のURLのpath)を意味しているのかな....????

もう一度該当するコードを確認すると.....

      <Link href="/blog/[slug]" as={getBlogLink(post.Slug)} passHref>
        <a>{postTitle}</a>
      </Link>

components/blog-parts.tsxの一部

href：/blog/[slug] というパス
as：getBlogLink…… なんだっけ？？？

//省略
export const getBlogLink = (slug: string) => {
  return `/blog/${slug}`;
};

lib/blog-helpers.tsの一部

as：/blog/slug列の値としたブラウザ上URLのpath

slugの値が【notion-api_make-blog】の場合、

/blog/notion-api_make-blog

となる記述だ＼(^o^)／

ここまでの結果

リンクの埋め込まれている記事タイトルをクリックすると.......

https://codesandbox.io/embed/slug-read-router-page-shi-zhuang-nltin7?fontsize=14&hidenavigation=1&theme=dark

表示された＼(^o^)／

今度は手打ちしないでOK〜〜〜〜〜

まとめ

NotionAPIを使ってslugを表示させる
1. 読み込む列typeに合わせた型をlib/interfaces.tsに追加
2. propsで使うpostにslugデータをlib/client.tsで追加
3. componentを使って表示させるためにcomponents/blog-parts.tsxに追加
4. 表示させたい場所pages/blog/index.tsxにcomponentを追加
slugを記事毎のURLとして割り振る
1. 記事毎のページを作れるようにpages/blogフォルダ内に[slug].tsxを用意する
2. [slug].tsxにひな形を少し修正して追加
3. propsを作る
  1. 指定したslugの値と一致したNotionデータベースの行を取得するためにclient.tsにgetPostBySlugを追加
  2. 記事毎のページはgitPostBySlugのデータを使うようにpages/blog/[slug].tsxのgetStuticPropsに追加
4. pathを作る
  1. 必要な場面で必要なNotionデータベースの行を取り出せるようにclient.tsにgetAllPostsを追加
    1. getPostsとgetAllPostsの違い
  2. slugの値が記事毎のURLになるようlib/blog-helpers.tsに追加
  3. getAllPostsから記事毎のリンクを生成できるようにpages/blog/[slug].tsxのgetStuticPathsを追加
割り振ったURLを記事タイトルに埋め込む
1. 記事タイトルにリンクを埋め込むためのcomponentをcomponents/blog-parts.tsxに追加
  1. Next.jsのLinkについて

今回PRして追加したのは#12です＼(^o^)／

エラーがあり、後日修正した分は#13にあります。

No.	branchName	description	リンク	PR
10	oek04h	slugを使って画面遷移_getStaticPath	https://github.com/herohoro/Blog_learn/pull/12	#12 #13
11	次回＼(^o^)／	記事固有ページにDBのタイトル・日付を表示させる_useEffect