Blog

Next.jsとmicroCMSでポートフォリオサイトを作る

はじめに

こんにちは。2021年に新卒でニフティに入社し、今年度で2年目になりました。そろそろポートフォリオサイトを作って、自分がやってきたことをアウトプットしたいと思いました。

そこで今回は、Next.jsとmicroCMSを使ってポートフォリオサイトを作っていきます!

microCMSとは、日本製のヘッドレスCMSです。日本製なのでドキュメントが全て日本語に対応されており、丁寧にまとめられています。なので利用しやすいことで人気を集めています。今回はこちらを使っていきたいと思います。簡略化のため、Next.jsのチュートリアルをもとにmicroCMSを導入していきたいと思います。

Next.jsのチュートリアルをたどれば、ブログサイトは作成できるのですが、ローカルにファイルを保存しているのであまりイケていません。microCMSを使って、コンテンツをクラウド上で管理し、APIで呼び出せるようにしていきたいと思います。

今回作成したソースコードはGitHub上に公開していますので、試したい方はそちらからcloneしていただき、次のステップで実施するmicroCMSの準備をしていただくと、すぐに動かすことができます!

ソースコードはこちら

また、Vercelにデプロイしているので実際の動作を確認いただけます!
https://nextjs-tutorial-git-feature-microcms-k0825.vercel.app/

microCMSの準備

microCMSを準備していきます。まず、microCMSのページにアクセスし、新規登録でアカウントを作成します。アカウント登録画面から登録します

アカウントを登録したら、ログイン画面からログインすることができます。メールアドレス、パスワードを入力しログインしてください。

ログインすると、サービス情報を入力という画面に遷移します。

好きなサービス名とサービスIDを入力してください。

今回は以下のように設定しました。

  • サービス名: techblog
  • サービスID: ikarigawa-techblog

「サービスを作成」をクリックし、サービスを作成します。

以下のような画面が出れば登録完了です!

表示されているURLにアクセスすると管理画面に移動できます。

管理画面からAPIを作っていきます。テンプレートから「ブログ」を選択し、APIを作成します。

しばらく待つと、以下のような画面に遷移します。

左メニューのコンテンツ(API)を確認すると、「ブログ」、「カテゴリ」というAPIが作成されていることがわかります。また、それぞれクリックすると、各コンテンツ一覧を見ることができます。

これでmicroCMS側の設定は完了しました。他にも色々設定したり、確認したい場合は、microCMSのドキュメントをご参照ください!

Next.jsの準備

次にNext.jsを準備していきます。

Next.jsプロジェクトの作成

今回はNext.jsのチュートリアルで作成した、完成系のものを使っていきます。以下のコマンドをターミナルやコマンドプロンプトで入力し、Next.jsプロジェクトを作成します。

作成が完了したら、開発サーバーを立ち上げてみます。

localhost:3000にアクセスすると下記の画像のようにアプリケーションが立ち上がります。

このままでも良いですが、Your NameYour Self Introductionを自分のものに更新してみてください!変更箇所は以下になります。

  • public/images/profile.jpgを任意の写真に置き換える
  • components/layout.jsconst name = '[Your Name]'
  • pages/index.js<p>[Your Self Introduction]</p>

以下のように修正しました

postsディレクトリにマークダウンファイルがあると思います。こちらのディレクトリにファイルを保存することで、このページに表示される仕組みとなっています。

ちなみに、ファイルの中身は以下のようになっています。

ファイルの上のほうで記事のタイトルと日付を設定し、その下に本文があるという形になっているようです。

今回はこちらにファイルを置いて管理するのではなく、microCMSに保存してAPIでデータを取り出すように修正していきます。

環境変数の設定

microCMSのAPIへアクセスするためには、リクエスト先のサービスドメインとAPIキーを指定する必要があります。

.env.development.localファイルを作成します。.localをつけるとローカル環境で使うことができ、.developmentをつけると開発環境で使うことができます。

作成し、APIキーとサービスドメインの情報を記述します。

  • サービスドメインは、ikarigawa-techblog.microcms.ioの ikarigawa-techblogの部分です。
  • APIキーは以下の画像の赤枠部分をクリックすることで確認することができます。

 

microcms-js-sdkをインストール

次に、公式で提供しているmicroCMSのパッケージである、microcms-js-sdkをインストールします。

lib/clients.jsを作成し、SDKの初期化を行います。

serviceDomainapiKeyの値は.env.development.localを参照します。

これで準備が整いました!

記事一覧を表示

