Notionブログをデプロイしました！

Posted date at 2024-04-21

Next.jsの学習でShinCodeさんのUdemy講座でNotionブログを構築しました。

Next.jsにより、Reactよりも高速で動作するアプリケーションが作成出来たり、ページのルーティングの記述が簡素化できます。

Reactに慣れてきたので、挫折していたNext.jsの学習も行っていきます。

以下、部分的ですがNext.jsの説明と実装例です

■ISR（Incremental Static Regeneration）とは

Next.jsの政敵サイト静的(SSG）に時間経過とともにデータの更新を加えたもの

ざっくりいうと、サーバ側で定期的にサイトを更新して作ってくれるので、クライアント側ではできあがったものを表示するだけで良くなり高速化につながる。

ReactはCSR(Cliren Side Rendering）なので、初回起動時にクライアント（ブラウザ）側でサイトを生成するためオーバーヘッドがかかる。ISRを使用するとそれが避けられるが、リアルタイムなデータ変更には向かない（秒指定は可能）。

■ISRを実装するための記述

1.getStaticPaths

getStaticPathを指定することですることで、指定したルートページがサーバサイドで生成されるようになる

以下は、ルーティングされるページ数、ページのひな型を生成する命令。

//SSG-ISRのための記述
export const getStaticPaths: GetStaticPaths = async () => {
  const numberOfPage = await getNumberOfPages();
  // console.log(numberOfPage);
  let params = [];
  for (let i = 1; i <= numberOfPage; i++) {
    params.push({ params: { page: i.toString() } });
  }
  return {
    paths: params,
    fallback: "blocking",
  };
};

2.getStaticProps

getStaticPropsを使用することで、この関数で生成されたPropsを使用するコンポーネントはサーバサイドでレンダリングされるようになる。

以下は、上記のgetStaticPathsで生成したページに表示するためのデータを用意する記述。こちらでは、データの生成を3分としている。データが再生成されるとページも再生成される。

export const getStaticProps: GetStaticProps = async (context) => {
  const currentPage = context.params?.page;
  const postsByPage = await getPostsByPage(Number(currentPage));
  const numberOfPage = await getNumberOfPages();
  const allTags = await getAllTags();
  return {
    props: { postsByPage, numberOfPage, allTags },
    revalidate: 60 * 3, //60秒ごとに更新-ISR リバリデイト 例:60*60*24 ⇒1日
  };
};

受け側（コンポーネント）の記述

Reactにおける通常のPropsの受け渡しと同じように、上記のgetStaticPropsで作成したPropsを受ければよい。

const BlogPageList = ({ postsByPage, numberOfPage, allTags }: HomeProps) => {
  // console.log(postsByPage);
  return (
    <div className="container h-full w-full mx-auto">
      <Head>
        <title>CodingBlog</title>
        <meta name="description" content="社内SEによるプログラミングブログ" />

←ホームに戻る