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の導入方法

公式チュートリアルから始める

公式のチュートリアルがとてもわかりやすいので、おすすめです。

npm create-next-app my-blog

手動で作成する

create-next-appを使わずに一からセットアップする場合は、次のようにします。

mkdir my-blog && cd my-blog
npm init -f
npm install next react react-dom

Next.jsにはpagesディレクトリが必要です。このディレクトリ配下に、 ページの内容となるJSXコンポーネントを配置していきます。

mkdir pages
touch pages/index.js

import React from 'react'

export default function index() {
    return (
        <h1>Hello, Next.js</h1>
    )
}

以下で開発用サーバーを立ち上げることができます。

npx next dev

このように、pagesディレクトリ配下に、静的サイト作成でHTMLを配置するのと同じようにコンポーネントを配置すれば、 Next.jsがそれをレンダリングしてくれます。

本番用の静的サイトを生成する際には、以下のコマンドを実行します。

npx next build && npx next export

デフォルトでは、Next.jsプロジェクト直下のoutディレクトリ配下にHTMLが生成されます。