なぜNext.jsでブログサイトを作ったのか？

作った経緯は、次のプロジェクトでChakra UIを使ってみようかな？と思ったことがきっかけです。どうせならChakra UIを使って何か作ってみようということで、個人で作った製作物などをまとめるためのサイトを作ろうと思いました。

普段のシステム開発では、フロント側はReactを使っていたため、そのFWであるNext.jsには興味がありました。調べているとNext.jsでブログを作ったという記事を見かけ、自分だけの技術ブログサイトって何かかっこいいな！ということでブログ機能も入れてみることにしました。

下準備

普段の仕事では、いわゆるWebサイトを作ったりすることはないので、まずはどんなデザインにするかを考えながらFigmaでデザインを組んでみました。アニメーションもつけてみたいなと思い、作りたい動きをどうやって実装しようか考えました。ですが結局アニメーションは、少し力技で実装している部分があるような気がしてます笑

大体全体のデザインができたら、Next.jsのドキュメントなどをみながら実装していきました。

実装したこと

このサイトのでやったことは、下記のようなものになっています。

• ブログ機能
• OGP対応
• お問い合わせ機能
• SPAによるサイト表示
• レスポンシブ対応
• ダークモード対応
• 簡単なアニメーション

ブログ機能について

ブログ機能の中身は、

• ブログ投稿表示機能
• タイトル/タグ検索機能
• 動的なOGP対応

といった基本的なものです。

ブログ投稿表示機能では、Markdownでファイルを記述して、デザインなどは自動で整えるようにしました。また技術ブログでは、コードのシンタックスハイライトもあったほうがかっこいいということで実装しました。下記のような感じです。

console.log('hogehoge')

動的なOGP対応では、ブログのタイトルで自動的にOGP画像が生成されるように実装しました。今回はcanvasを使用して画像を生成しています。他にもAWS Lambdaのパッケージを用いて画像を生成することも可能なようです。（※Vercelでは、APIのルートは Serverless FunctionとしてAWS Lambdaにデプロイされるため）

タイトル/タグ検索機能では、ビルド時にgetStaticPropsで生成しているデータの中から条件に合うものを表示する形で実装しました。

Next.jsを使ってみて

今回初めて触ったのですが、ルーティング周りがすごく楽でした。Reactではrouterを仕込んで実装するので、自動でその辺りを繋げてくれるのはすごくありがたい。またブログ詳細ページなどでは、[]で囲ってファイルを作ることで、簡単に動的ルーティング（ダイナミックルーティング）を作成でき、URLの設定も簡単に実装できました。

Next.jsでは、

• getStaticPaths
• getStaticProps
• getServerSideProps

といった関数があり、今回ダイナミックルーティングを行うのために、getStaticPathsとgetStaticPropsを使用しました。

Chakra UIについて

今回UIライブラリは、Chakra UIを使用しました。前から気になっていたダークモードの対応や、レスポンシブデザインの実装も行いやすかったです。また、スタイルの作り方も柔軟にできて、ある程度自分でスタイルを作りたい場合はおすすめです。逆に管理画面のようなデザインであれば、コンポーネントが豊富なMUI（Material UI）のが実装が少なて済む気がします。

Vercelでデプロイを実施

VercelとはNext.jsを開発しているVercel Inc.が提供しているプラットフォームで、Next.jsで作成したプロジェクトを簡単にデプロイできるサービスです。サーバー側の設定を自動で行って、デプロイも紐づけているリモートブランチにpushしたら自動で行ってくれます。今回はこのVercelを用いてデプロイし、ドメインは別途無料のものを発行して使用しています。

まとめ

Next.jsについて、深いところまでは触れていない気がしますが、Next.jsやSSG（Static Site Generation）/ SSR（Server Side Rendering）の勉強になりました。またChakra UIについても、色んな方法でスタイルを当てれて勉強になりました。 この辺りは、また別の記事で詳しく書きたいと思います。