notion API + NEXT.js + netlify でブログ立ち上げ ③ NEXT.jsのお勉強

初めに

Next.jsのお勉強

SSGとSSRとISR

1. SSG: StaticSiteGeneration
2. SSR: ServerSideRendering
3. ISR: IncrementalStaticRegeneration パフォーマンス面ではSSGが一番だけど、データを取り扱うならSSRになる。 ただ、データ更新頻度が低い（リアルタイム性が重要視されない）場合は、ISRが選択肢に入る。

NextjsでのISRのやり方

• getStaticProps
• getStaticPaths
• getServerSideProps の3つの特殊メソッドを使用できます。 それぞれ下記の用途で使用します。
• getStaticProps
• getStaticPaths
• getServerSideProps また忘れてはならない特徴が、これらのメソッドはサーバーでのみ実行され、**フロントにはメソッド自体が渡されません。 **つまり、DBアクセスキーといったセキュアなものも記載できるといった特徴があります。 めちゃ便利...なんだけど、１ファイルでバックのみ対象の記述とフロントのみ対象の記述が混在するのは慣れるまで混乱しそう...。

// server側で呼ばれる
export const getStaticProps = async () => {
  const token: string = process.env.NOTION_TOKEN;
  const databaseId: string = process.env.NOTION_BLOG_DATABASE;
  const notion = new Notion(token, databaseId);
  const allPostsData = await notion.getPostList();

  return {
    props: {
      allPostsData: allPostsData,
    },
    revalidate: 1 * 60
  }
}

import { InferGetStaticPropsType } from 'next'

type Props = InferGetStaticPropsType<typeof getStaticProps>;

export default function Home({allPostsData}: Props){
  return (
    <Layout home>
      <PostList
        data = {allPostsData}
      />
    </Layout>
  )
}

// server側で呼ばれる
export const getStaticPaths: GetStaticPaths = async () => {
  const token: string = process.env.NOTION_TOKEN;
  const databaseId: string = process.env.NOTION_BLOG_DATABASE;
  const notion = new Notion(token, databaseId);
  const allPostsData = await notion.getPostList();
  const pathList = allPostsData.map(post => {
    return {
      params: {id: post.slug}
    }
  });
  return {
    paths: pathList,
    fallback: false
  }
}

Next.jsの環境変数の扱いについて

• NEXT_PUBLIC_のprefixがついた環境変数名: フロントでもサーバでも読み込み可能
• 無印の環境変数名: サーバのみ読み込み可能

NOTION_TOKEN=secret_xxx
NOTION_VERSION=20xx-xx-xx
NOTION_BLOG_DATABASE=abcdefg

NEXT_PUBLIC_GA_ID=G-XXX

API