Published:2021.10.31
frontend
Next.jsのSSGで個人ブログ風サイトを作成する
シングルページアプリケーション(SPA)の弱点として、クローラによっては描画内容に到達できなかったり、 JavaScriptで描画するために、静的なページと比べると処理速度の問題があったりします。 そこで、Webページをサーバー側でレンダリング(SSR)したり、静的サイトを生成したり(SSG)する方法が編み出されました。 ここでは、ReactベースのフレームワークであるNext.jsのSSGを使って、個人のWebサイトを生成したいと思います。
Next.jsを導入するメリット
Next.jsのSSGではテンプレートエンジンのように使うことができます。 ReactのJSXを普段書いているなら、すぐに慣れると思います。
また、pagesというディレクトリにページ用のコンポーネントを追加するだけで、静的サイトを生成することができるので、 より直感的に静的サイトを開発することができます。
- JSXに慣れていると便利
- ディレクトリ構造と静的サイトになるURLが対応している
- 豊富なnpmパッケージの恩恵を受けられる
Next.jsの導入方法
公式チュートリアルから始める
公式のチュートリアルがとてもわかりやすいので、おすすめです。
consolenpm create-next-app my-blog
手動で作成する
create-next-appを使わずに一からセットアップする場合は、次のようにします。
consolemkdir my-blog && cd my-blog
npm init -f
npm install next react react-dom
Next.jsにはpagesディレクトリが必要です。このディレクトリ配下に、 ページの内容となるJSXコンポーネントを配置していきます。
consolemkdir pages
touch pages/index.js
index.jsimport React from 'react'
export default function index() {
return (
<h1>Hello, Next.js</h1>
)
}
以下で開発用サーバーを立ち上げることができます。
consolenpx next dev

このように、pagesディレクトリ配下に、静的サイト作成でHTMLを配置するのと同じようにコンポーネントを配置すれば、 Next.jsがそれをレンダリングしてくれます。
本番用の静的サイトを生成する際には、以下のコマンドを実行します。
consolenpx next build && npx next export
デフォルトでは、Next.jsプロジェクト直下のoutディレクトリ配下にHTMLが生成されます。