CS5513-Week08 — Friendly Eats（Next.js + Firebase）演習コード

Web
CS5513-Week08 — Friendly Eats（Next.js + Firebase）演習コード

CS5513-Week08 — Friendly Eats（Next.js + Firebase）演習コード

CS5513-Week08は、Next.jsとFirebaseを組み合わせたチュートリアル／演習プロジェクト「Friendly Eats」のソースコードです。Firebaseエミュレータを使ったローカル開発手順、lib/firebase/config-copy.jsを複製して設定するワークフロー、npmによる起動方法がREADMEに記載されており、Next.jsアプリケーションとFirebaseの連携を学ぶための実践的なサンプルとなっています（開発設定ファイルやLint/Prettier設定を含む）。

https://github.com/nleal707/CS5513-Week08

概要

このリポジトリは「Friendly Eats」というNext.jsとFirebaseを使ったハンズオン／コーデラボ用の演習コードです。主にFirebaseエミュレータを用いたローカル開発フローと、Firebaseプロジェクト設定をプロジェクト内で管理する方法を示しています。READMEにはエミュレータの起動手順、lib/firebase/config-copy.jsをコピーしてconfig.jsを作成する方法、npmによるローカルサーバ起動手順が記載されており、Next.jsアプリの実行とFirebase連携の基本が学べます。開発向けのESLint／Prettier設定なども含まれているため、学習や小規模プロジェクトのテンプレートとして使いやすい構成です。

GitHub

リポジトリの統計情報

  • スター数: 1
  • フォーク数: 0
  • ウォッチャー数: 1
  • コミット数: 6
  • ファイル数: 16
  • メインの言語: JavaScript

主な特徴

  • Next.jsをフロントエンドに、Firebaseをバックエンドに使う学習向けサンプル。
  • Firebaseエミュレータを用いたローカル開発手順がREADMEに明記。
  • セキュアな設定を分離するためのlib/firebase/config-copy.js→config.jsのコピー運用。
  • 開発整備用にESLint/Prettier等の設定ファイルを含む。

技術的なポイント

このプロジェクトはNext.jsとFirebaseの典型的な組み合わせを示す教材で、ローカルで安全に開発できるようFirebaseエミュレータを前提に構成されています。エミュレータを使うことでFirestoreやAuthenticationなどの実サービスを使わずに動作確認が可能になり、課金リスクや誤操作を避けられます。設定はlib/firebase/config-copy.jsとしてサンプルを置き、実運用情報はコピーしてlib/firebase/config.jsとしてローカルに保持する運用を想定しており、秘密情報をリポジトリに残さないベストプラクティスに従っています。プロジェクトにはESLint（.eslintrc）やPrettier（.prettierrc.json）が含まれ、コードスタイルや静的解析のルールが整備されています。また、apphosting.yamlや.firebasercなどデプロイ関連やエミュレータ設定ファイルが含まれていることから、ローカル→クラウドへの移行を考慮した構成になっています。実際のアプリ構造はNext.jsの慣例（pages／APIルート／components）を想定しており、npmスクリプトで開発サーバ（npm run dev）を起動する流れがREADMEに示されています。学習用途としては、Next.jsのレンダリング戦略（SSR/ISR）やFirebase Authentication／Firestoreの基本操作、ローカルエミュレータの使い方を短時間で体験できる点が有用です。

プロジェクトの構成

主要なファイルとディレクトリ：

  • .eslintrc: file
  • .firebaserc: file
  • .gitignore: file
  • .prettierrc.json: file
  • apphosting.yaml: file

…他 11 ファイル

まとめ

Next.jsとFirebaseの学習に適した、エミュレータ中心の実践サンプルです。

リポジトリ情報：

READMEの抜粋：

Friendly Eats with Next.js + Firebase

The codelab has the full instructions, but as a quick start, you can do this.

Run the application

  1. In your terminal, run:
firebase emulators:start --project demo-codelab-nextjs

  1. Copy the file lib/firebase/config-copy.js to lib/firebase/config.js and fill in the values from the Firebase console.

  2. In a new terminal tab/window, run:

npm i
npm run dev
  1. In your browser, open the URL: http://localhost:3000

U…