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)