https://github.com/isystk/nextjs-typescript-firebase
Next.js・Typescript ・Firebaseを利用したサンプルです。
https://github.com/isystk/nextjs-typescript-firebase
firebase material-ui reactjs redux-toolkit typescipt typescript
Last synced: 3 months ago
JSON representation
Next.js・Typescript ・Firebaseを利用したサンプルです。
- Host: GitHub
- URL: https://github.com/isystk/nextjs-typescript-firebase
- Owner: isystk
- License: mit
- Created: 2021-01-11T13:41:33.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-07-24T13:20:25.000Z (almost 3 years ago)
- Last Synced: 2025-01-10T13:53:06.689Z (5 months ago)
- Topics: firebase, material-ui, reactjs, redux-toolkit, typescipt, typescript
- Language: TypeScript
- Homepage:
- Size: 18.2 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
🌙 nextjs-typescript-firebase
====
[](https://circleci.com/gh/isystk/nextjs-typescript-firebase/tree/master)
## 📗 プロジェクトの概要
Next.js ＆ Firebase の学習用サンプルアプリケーションです。
## 🌐 Demo
- ログイン/ログアウト
- 会員登録
- 投稿一覧
- 投稿詳細
- マイページ（一覧・登録・更新・削除）
## 📦 ディレクトリ構造
```
.
├── docker/
│ ├── apache/ (Webサーバー)
│ │ └── Dockerfile
│ ├── app/ (Node.js をDockerで動作させたい場合に利用する)
│ │ └── Dockerfile
│ └── firebase/ (Firebase のエミュレータ)
│ ├── Dockerfile
│ └── src
│ └── functions (Cloud functions のソースコード)
├── public/
├── src/ (Next.js のソースコード)
│ ├── auth/
│ ├── common/
│ ├── components/
│ ├── pages/
│ ├── store/
│ ├── styles/
│ └── utilities/
├── test/
└── dc.sh （Dockerの起動用スクリプト）
```
## 🖊️ Docker 操作用シェルスクリプトの使い方
```
Usage:
dc.sh [command] []
Options:
stats|st Dockerコンテナの状態を表示します。
init Dockerコンテナ・イメージ・生成ファイルの状態を初期化します。
start すべてのDaemonを起動します。
stop すべてのDaemonを停止します。
firebase login Firebase にログインします。
firebase start Firebase のエミュレータを起動します。
firebase build Cloud Functions をビルドします。
firebase deploy Firebase にデプロイします。
--version, -v バージョンを表示します。
--help, -h ヘルプを表示します。
```
## 💬 使い方
```
# 下準備
$ ./dc.sh init
$ cp .env.example .env
# Dockerを起動する
$ ./dc.sh start
# 初回のみFirebaseのセットアップ
./dc.sh firebase login
./dc.sh firebase init
# Firebaseエミュレータを起動します。
$ ./dc.sh firebase start
$ open http://localhost:4000
# Cloud Functions をビルドします。
docker-compose -f docker/docker-compose.yml exec firebase sh
cd ./functions
yarn
yarn build
# 投稿データをPOST
curl -X POST -H "Content-Type: application/json" -d @post.json http://localhost:5001/nextjs-typescript-firestore/us-central1/api/posts
# 投稿データの一覧を取得する
curl http://localhost:5001/nextjs-typescript-firestore/us-central1/api/posts
# Next.jsアプリを起動します。
./dc.sh app install
./dc.sh app dev
$ open http://localhost:3000
# Dockerを停止する場合
$ ./dc.sh stop
```
## 🎨 参考
| プロジェクト| 概要|
| :---------------------------------------| :-------------------------------|
| [react-bootstrap](https://react-bootstrap.github.io/components/)| BootstrapのReact用コンポーネント |
| [今更ながらのNext.js + TypeScript + Firebaseで認証機能を実装する](https://zenn.dev/k_logic24/articles/react-auth-with-firebase)| 今更ながらのNext.js + TypeScript + Firebaseで認証機能を実装する |
## 🎫 Licence
[MIT](https://github.com/isystk/nextjs-typescript-firebase/blob/master/LICENSE)
## 👀 Author
[isystk](https://github.com/isystk)