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

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

Next.js

環境構築

npx create-next-app --ts next-sample

  • npm run build
    .nextディレクトリにビルド。
    build結果には各ページがどのレンダリンクタイプなのかが表示される。
    Server=SSR、Static, SSG=SSG、ISR=ISR、を示す。
    CSRは全てのタイプと併用できるのものなので表示されない。
  • npm run start
    ビルドした.nextディレクトリからサーバを立ち上げる。

SSGによるページの実装

データ取得なしの場合(単なる静的ぺージ)

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

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

getStaticProps内でデータ取得する場合

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 

SSR, ISRによるページの実装

SSR: getServerSideProps内でデータ取得する

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

ISR

以下の例の場合、npm run build; npm run startすると60秒経過するまでは保存された内容が表示される。

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

APIルート

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)
}

npm run buildでのビルド時はサーバは起動していないため、getStaticProps内でAPIルートを使うことはできない。

コメント

タイトルとURLをコピーしました