はじめに

React のフレームワークである Next.js を使ってみたかったので、 Next.js を使って自己紹介サイトを作ってみました。当サイトのビルド、デプロイおよび公開にはNetlify を使いました。

また、ブログなどのコンテンツは Netlify CMS を使って管理できるようにしています。コンテンツはデータベースではなくファイルで管理しており、 Netlify CMS を使うことで管理画面を作ってブラウザ上で記事を挙げることが簡単に出来ます。Netlify CMS で作った管理画面上で記事を書くと、 Netlify と連携した GitHub レポジトリにプッシュされ、 Netlify の機能によって自動的に公開することが出来ます。

さらに、公開されたサイトは Next.js のプレレンダリング機能により各ページの HTML が予め生成されているので、閲覧する時にサクサクと素早く動作します。

どのようなサイトを作ったのか

自己紹介サイトを作りました。

コンテンツは今のところ、

• ホーム
• ブログ
• ポートフォリオ
• コンタクトフォーム

の4つです。

そのうち、ブログとポートフォリオはマークダウンファイルをアップロードすることで記事ページを追加できるようになっています。この作業はブラウザ上で Netlify CMS の管理画面から行うことができるようにしました。

おわりに

当サイトを作る前に Next.js のチュートリアルをやってみました。 Next.jsの公式ドキュメントにも、とにかくまずは "learn course" をやってみるのがお勧めだと書いてあります。このチュートリアルは丁寧に書かれています。そして内容もブログシステムを作るというものです。当サイトはこのチュートリアルに沿って Next.js を少し学んだ後に再度アレンジを加えながら作りました。 Next.js の公式チュートリアルでは公開には Vercel がお勧めされていますが、今回は Netlify を使いました。 Netlify を使ったのは、これまでも使用した経験があり便利だと感じていたことと、 Forms などの機能があり、コンタクトフォームなども簡単に作ることができるからです。 Netlify の機能は他にもたくさんあり、まだまだ使えていないものもあるのでこれからも有効に使っていきたいと思っています。