nextjs pwa firebase boilerplate

next.js firebase pwa

next.js FirebaseとReactフックを備えたServerLess PWA

注1：このボイラープレートはTypeScriptに変換されています。純粋なJavaScriptについては、Branch old-javascriptを参照してください

注2：これは、React Webアプリ用の私のV4ボイラープレートです。私のGraphQL + Postgres SQLボイラープレート、Redux + REST + POSTGRES SQL BOILERPLATEおよびREDUX + REST + MONGODBボイラープレートも参照してください。 Simple next.jsランディングページについては、nextjs-generic-landing-pageを参照してください。

このプロジェクトをサポートします

あなたまたはあなたの会社はnextjs-pwa-firebase-boilerplateが便利だと思いましたか？少量の寄付をすることを検討してください、それは私がオープンソースプロジェクトにより多くの時間を費やすのに役立ちます：

なぜこれが素晴らしいのですか？

これは、フロントエンドおよびファイアベースとしてバックエンドとしてファイアベースとして搭載されている（フックを使用して）反応するプロジェクト（フックを使用） （ staticサイト生成（SSG）またはサーバー側のレンダリング（SSR）を使用）に最適なテンプレートです。高速、すべてのJavaScript。

• PWA（Progressive Webアプリ）の優れた出発点。ホーム画面に追加してフルスクリーンアプリとして使用できます。
• manifest.jsonやオフラインサポートなどのPWA機能（ next-offline ）。
• 今すぐVercel/ZEITでサーバーレス機能として展開できます。
• 新しいFirebase Firestoreデータベースを使用しますが、データベースを簡単に交換/削除できます。
• FireBase認証を使用したログイン/サインアップ。
• SSG getStaticPropsまたはSSR getServerSidePropsを使用できます。
• 国家管理とビジネスロジックのためのフックとコンテキストを反応させます。
• 自由形式のデータベースモデル。 GraphQLまたはREST APIはありません。データベーステーブルを変更 /追加するときに、Reactフックを追加してgetStaticProps / getServerSidePropsを変更します。
• CSSを使用して視覚的なテーマを簡単にスタイリングできます（たとえば、デザインプロファイルジェネレーターを使用）。
• sitemap.xmlおよびrobots.txtを使用したSEOサポート。
• Google Analyticsとgoogle-site-verification Support（ config/config.ts参照）。
• config/config.tsおよび.env.localファイルを使用した柔軟な構成。
• StandardJS（ yarn lint / yarn fix ）を使用したコードの糸くずとフォーマット。
• ジャスミンを使用したユニットテスト（ yarn unit 、まだ含まれていない）。
• 素晴らしいページの速度、灯台のスコアを参照してください：

デモ

vercelで実行されているnextjs-pwa-firebase-boilerplateはこちらをご覧ください。

使い方

このリポジトリをクローンします：

 git clone https://github.com/tomsoderlund/nextjs-pwa-firebase-boilerplate.git [MY_APP]
cd [MY_APP]

新しいリポジトリを作成するため、 .gitフォルダーを削除します

 rm -rf .git

依存関係をインストールします：

 yarn  # or npm install

この時点で、Firebase Firestoreをセットアップする必要があります。以下を参照してください。

FireBaseがセットアップされたら、次のWebアプリを開始します。

 yarn dev

生産中：

 yarn build
yarn start

http://localhost:3004/にナビゲートすると、記事のリスト（または追加していない場合は空のリスト）があるWebページが表示されます。

アプリをニーズに合わせて変更します

アプリ名と説明を変更します

• nameの「next.js firebase pwa」、「nextjs-pwa-firebase-boilerplate」、 description 「next.js js serverless pwa with firebase and react fook」を他の何かに検索/交換してください。
• package.jsonのversionを0.1.0以降に変更します。
• package.jsonのlicenseをプロジェクトに合ったものに変更します。

「記事」を他の何かに改名します

メインデータベースアイテムはArticleと呼ばれますが、おそらくアプリに何か他のものが必要です。

ファイルの名前を変更します。

 git mv hooks/useArticles.tsx hooks/use{NewName}s.tsx

mkdir -p components/{newName}s
git mv components/articles/CreateArticleForm.tsx components/{newName}s/Create{NewName}Form.tsx
git mv components/articles/ArticleDetails.tsx components/{newName}s/{NewName}Details.tsx
git mv components/articles/ArticleList.tsx components/{newName}s/{NewName}List.tsx
git mv components/articles/ArticleListItem.tsx components/{newName}s/{NewName}ListItem.tsx
rm -r components/articles

mkdir pages/{newName}s
git mv "pages/articles/[slug].tsx" "pages/{newName}s/[slug].tsx"
rm -r pages/articles

次に、別のケーシングのファイル内で検索/交換します： article 、 Article 、 ARTICLE 。

ポート番号を変更します

他の何かに3004を検索/交換してください。

Firebaseデータベース（Firestore）のセットアップ

データベースを設定します（データベースが必要ない場合は、以下の「データベースとしてFirebaseを削除/交換する方法」を参照してください）：

1. https://console.firebase.google.com/にアクセスし、新しいプロジェクト、新しいWebアプリ、および新しいクラウドファイヤーストアデータベースを作成します。
2. firebaseConfig （Firebase Webアプリのセットアップ時から）をlib/data/firebase.tsにコピーします
3. .env.localファイルを編集し、 NEXT_PUBLIC_FIREBASE_API_KEY値を設定します。

ファイアベースの依存関係を削除する方法

• yarn remove firebase
• lib/data/firebase.tsを削除して、 hooks/useArticles.tsxを変更します。

FirebaseをPostgres SQLに置き換えます

• Postgresホスティングプロバイダーを使用します（例：https://www.elephantsql.com/）
• sql-wizardでcreateSqlRestRoutesServerlessを使用して、独自のAPIルートをセットアップします。

FirebaseをSupabase（Postgres SQL、リアルタイムの更新）に置き換える

• ファイアーベースを取り外します： yarn remove firebase
• Supabaseの追加： yarn add @supabase/supabase-js
• NEXT_PUBLIC_SUPABASE_API_KEYを.env.localに追加します
• lib/data/supabase.tsを作成：

 import { createClient } from '@supabase/supabase-js'
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_API_KEY
export const supabase = createClient(supabaseUrl, supabaseKey)

• lib/data/firebase参照するJSファイルを更新します

視覚テーマ（CSS）を変更する

1. 変更にはpages/_app.tsxにCSSファイルが含まれていました
2. public/app.cssでCSSを変更します
3. PageHead.tsxでフォントを変更します
4. public/manifest.jsonの色を変更します

FireBase認証を使用したログイン/サインアップ

https://console.firebase.google.com/project/yourapp/authentication/providersで電子メール/パスワード認証を有効にする必要があります

Vercelに展開します

注：展開ボタンを使用してプロジェクトをセットアップする場合は、このリポジトリの代わりに独自のレポをクリックする必要があります。

vercelを使用して、このテンプレートを使用して独自のプロジェクトをセットアップおよび展開します。必要なのは、FireBase Public APIキーだけです。