🔥

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

2022/11/12に公開

Next.js

tech

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

YouTube: https://youtu.be/JxCsZv1Up04

https://youtu.be/JxCsZv1Up04

今回はビルドコマンドを実行して、
本番環境での「SSG」の動作を確認していきます。

「getStaticProps」が実行されるのがビルドのタイミング、
基本的には本番環境にデプロイするタイミングで実行されるため、
デプロイ後にデータが追加・更新された場合の挙動に違いが生まれます。

今回のテストでは、
クライアントサイド、SSRではデータが追加されているのですが、
SSGではデータが追加されていないことが確認できます。

この問題を解決するため、Next.jsでは
本番環境にデプロイ後にビルドをする機能である
「ISR」が用意されていますので次回以降の動画で
こちらの実装方法と動作確認を行う予定です。

ビルドコマンド
npm run build

ビルドしたアプリの起動コマンド
npm run start

ビルドされたファイルは「.next」のフォルダ内、
「server」-> 「pages」-> 「SSG」の内部にあります。

typescriptで問題があった際にもビルドがストップしないように
以下の設定をconfigファイルに記述します。

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  typescript: {
    ignoreBuildErrors: true,
  },
}

module.exports = nextConfig

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

Discussion