【Next.js】Hunter×Hunterの休載期間をリアルタイム表示するWebアプリ【Vercel】

なにこれ

こんなの
ソースコード : https://github.com/nishiurahiroki/how_long_H-H_suspned

なぜ作った

Hunter×Hunterが好きすぎるから(全漫画で一番)
愛故のイジり

なぜNext.js

とにかくNext.js触ってみたかった。

気付き

主にNext.jsに関して、

• 環境構築が生のReact.jsより(create-react-appを使わない)遥かに簡単
  • モジュールバンドラーの用意とかがほとんど必要無い
• Vercelへのデプロイ、CIの設定がとにかく楽

等

何気に初SSRフレームワークだったが、とにかく直感的に使えるフレームワークだと感じた。
これを期にNuxt等もぜひ触ってみたいと思った。

こだわった所

・現在時刻に関して、端末時間ではなく、Rest APIを用いてサーバー側の正確な時間をgetServerSideProps内で取得する様にした。

import {fetchNow} from '../utils/DateUtils'

export default function Index({ now }) {
 // ~ 中略
}

export async function getServerSideProps() {
  const now = await fetchNow()

  return {
    props : { now }
  }
}

その他

・アドベントカレンダー一度は参加したくて頑張った、けど結果私事で色々ありすぎて内容こんなスカスカに。。。来年もっと頑張ります
・冨樫先生、いつまでも待ってます