静的サイト生成(SSG)とNext.js: 高速ローディングサイトの実現

はじめに

Next.jsは、リアクティブWebアプリケーション開発のためのモダンなフレームワークであり、静的サイト生成(SSG)を活用することで高速ローディングが可能となります。この記事では、SSGとNext.jsを用いた効果的な方法とコーディングに役立つ情報を提供できるよう心がけています。

目次

1. 静的サイト生成(SSG)とは?
2. Next.jsにおけるSSGの利点
3. Next.jsでのSSGの実装方法
4. コード例
5. まとめ

1. 静的サイト生成(SSG)とは?

静的サイト生成 (SSG) は、Webサイトのコンテンツをあらかじめ生成し、それを配信元（CDNなど）においておくことで、ユーザーがリクエスト時に一瞬でサイトを表示できるようにする手法です。

2. Next.jsにおけるSSGの利点

Next.jsはReactベースのフレームワークであり、サーバーサイドレンダリング（SSR）による動的コンテンツも可能ですが、SSGを使うことで、以下のような利点があります。

1. 高速なローディング
2. 低消費リソース
3. セキュリティの向上

3. Next.jsでのSSGの実装方法

Next.jsでは、SSGを行うために2つの関数が提供されています。それがgetStaticPropsとgetStaticPathsです。

1. getStaticProps: ページのデータを取得するための関数で、ビルド時に実行されます。
2. getStaticPaths: 動的なページのパスを事前に生成するための関数で、ビルド時に実行されます。

4. コード例

以下は、Next.jsでSSGを用いたシンプルなブログアプリケーションのコード例です。

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import marked from 'marked';

export default function PostPage({ htmlString, data }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: htmlString }} />
    </div>
  );
}

export async function getStaticPaths() {
  const files = fs.readdirSync("posts");
  const paths = files.map((filename) => ({
    params: {
      slug: filename.replace(".md", ""),
    },
  }));

  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params: { slug } }) {
  const markdownWithMetadata = fs
    .readFileSync(path.join("posts", slug + ".md"))
    .toString();
  const parsedMarkdown = matter(markdownWithMetadata);

  const htmlString = marked(parsedMarkdown.content);

  return {
    props: {
      htmlString,
      data: parsedMarkdown.data,
    },
  };
}

5. まとめ

Next.jsと静的サイト生成(SSG)を組み合わせることで、非常に高速なWebサイトを簡単に構築することができます。また、リソースの消費やセキュリティの観点からも、SSGは非常に有効です。Next.jsでのSSGの実装は、getStaticPropsとgetStaticPathsを活用することで素早く、効果的な結果を得ることができます。