Quiz Buzzer

Webアプリ制作日誌

Webアプリを制作した際の知見についてまとめています。

開発環境

【開発環境】VS Codeのインストールと設定について TypeScriptの導入 ESLintとPrettierの違いと導入手順 eslint-config-prettierの使い方（VS Codeとの連携）環境ごとに.envを切り替える方法と注意点プロジェクトから不要なパッケージを削除する

Next.jsの活用

Node.jsとNext.jsのインストール手順 Next.jsの基本構造を理解ページを追加してみる useフックの使い方コンポーネントを作成して再利用する Next.js(SSG)でImageタグではなくimgタグを利用する Next.jsで404ページをカスタマイズする方法 react-flags-selectの使い方 react-spinnersの使い方 Next.jsでのOGP設定について PWAに対応するためのmanifest.jsonの書き方 SEO対策の基礎 Next.jsのSSG(Static Exports)にて、自作コードで簡易的に多言語対応する方法

Firebaseの活用

Realtime Database と Firestore の比較 Firebase Realtime Databaseの使い方 Firebase Authenticationの導入（匿名認証）

必須ページ

利用規約とプライバシーポリシーのページお問い合わせフォームの設置

デプロイに関して

Next.js(SSG) + Cloudflare Pagesの構成について～利点と注意点～デプロイして公開する（Cloudflare Pages）用意すべきicon画像について Next.js(SSG)で出力したサイトをサブディレクトリに設置する方法 robots.txtとsitemap.xmlの役割と設置方法

Tailwind CSSの活用

Tailwind CSSを導入する Tailwind CSSでのレスポンシブ対応の基本

その他

スパム・bot対策システムの導入 Google Search Consoleの使い方と活用ポイント