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

初めに

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の環境変数の扱いについて

API

ChakraUIのお勉強

<Text
	fontSize={{base: '12px', md: '14px', lg: '24px'}}
>
	test text
</Text>

import { useBreakpointValue } from '@chakra-ui/react'

export default () => {
	const breakPoint = useBreakpointValue({ lg: 'desktop', sm: 'mobile' }, 'lg')
	// lgサイズになるとbreakPoint = 'desktop'
	// smサイズになるとbreakPoint = 'mobile' となる
  // 第2引数は初期値。これがないとundefinedが初期値となり、画面がちらつく原因になる
}