「TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発」の感想・備忘録4

import { NextPage } from 'next' // Next.jsではページコンポーネントの型はNextPageとする

type SsgProps = {}
const Ssg: NextPage<SsgProps> = () => {
  return (
    <>
      <p>このページはSSGです。</p>
    </>
  )
}
export default Ssg 

import { NextPage, GetStaticProps } from 'next'

type SsgProps = { msg: string }
const Ssg: NextPage<SsgProps> = ({msg}) => {
  return (
    <>
      <p>このページはSSGです。</p>
      <p>{msg}</p>
    </>
  )
}
// ビルド時に実行される。exportとasyncをつける必要あり
export const getStaticProps: GetStaticProps<SsgProps> = async () => {
  return {
    props: {
      msg: 'hoge'
    }
  }
}
export default Ssg 

import {GetServerSideProps, NextPage} from 'next'

type SsrProps = { msg: string }
const Ssr: NextPage<SsrProps> = ({msg}) => {
  return (
    <>
      <p>{msg}: これはSSR</p>
    </>
  )
}
export const getServerSideProps: GetServerSideProps<SsrProps> = async () => {
  return {
    props: {
      msg: 'hoge'
    }
  }
}
export default Ssr

import {GetStaticProps, NextPage} from 'next'

type IsrProps = { msg: string }
const Isr: NextPage<IsrProps> = ({msg}) => {
  return (
    <>
      <p>{msg}: これはISR</p>
    </>
  )
}
export const getStaticProps: GetStaticProps<IsrProps> = async () => {
  return {
    props: {
      msg: (new Date()).toLocaleString()
    },
    revalidate: 60,
  }
}
export default Isr

import type {NextApiRequest, NextApiResponse} from "next"

type FruitsProps = {
  name: string,
  color: string
}
const data: FruitsProps[] = [
  {name: 'apple', color: 'red'},
  {name: 'banana', color: 'yellow'},
];
export default (req: NextApiRequest, res:NextApiResponse<FruitsProps[]>) => {
  res.status(200).json(data)
}