実際にmicroCMSから記事を取得するようにソースコードを変更していきます。
lib/posts.jsにてデータをフェッチし、各コンポーネントにデータを渡しているので、こちらを開いていきます。

lib/posts.js

lib/posts.jsのgetSortedPostsDataにてIDとそのファイルの中身を取得し、ソートして返却しています。

コードを修正していきます。まず、事前準備にて作成した、client.jsをimportします。
そして、allPostsDataという変数にmicroCMSから取得したデータを代入します。

pages/index.js

次に、pages/index.jsを修正していきます。getStaticPropsを修正します。

getSortedPostsDataを呼び出す箇所にawaitをつけるだけです。

ページにアクセスすると以下のようなエラーが発生します。

どうやら日付表示周りでエラーが出ているようです。ここで、APIがどんなリクエストを返すか見ていきたいとおもいます。

💡
こちらの変更は確認後に元に戻してください。

ページを開き、開発者ツールを開きます。すると、コンソールが表示されAPIからのリクエスト結果が表示されます。

APIのリクエストは、id, title, content, createdAtなどが返されます。APIの返却値はmicroCMSのドキュメントをご参照ください。

ソースコードに戻り、処理を確認してみます。

APIからはdateが返されていませんが、allPostsDatamapdateが使われています。dateがないため、エラーになってしまっているようです。 なので、こちらを修正する必要がありそうです。

以下のように、dateをcreatedAtに修正します。

再度ページを見てみます。すると、今まで表示されていたファイルに保存しているデータが表示されずに、 新しくmicroCMSに保存されているデータのタイトルが表示されています。

こちらで、記事一覧の取得は完了です!

microCMSに記事を追加し、ページにも同じようにタイトルが表示されることを確認してみてください!

次のセクションで記事詳細ページを表示できるようにエラーを解消し、画面遷移できるようにしていきます。

記事詳細画面にルーティング

記事のタイトルをクリックすると、記事の詳細ページへ遷移するように修正していきます。

lib/posts.js

lib/posts.jsのgetAllPostIdsにて、ファイル名をIDとして取得しています。こちらは動的ルーティングの処理で使用されており、例えばlocalhost:3000/posts/{ファイル名}のようにURLを指定すると、そのファイル名の記事詳細画面に遷移する仕組みとなっています。

以下のように修正します。APIからデータを取得し、mapでidのみを取り出すようにしました。

pages/post/[id].js

呼び出し元は以下のようになっています。pages/posts/[id].jsgetStaticPathsです。こちらが動的ルーティングを実現するためのメソッドとなります。

以下のように修正します。awaitをつけるだけです。

これで、パスが通るようになったはずです。ページを見ていきます。

では、ページを見ていきます。

ページが見つからないとエラーが出てしまいました。まだmicroCMS用に詳細ページを作成していないので、この表示になってしまいます。

ですが、リンクは正しいものになっており、microCMSのコンテンツIDがパスとして表示されています。
microCMSの管理画面と比較してみると、リンクの末尾と記事のIDが同じであることがわかります。

記事詳細画面を表示

記事詳細が表示できるようにしていきます。記事ひとつひとつのデータはgetPostDataで取得しているようです。
IDからパスを作成し、ファイルの中身を取得しています。

lib/posts.js

記事が表示できるように修正していきます。記事ひとつひとつのデータはgetPostDataで取得しているようです。

IDからパスを作成し、ファイルの中身を取得しています。

マークダウンからデータ整形をする必要があるので少々長くなっていましたが、APIからデータを受け取る形にすることでこうした処理が不要になります。

他のメソッドと同様に、APIからデータを受け取る形に修正していきます。記事を一つだけ受け取る場合はリクエストを投げる際に、endpointの他にcontentIdを指定してあげる必要があります。

以下のように修正します。APIから受け取ったデータをそのまま返すようになりました。

ページを確認していきます。

トップページから任意のページにアクセスし、サンプルページを作成することができました!

おめでとうございます。これで自分のポートフォリオページを作ることができました!

さいごに

今回は、Next.jsのチュートリアルページを改良して、ローカルにデータを保持していた投稿をmicroCMSから取得できるようにしました!

Next.jsもmicroCMSも公式のチュートリアルやブログが充実しており、導入もしやすいと思いました。

チュートリアルが終わったけど何をすればいいかわからない。という人はぜひ自分のブログページを作ってみてください。

参考記事

We are hiring!

ニフティでは、さまざまなプロダクトへ挑戦するエンジニアを絶賛募集中です!
ご興味のある方は以下の採用サイトよりお気軽にご連絡ください!

Tech TalkやMeetUpも開催しております! こちらもお気軽にご応募ください!