Next.jsとContentfulで簡易ブログを作ってみた

Next.jsとヘッドレスAPIを使って何か作ってみたかったので簡単なブログを作ってみました。技術スタックはこんな感じです。

• Next.js
• TypeScript
• tailwindcss
• Contentful

Vercelでデプロイしてホスティングしてます。cssには試しにtailwindcssを使ってみましたが、utility-firstなのでclassNameをいちいち考えて決める必要がないのが楽です。JITモードだと任意の値が設定できるようになったりとさらに柔軟に使えるようになって便利です。

Contentfulはマークダウンも対応してるので、マークダウンで書いた記事のデータをContentfulから取得してNext.js側でHTMLに変換して出力するようにしました。コードブロックには下記のような感じでシンタックスハイライトがつくようにしてます。このへんが結構大変でした。

export function getAllPostIds() {
	const fileNames = fs.readdirSync(postsDirectory)
	return fileNames.map((fileName) => {
		return {
			params: {
				id: fileName.replace(/\.md$/, ''),
			},
		}
	})
}

ちなみにこちらのチュートリアル動画がわかりやすくて参考になりました。
Next.js & Contentful Tutorial

とりあえず最低限の機能だけで作ったので、必要に感じた機能は随時追加していこうと思います。