nextjs pwa firebase boilerplate下載-NextJS nextjs pwa firebase boilerplate源代碼下載

nextjs pwa firebase boilerplate

Ai源碼

1.0.0

下載

應用圖標

Next.js Firebase PWA

next.js無服務器的PWA帶有firebase和React鉤子

nextjs-pwa-firebase-boilerplate在電話上演示

注意1：此樣板正在轉換為打字稿。有關純JavaScript，請參閱分支old-javascript

注2：這是我用於React Web應用程序的V4樣板。另請參見我的GraphQl + Postgres SQL樣板，Redux + REST + Postgres SQL樣板和Redux + REST + REST + MONGODB樣板。有關簡單的下一步。 JS著陸頁，請參見NextJs-Generic-generic-landing頁面。

支持這個項目

您或您的公司是否發現nextjs-pwa-firebase-boilerplate有用？請考慮提供少量捐款，它可以幫助我花更多的時間在開源項目上：

為什麼這很棒？

這是您想要反應（帶有掛鉤） （靜態站點生成（SSG）或服務器端渲染（SSR）（由Next.js供電）作為前端和Firebase作為後端的任何項目（帶有靜態站點（SSG）或服務器端渲染（SSR）（SSR））的絕佳模板。快速閃電，所有JavaScript。

PWA（Progressive Web應用程序）的絕佳起點，您可以將其添加到主屏幕上並用作全屏應用程序。
PWA功能諸如manifest.json和離線支持（ next-offline ）之類的功能。
現在可以在Vercel/Zeit上部署為無服務器功能。
使用新的Firebase Firestore數據庫，但易於替換/刪除數據庫。
使用Firebase身份驗證登錄/註冊。
可以使用SSG getStaticProps或SSR getServerSideProps 。
對國家管理和業務邏輯的鉤子和上下文。
自由形式的數據庫模型。沒有GraphQL或REST API，只需添加React Hooks並在更改 /添加數據庫表時修改getStaticProps / getServerSideProps 。
易於使用CSS（例如，使用設計配置文件生成器）樣式的視覺主題。
SEO支持sitemap.xml和robots.txt 。
Google Analytics（分析）和google-site-verification Support（請參閱config/config.ts ）。
帶有config/config.ts和.env.local文件的靈活配置。
用標準j（ yarn lint / yarn fix ）進行代碼覆蓋和格式化。
用茉莉（ yarn unit ，尚未包括）進行單位測試。
出色的頁面速度，請參閱燈塔得分：

燈塔得分

演示

請參閱Nextjs-pwa-firebase-boilerplate在此處的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/您將看到一個帶有文章列表的網頁（或者尚未添加的網頁）。

修改應用程序滿足您的需求

更改應用程序名稱和描述

搜索/替換name的“ next.js firebase pwa”，“ nextjs-pwa-firebase-boilerplate”和description “ Next.js無用PWA，帶有firebase and react鉤子”。
將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）

設置數據庫（如果您不需要數據庫，請參見下面的“如何刪除/替換為數據庫”）：

請訪問https://console.firebase.google.com/，創建一個新項目，一個新的Web應用程序和一個新的Cloud Firestore數據庫。
將firebaseConfig （從設置Firebase Web應用程序）複製到lib/data/firebase.ts
編輯.env.local文件，設置NEXT_PUBLIC_FIREBASE_API_KEY值。

如何刪除燃料依賴性

運行yarn remove firebase
刪除lib/data/firebase.ts和修改hooks/useArticles.tsx 。

用Postgres SQL替換Firebase

使用Postgres託管提供商（例如https://www.elephantsql.com/）
在sql-wizard中使用createSqlRestRoutesServerless來設置自己的API路由。

用Supabase替換Firebase（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)