Next.jsで自分のサイトをつくった

つくった。

tanaken0515.com

つくりはじめるまで

今年の2月〜4月あたりに知り合いたちとモブプロで勉強するのにハマっていて、その題材としてReactとNext.jsのチュートリアルをやった。

Reactは2018年ごろにいっかいチュートリアルをやったのだけど、業務でもReactを使っているので改めてやってみることにしたのだった。

ja.reactjs.org

Next.jsはReactのフレームワークとして認識はしていて、「なんかめっちゃ便利らしい」ということだけ知っていたので面白がって取り組んだ。

nextjs.org

たしかに便利じゃん、ということがわかったので、これを使ってなにかつくろうかね〜ということで、自分のサイトをつくることにしたのであった。

つくるにあたって

まずはNext.jsのチュートリアルのコードをそのまま使う感じでつくり始めた。

Next.jsのチュートリアルはいくつかのレッスンに分かれていて、どのレッスンも途中から開始できるように「Download Starter Code」というセクションがある。 これが便利で、直前のレッスンをやっていなくても「直前のレッスンを終えた状態のコードがあるから、これを使いなよ?」と言ってくれるのだ。 (今後自分になにかのチュートリアルをつくる機会が訪れたら、この手法を取り入れたいなと思った)

で、今回は Assets, Metadata, and CSS | Learn Next.js のレッスンを終えた状態のコードからつくり始めることにした。

サイトのコンテンツを練るにあたって先輩方のサイトを参考にした。

サイトに経歴を載せたいな〜と思い、でもコンポーネントのデザインに時間を掛けたくないので、そういう便利なコンポーネントがありそうなUIライブラリを探した。

いくつか眺めてみると React Timeline component - Material-UI が一番しっくりきたのでMaterial-UIを使うことにした。

あとは、サイトを訪れたときに自分の最近の様子が伝わるといいなぁと思ったので、TOPICSという枠を設けてみた。 月に1~2件のTOPICが追加されるイメージ。 TOPICSや経歴の情報はYAMLで管理してる。

デプロイ先は Vercel を使っている。これもめちゃんこ便利。

ドメインムームードメイン | 欲しいドメインがすぐ見つかる。 で取得しました。ありがとうございます。

現職のGMOペパボでは「好きなドメイン無料」という福利厚生があるんですよね、ありがとうございます。

recruit.pepabo.com

ありがとうございます。

つくったあと

コンテンツをもっと充実させたいと思っていて

  • つくったもの
  • 書いたブログ(会社/個人)
  • 発表した資料
  • イベント参加の様子

あたりを追加する予定(未定)。

当初はブログの執筆もこのサイトに寄せてしまおうかなと(はてなブログを卒業しようかな)と思っていたのだけど、それ自体にそこまでのモチベーションはないのでどうしようかなというところ。はてなブログAPIを叩いて直近の記事数件のタイトルをサイトに表示(はてなブログへのリンク)って感じでも良いかもなぁ、など考えている。未定です。