サイゼリヤガチャをNext.jsで実装するメモ

リファクタ

• デザイン・機能・メニューは変更しない
• Typescript / Hooksで実装する
• 引き続きGithub Pagesを利用する
  ここで一旦リリース

v2構想

• 金額・カロリーを変更できるようにする
• ヘルプページ(利用規約)を記載する
• メニュー更新をより手軽にできるCI/CDを作成する

feature work

• ガチャ結果を永続化する
• 結果画像を共有できるようにする
• スロット演出を入れる

リファクタ

Github Pages

Nextでbuildしたページのデプロイ方法

• GitHub PagesにNext.js をデプロイする
• Next.jsで作ったアプリをGitHub Pagesにデプロイする: ハマりどころにしっかりハマった

source mapは無効化しておく

• create-react-appでのbuildデプロイしたらsource mapが有効になっていたときの対処法

// package.json
  "scripts": {
    ...
    "production-build": "GENERATE_SOURCEMAP=false next build && next export",
    ...
  },

GA

• Next.jsでGoogle Analyticsを使えるようにする - パンダのプログラミングブログ