静的サイト（Static Site）とは
静的サイト（Static Site）とは、事前にHTML、CSS、JavaScriptなどのファイルを生成し、そのままサーバーに配置してアクセスする形式のウェブサイトです。
静的サイトは動的な処理や、データベースのやり取りがなく、訪問者に対して同じ内容を表示します。
静的サイトであれば、ロリポップなど、ほとんどの格安レンタルサーバーにもデプロイできます。
手順1 NEXT.JSのプロジェクト作成
ターミナルでプロジェクトを作りたい階層で下記のコマンドを打つ。JSとtailwind CSSを選択。あとは、基本、全部yesで
terminal
npx create-next-app@latest
手順2 プロジェクト直下の.eslintrc.jsonにimgタグの使用を許可する記述を記載
静的サイトでは、NEXT.JSのImage Componentが使えません。build時にエラーが出ます
.eslintrc.json
"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 コード例
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 コード例
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"を記載
next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
// デプロイ先のパス名を記載。ルートディレクトリなら記載の必要なし
basePath: "",
// 必ず下記を追記
output: "export",
};
export default nextConfig;
手順6 ビルドして静的ファイルを生成する
下記のコマンドを打つ
terminal
npm run build
プロジェクト直下のoutフォルダ内に静的ファイルが生成される
outフォルダ内の全てのフォルダをデプロイ先にアップロードする
