Next.jsとマークダウンで、爆速＆SEO最強の静的ブログを作ろう！WordPressからの乗り換えにも最適

2025-03-20

Next.js の SSG（Static Site Generation）でサイトをビルドすると、ページ速度が高速になります。

ページの表示速度はユーザー体験とSEO的に重要で、Webサイトのパフォーマンスを改善したい方にはおすすめです。

Next.jsとマークダウンでブログを構築する方法

マークダウンを使うメリット

Markdown とは文章を見やすくまとめることができる記法です。

ブログを書くときに見出しやリストなどを使い読みやすい記事が書けます！

対応しているエディタ（VS Code、 Cursor など）で書けるのも便利ですね。

また、本ブログのようにプログラミングのコードをコードブロックのシンタックスハイライトで見やすく表示することも可能です👏

Next.js（SSG）でのブログ制作手順

大まかな手順は以下の通りです。

Next.jsのプロジェクトを作成
マークダウンファイルを読み込む基本的な実装
GitHubでビルド ➡️ 本番環境にデプロイできるよう設定

generateStaticParamsを使用してブログ記事ページを生成

generateStaticParams 関数は [slug]/page.tsx の動的ルーティングからパラメータを取得して、静的ページを生成することができます。

import Link from 'next/link';
import { notFound } from 'next/navigation';
import { getAllPostSlugs, getPostData } from '@/lib/posts';
import { Metadata } from 'next';
import styles from '../../styles/Post.module.css';
 
// メタデータの生成
export async function generateMetadata({ 
  params 
}: { 
  params: { slug: string } 
}): Promise<Metadata> {
  const resolvedParams = await params;
  const post = await getPostData(resolvedParams.slug);
  return {
    title: post.title,
  };
}
 
// 静的ページ生成のためのパラメータを設定
export async function generateStaticParams() {
  const slugs = await getAllPostSlugs();
  return slugs.map((slug) => ({
    slug,
  }));
}
 
// ページコンポーネント
export default async function Page({ 
  params 
}: { 
  params: { slug: string } 
}) {
  try {
    // 記事データを取得
    const resolvedParams = await params;
    const postData = await getPostData(resolvedParams.slug);
    
    return (
      <article className={styles.container}>
        {/* 戻るリンク */}
        <Link
          href="/"
          className={styles.backLink}
        >
          ← 記事一覧に戻る
        </Link>
        
        {/* 記事タイトル */}
        <h1 className={styles.title}>{postData.title}</h1>
        
        {/* 投稿日 */}
        <time className={styles.date}>{postData.date}</time>
        
        {/* 記事の本文 - dangerouslySetInnerHTMLはエスケープされたHTMLを表示するために使用 */}
        <div 
          className={styles.content}
          dangerouslySetInnerHTML={{ __html: postData.contentHtml }} 
        />
      </article>
    );
  } catch (error) {
    // 記事が見つからない場合は404ページを表示
    notFound();
  }
}

GitHubアクションでプッシュをトリガーに本番環境にデプロイできるよう設定

.github\workflows\deploy.ymlをプロジェクト直下に作成します。

name: Deploy to Rental Server
 
on:
  push:
    branches: [ master ]
 
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    
    steps:
      - name: Checkout code
        uses: actions/checkout@v3
        
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
          
      - name: Install dependencies
        run: npm ci
        
      - name: Build
        run: npm run build
        
      - name: Deploy to server
        uses: SamKirkland/FTP-Deploy-Action@v4.3.4
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: ./out/
          server-dir: /ntorelabo.com/public_html/next-tech-blog/

GitHubでの設定

上記のFTP_SERVER、FTP_USERNAME、FTP_PASSWORDをGitHubのSettingsから作成しFTPの設定をします。

Actions を使用できるようにするために、Actions permissions を設定します。