Static Site Generation(SSG)の設定と注意点について

Next.jsにおけるStatic Site Generation (SSG)

Next.js は Universal JavaScript フレームワークで、クライアントサイドとサーバサイドの両方で JavaScript のレンダリングが可能です。Next.js の SSG(Static Site Generation)は、ビルド時に HTML を生成し、その HTML をクライアントに配信します。このアプローチは、ユーザがページにアクセスする度に HTML を生成するSSRに対して、ページの内容が頻繁に更新されない場合に特に有効です。

1. 初期設定

Next.jsのプロジェクトをTypeScriptでセットアップする手順は、SSRと同様です。以下にその手順を示します：
まず、新しいプロジェクトディレクトリを作成し、そのディレクトリに移動します。

mkdir my-next-app
cd my-next-app

次に、Next.js、React、および React-DOM をインストールします。

npm install next react react-dom

そして、TypeScriptとその型定義をインストールします。
これにより、Next.jsプロジェクトでTypeScriptが使用できるようになります

npm install --save-dev typescript @types/react @types/node

最後に、package.json ファイルに以下のスクリプトを追加します。

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

以上で、npm run dev コマンドを使って開発サーバを起動することができます。

2. SSGの設定

Next.jsでSSGを設定するには、getStaticProps関数を使用します。この関数はビルド時に実行され、その結果はページコンポーネントにpropsとして渡されます。
以下に、pages/index.tsx ファイルの作成例を示します。

import { GetStaticProps } from 'next'
import React from 'react'


interface HomeProps {
  buildTime: string
}


const Home: React.FC<HomeProps> = (props) => {
  return (
    <div>
      <h1>Hello, Next.js!</h1>
      <p>Built at {props.buildTime}</p>
    </div>
  )
}


export const getStaticProps: GetStaticProps<HomeProps> = async () => {
  const buildTime = new Date().toISOString()


  return {
    props: {
      buildTime,
    }
  }
}


export default Home

この例では、getStaticProps関数はビルド時に現在の日時を取得し、それをbuildTimeとしてHomeコンポーネントに渡します。

3. 注意点

Next.js の SSGは非常に便利で強力ですが、以下のような注意点があります：

• getStaticPropsはビルド時にのみ実行されます。したがって、頻繁にデータが更新されるサイトではSSGよりもSSRやISR(Incremental Static Regeneration)を検討したほうが良いかもしれません。
• getStaticPropsは各ページをビルドするため、多くのページがあるサイトではビルド時間が長くなる可能性があります。

以上が、TypeScriptを使用したNext.jsにおけるStatic Site Generation (SSG)の設定方法です。これを適切に利用することで、高パフォーマンスの静的サイトを簡単に生成することができます。