Next.jsビルド

Next.jsのバージョン14.0.0で、静的サイト生成（SSG）のビルド方法が変わりました：

1. 新しい方法：
   • next.config.jsファイルに"output": 'export'を追加します。
   • next buildコマンドを実行すると、outフォルダに静的ファイルが生成されます。
2. 以前の方法：
   • next build && next exportコマンドを使用していました。

そもそもSSGとは？（Static Site Generation）

「静的サイト生成」

ウェブサイトのコンテンツを事前にビルド時に生成し、静的なHTMLファイルとして保存する方法です。ユーザーがページにアクセスする時、すでに生成されたHTMLを素早く提供できます。

動的な機能の実装も可能です

SSGでビルドした後のコンテンツは静的であり、そのままでは更新できません。

ただ完全に動的な機能が使えないわけではありません

動的機能の実現方法：

• クライアントサイドJavaScript：ブラウザ上で動的な処理を行うことができます。
• APIとの連携：静的ページからAPIを呼び出して動的データを取得できます。

out フォルダの中身

通常、out フォルダには以下のようなファイルやフォルダが生成されます。

• index.html: 各ページの静的 HTML ファイル。pages/index.js がここに対応します。
• _next/ フォルダ: この中には Next.js が最適化した JavaScript、CSS、画像ファイルなどが含まれています。ブラウザでキャッシュされるファイルです。
• 各ページの HTML ファイル: ルートや動的なページも静的に生成されます（SSG を使用している場合）。

生成したファイル群をレンタルサーバー上で公開

1）next.config.js ファイルで適切な設定を行います

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  distDir: 'out',
  assetPrefix: 'https://siennahare23.sakura.ne.jp/nextjs-content/readmore',
  basePath: '/nextjs-content/readmore',
  trailingSlash: true,
}

module.exports = nextConfig

• output: 'export': 静的ファイルを生成するための設定
• distDir: 'out': ビルド出力先ディレクトリの指定
• assetPrefix: 静的アセット（JS, CSS, 画像など）のURL prefix
• basePath: アプリケーションのベースパス
  basePathは、Next.jsアプリケーションのすべてのルートの前に付加されるパスプレフィックスです。これは特に、サブディレクトリにアプリケーションをデプロイする場合に役立ちます。
• trailingSlash: true: URLの末尾にスラッシュを追加

2）npm run build

package.json の scriptsが下記になっているか確認

"scripts": {
  "build": "next build"
}

3）サーバーへのアップロード

生成された out ディレクトリの内容を任意のサーバーのディレクトリにアップロード

• index.html
• _next ディレクトリ（JS, CSSファイルを含む）
• その他の静的アセット（画像など）

下記はiframeでの読み込みました

<iframe 
  src="https://siennahare23.sakura.ne.jp/nextjs-content/readmore/readmore/index.html" 
  width="100%" 
  height="600px" 
  frameborder="0" 
  style="width: 100%; min-height: 600px;"
></iframe>