Vercelのテンプレート使ってNext.jsのブログ作ってみた

これで俺も念願のNext.jsデビュー。コンテンツ管理機能？データベース？なにそれ？最もフィジカルで最もプリミティブで最も安上がりなブログテンプレートとは...

Vercelの無料枠で何か作りたくて、Next.jsのブログテンプレートからブログを作ってみました。

使ったテンプレート：next.js/examples/blog-starter

テンプレートをgit cloneしてブログの作成方法とかデプロイ方法とか覚えただけで、何かを作ったとは言えないのだが、いろいろと勉強になって楽しかったのでシェア

Next.jsほぼ素人だから「らしい...」しか言ってない（謎の技術に怯える江戸時代の人風味）

テンプレートの概要

• Next.jsの静的サイトジェネレーションというやつらしい...
• Markdownファイルを_postsディレクトリに配置するとビルド時にHTMLに変換されて（？）ページが生成される
• remarkっていう謎の技術がMarkdownをパースしてHTMLに変換してくれるらしい...
• gray-matterっていう謎の技術②がメタ情報を読み取ってくれるらしい...
• つまり一個のmdファイルで記事のメタ情報とコンテンツ両方管理できるってわけ...
• 記事の追加・削除するために必要なのは_postsのファイルの追加・削除だけ...

例えば/_posts/20150102.mdの中身はこんな感じ

---

---
title: "Vercelのテンプレート使ってNext.jsのブログ作ってみた"
excerpt: "これで俺も念願のNext.jsデビュー。コンテンツ管理機能？データベース？なにそれ？最もフィジカルで最もプリミティブで最も安上がりなブログテンプレートとは..."
coverImage: "/assets/blog/20250102/cover.jpg"
date: "2025-01-02T00:00:00"
author:
  name: Sachison Nitta
  picture: "/assets/blog/authors/jj.jpeg"
ogImage:
  url: "/assets/blog/20250102/cover.jpg"
---

Vercelの無料枠で何か作りたくて、Next.jsのブログテンプレートからブログを作ってみました。

---

感想

今まで業務ではCMSしか使ったことなかったので、ブログっぽいもの作るならDB用意してサーバー用意して〜と思っていたのだが、コンテンツを追加するためにファイルを追加するっていうの、一周回って古のウェブサイト感あっていいよな

デプロイに時間がかかるのが気になるけど（vercel --prodで実際に反映されるまで1分くらいかかる）サーバーレスだから経済的だし作りが単純でカスタマイズしやすそうなところが気に入ってる

ハリソン山中もびっくりのSimplicityだよー