sagara.inkITエンジニアのまとめノート

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

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

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

console
npm create-next-app my-blog

手動で作成する

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

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

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

console
mkdir pages
touch pages/index.js
index.js
import React from 'react'

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

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

console
npx next dev
fig1

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

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

console
npx next build && npx next export

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