基礎から始めるNext.js【１４Data Fetch (SSG1)】

基礎から始めるNext.js【１４Data Fetch (SSG1)】

YouTube: https://youtu.be/fCadE-zQ_oA

https://youtu.be/fCadE-zQ_oA

今回は「SSG」「getStaticProps」を使用した
「post」のリストページの作成について解説します。

クライアントサイドのフェッチと
「SSR」「getServerSideProps」を使用した場合は
そのページが表示されるたびに最新のデータが表示されるのですが、
「SSG」「getStaticProps」を使用した場合は必ずしも
最新のデータではない場合があります。

前述の2つと「SSG」「getStaticProps」の違いは、
フェッチのタイミングがページが表示するタイミングで行われるのに対して、
「SSG」「getStaticProps」は「ビルド」のタイミングでフェッチが行われる点で
違いがあります。

pages/ssg/index.tsx

import Link from 'next/link'
import Layout from '../../components/Layout'
import { Heading } from '@chakra-ui/react'
import { ListItem, UnorderedList } from '@chakra-ui/react'
import axios from 'axios'
import { GetStaticProps } from 'next'

export const getStaticProps: GetStaticProps = async () => {
  const res = await axios.get(`http://localhost:1337/api/posts`)

  return {
    props: {
      posts: res.data.data,
    },
  }
}

export default function SSGPage({ posts }) {
  return (
    <Layout title="Next App TopPage" content="Generated by create next app">
      <Heading as="h1" size="4xl" mb={2}>
        SSG Posts List
      </Heading>
      <UnorderedList>
        {posts &&
          posts.map((post) => (
            <ListItem key={post.id} fontSize={20} mb={1}>
              <Link href={`/ssg/${post.id}`}>{post.attributes.title}</Link>
            </ListItem>
          ))}
      </UnorderedList>
    </Layout>
  )
}

pages/index.tsx

import Link from 'next/link'
import Layout from '../components/Layout'
import { Heading } from '@chakra-ui/react'
import { ListItem, UnorderedList } from '@chakra-ui/react'

export default function Home() {
  return (
    <Layout title="Next App TopPage" content="Generated by create next app">
      <Heading as="h1" size="4xl">
        Welcome to <a href="https://nextjs.org">Next.js!</a>
      </Heading>
      <UnorderedList>
        <ListItem>
          <Link href={'/hello/1'}>to Hellopage</Link>
        </ListItem>
        <ListItem>
          <Link href={'/clientside'}>to Client Side Fetch</Link>
        </ListItem>
        <ListItem>
          <Link href={'/serverside'}>to Server Side Fetch</Link>
        </ListItem>
        <ListItem>
          <Link href={'/ssg'}>SSG Page</Link>
        </ListItem>
      </UnorderedList>
    </Layout>
  )
}