これまでの Next.js ブログサイト構築シリーズをまとめたページは以下の通りです。
前回の記事では、VPS 上で Nginx を設定し、
Next.js の初期システムをインターネットに公開するインフラ構築を行いました。
サーバーの黒い画面と睨み合うハードな作業はひと段落し、
今回からは、いよいよ本格的な Web 制作のステップに入ります。
この記事では、WordPress から抽出して手元に確保しておいた
Markdown 形式の記事データを、Next.js のシステムで読み込み、
ブラウザの画面に表示させる手順を解説します。
いよいよ Next.js を使ったブログサイト構築のスタートです。
WordPress を使ってきた非エンジニアの私にとって、
ターミナルでの操作は緊張感がありますが、
新しいシステムで実際にサイトが表示されていく過程は、
非常に楽しいので、ぜひ取り組んでみてください。
gray-matter と react-markdown の導入
Next.js は、標準状態では Markdown ファイルを解釈できません。まずは、Markdown を正確に読み取り、綺麗な Web ページに変換するための定番ツールを2つ導入します。
VPS に接続し、ブログのシステムフォルダ（example-blog）に移動して、以下のコマンドを実行します。
cd ~/example-blog
npm install gray-matter react-markdownそれぞれのツールには、以下のような役割があります。
gray-matterは、記事データの上部にあるタイトルや日付などの設定情報（フロントマター）を整理して読み取るためのツールです。react-markdownは、Markdown で書かれた本文（見出しや箇条書きなど）を、Web サイト用の画面（HTML）に安全に変換して表示するツールです。
テスト用の Markdown 記事を配置する
次に、Next.js に読み込ませるためのテスト記事を VPS 上に用意します。
- 以下のコマンドで、記事データを保管するための専用フォルダ
postsを作成します。
mkdir ~/example-blog/posts- 作成したフォルダ内に、テスト用の Markdown ファイルを作成してテキストエディタを開きます。（ここでは読者に分かりやすいよう
sample-post.mdというファイル名で進めます）
nano ~/example-blog/posts/sample-post.md- 開いた黒い画面に、WordPress から抽出しておいたテスト用 Markdown 記事の中身（一番上の
---から最後まで）をすべて貼り付けます。 Ctrl+Oを押し、Enterで保存してから、Ctrl+Xで終了します。
トップページ（page.tsx）を書き換えて記事を表示する
準備が整ったので、ブラウザでアクセスした時に最初に表示されるトップページのプログラムを書き換えて、先ほど保存したテスト記事を表示させます。
- トップページを作っているプログラムファイルを開きます。
nano ~/example-blog/app/page.tsx- サンプルとして書かれている英語のコードをすべて消去し、以下のプログラムにまるごと書き換えます。
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import ReactMarkdown from 'react-markdown';
export default function Home() {
// 1. さきほど保存したMarkdownファイルの場所を指定して読み込む
const filePath = path.join(process.cwd(), 'posts', 'sample-post.md');
const fileContents = fs.readFileSync(filePath, 'utf8');
// 2. gray-matterで、上部の設定情報（フロントマター）と本文を切り分ける
const { data, content } = matter(fileContents);
// 3. 画面に表示するHTMLの枠組み
return (
<main className="max-w-3xl mx-auto p-8">
{/* タイトルを表示 */}
<h1 className="text-3xl font-bold mb-8">{data.title}</h1>
{/* react-markdownを使って本文を表示 */}
<div>
<ReactMarkdown>{content}</ReactMarkdown>
</div>
</main>
);
}- 保存して終了後、以下のコマンドを実行して Next.js を起動します。
npm run dev起動したら、ブラウザでサイトにアクセスしてみます。
ここまでの作業で文字は無事に表示されると思います。
しかし、見出しなどのデザインが全く反映されていません。
最初この画面を見たときは、「何か設定を間違えたのか」と少し焦りましたが、実はこれ、失敗ではありません。次に行うデザイン設定のための、誰もが通るお約束の通過点です。
Tailwind CSS の公式プラグインでブログデザインを復活させる
文字がのっぺりしてしまうのは、導入している Tailwind CSS というデザインツールが、標準の Web デザインをすべて平坦にリセットする機能を持っているためです。
公式プラグインを導入して、ブログらしい綺麗な装飾を復活させます。
- 新しいツールや設定を追加する前に、ターミナル上で
Ctrl+Cを押し、起動中の Next.js を一旦停止させます。 - 停止して元の入力待ち（
$）に戻ったら、以下のコマンドで装飾用の公式プラグインをインストールします。
npm install @tailwindcss/typography- 全体の設定ファイルを開きます。
nano ~/example-blog/app/globals.css- 一番上のほうに
@plugin "@tailwindcss/typography";という1行を追記して保存します。
@import "tailwindcss";
@plugin "@tailwindcss/typography"; /* ←これを追記します */
- 先ほどの
app/page.tsxを再び開き、表示部分の<div>に魔法のクラス名（prose prose-invert）を追加して保存します。
{/* react-markdownを使って本文を表示 */}
<div className="prose prose-invert max-w-none">
<ReactMarkdown>{content}</ReactMarkdown>
</div>これで npm run dev で Next.js を再起動すると、見違えるように綺麗なブログ記事のデザインが反映されます。
HTML タグと画像の表示を整える仕上げ作業
最後に、WordPress から移行した記事に含まれる、取り消し線などの HTML タグや画像を正しく表示させるための仕上げを行います。
rehype-raw で HTML タグを許可する
Next.js はセキュリティ対策として、Markdown 内の HTML タグを標準でブロックします。これを許可するための追加ツールを導入します。
- 以下のコマンドでツールをインストールします。
npm install rehype-raw- 再び
app/page.tsxを開き、一番上にツールの読み込みを追記し、表示部分に組み込んで保存します。
// 一番上に追記
import rehypeRaw from 'rehype-raw';
// 表示部分を以下のように書き換え
<ReactMarkdown rehypePlugins={[rehypeRaw]}>{content}</ReactMarkdown>public フォルダを使って画像を表示する
Next.js では、ブログで使う画像はすべて public という特別なフォルダに入れておくルールがあります。
- 画像を入れる専用フォルダを作成します。
mkdir ~/example-blog/public/images- 作成したフォルダに、使用する画像ファイル（
.webpなど）をパソコンからアップロードします。 - Markdown 記事（
sample-post.md）を開き、画像のパスの先頭に/を付け足し、実際のファイル名と完全に一致するように記述を修正します。
これで、 npm run dev で Next.js を再起動すると、Markdown の書式が反映され、画像も表示された記事が表示されます。
なお、Markdown を書く際のちょっとしたコツですが、日本語の文章中で **太字** のように装飾を使う際、文字に密着させるとうまく変換されないことがあります。**太字** のように、装飾記号の前後に半角スペースを空けるのがトラブルを防ぐ鉄則です。
まとめ
今回は、WordPress から抽出した Markdown 記事を Next.js で読み込み、Web ページとして綺麗に表示させるまでの手順を解説しました。
文字の表示から始まり、Tailwind CSS の調整、HTML タグの許可、画像のパス設定と段階を踏むことで、Next.js 特有のルールを深く理解することができました。
自分の書いた記事が新しい環境で表示された瞬間の喜びは、Web 制作ならではの醍醐味です。
次回は、この仕組みをさらに応用して、複数の記事データを読み込む新着記事の一覧（トップページ）を作る作業に進みます。
コメント