静的サイト（Static Site）とは

静的サイト（Static Site）とは、事前にHTML、CSS、JavaScriptなどのファイルを生成し、そのままサーバーに配置してアクセスする形式のウェブサイトです。
静的サイトは動的な処理や、データベースのやり取りがなく、訪問者に対して同じ内容を表示します。
静的サイトであれば、ロリポップなど、ほとんどの格安レンタルサーバーにもデプロイできます。

手順1 NEXT.JSのプロジェクト作成

ターミナルでプロジェクトを作りたい階層で下記のコマンドを打つ。JSとtailwind CSSを選択。あとは、基本、全部yesで

npx create-next-app@latest

手順2 プロジェクト直下の.eslintrc.jsonにimgタグの使用を許可する記述を記載

静的サイトでは、NEXT.JSのImage Componentが使えません。build時にエラーが出ます

"rules": {
    "@next/next/no-img-element": "off"
  }

appフォルダ直下のpage.jsやlaytout.jsに記述

手順3 全体のページ構成を作成

・ルート直下のlayout.js、page.js

appフォルダ直下のpage.jsやlaytout.jsに記述

layout.js 複数の画面間で共有されるUIを実装する場所
page.js Reactコンポーネントをexport defaultする

layout.js　コード例

import "./globals.css";
import Header from "../components/Header";
import Footer from "../components/Footer";
import PageMetadata from "../components/Metadata"; 

export default function RootLayout({ children }) {
  const { title, description } = PageMetadata(); 

  return (
    <>
      <html lang="ja" className="scroll-smooth">
        <body>
          <Header />
          <main>{children}</main>
          <Footer />
        </body>
      </html>
    </>
  );
}

page.js　コード例

import Slider from "../components/Slider";
import Features from "../components/Features";
import Access from "../components/Access";
import Overview from "../components/Overview";

export default function Home() {
  return (
    <>
      <Slider />
      <Features />
      <Access />
      <Overview />
    </>
  );
}

・サブディレクトリ

app直下のフォルダ名=サブディレクトリ名

サブディレクトリ・フォルダ直下のpage.jsやlaytout.jsにコンテンツを記述

＊今回は、静的サイトのデプロイが目的のため、個々のページ作成については解説しません。

手順4 各コンポーネントを作成

例 appフォルダ内、componentsフォルダ内

＊今回は、静的サイトのデプロイが目的のため、個々のコンポーネントやページ作成については解説しません。

手順5 プロジェクト直下のnext.config.mjsにbasePathを指定し、output: "export"を記載

/** @type {import('next').NextConfig} */
const nextConfig = {
  // デプロイ先のパス名を記載。ルートディレクトリなら記載の必要なし
  basePath: "",
  // 必ず下記を追記
  output: "export",
};

export default nextConfig;

手順6 ビルドして静的ファイルを生成する

下記のコマンドを打つ

npm run build

NEXT.JSで静的サイトを作る方法（格安レンタルサーバーにもデプロイできる）