nextjs pwa firebase boilerplate

next.js firebase pwa

next.js serverless pwa พร้อม firebase และ react hooks

หมายเหตุ 1: แผ่นหม้อต้มนี้กำลังถูกแปลงเป็น typeScript สำหรับจาวาสคริปต์บริสุทธิ์ให้ดูสาขา old-javascript

หมายเหตุ 2: นี่คือ V4 Boilerplate ของฉันสำหรับ React Web Apps ดูเพิ่มเติมที่ GraphQl + Postgres SQL Boilerplate, Redux + REST + Postgres SQL Boilerplate และ Redux + REST + MongoDB Boilerplate สำหรับหน้า Landing Page Next.js ให้ดูที่ NextJS-Generic-Landing-Page

สนับสนุนโครงการนี้

คุณหรือ บริษัท ของคุณพบว่า nextjs-pwa-firebase-boilerplate มีประโยชน์หรือไม่? โปรดพิจารณาบริจาคเล็กน้อยช่วยให้ฉันใช้เวลามากขึ้นในโครงการโอเพนซอร์ซ:

ทำไมถึงน่ากลัว?

นี่เป็นเทมเพลตที่ยอดเยี่ยมสำหรับโครงการใด ๆ ที่คุณต้องการ ตอบสนอง (พร้อมตะขอ) (พร้อม การสร้างไซต์แบบคงที่ (SSG) หรือ การเรนเดอร์ฝั่งเซิร์ฟเวอร์ (SSR) ขับเคลื่อนโดย Next.js) เป็นส่วนหน้าและ Firebase เป็นแบ็กเอนด์ Lightning Fast JavaScript ทั้งหมด

• จุดเริ่มต้นที่ดีสำหรับ PWA (แอปพลิเคชันเว็บแบบก้าวหน้า) ซึ่งคุณสามารถเพิ่มลงในหน้าจอหลักของคุณและใช้เป็นแอพเต็มหน้าจอ
• คุณสมบัติ PWA เช่น manifest.json และการสนับสนุนออฟไลน์ ( next-offline )
• สามารถปรับใช้เป็นฟังก์ชั่นที่ไม่มีเซิร์ฟเวอร์บน Vercel/Zeit ได้ในขณะนี้
• ใช้ฐานข้อมูล FireBase Firestore ใหม่ แต่ง่ายต่อการแทนที่/ลบฐานข้อมูล
• เข้าสู่ระบบ/ลงชื่อเข้าใช้ด้วยการรับรองความถูกต้องของ Firebase
• สามารถใช้ SSG getStaticProps หรือ SSR getServerSideProps
• ตอบสนองตะขอและบริบทสำหรับการจัดการของรัฐและตรรกะทางธุรกิจ
• รูปแบบฐานข้อมูลแบบฟรีฟอร์ม ไม่มี graphQl หรือ REST API เพียงเพิ่ม hooks React และแก้ไข getStaticProps / getServerSideProps เมื่อเปลี่ยน / เพิ่มตารางฐานข้อมูล
• ง่ายต่อการจัดสไตล์ชุดรูปแบบภาพโดยใช้ CSS (เช่นการใช้ตัวสร้างโปรไฟล์การออกแบบ)
• การสนับสนุน SEO ด้วย sitemap.xml และ robots.txt
• การสนับสนุน Google Analytics และ google-site-verification (ดู config/config.ts )
• การกำหนดค่าที่ยืดหยุ่นด้วยไฟล์ config/config.ts และ .env.local
• การเป็นผ้าลินินและการจัดรูปแบบด้วย StandardJS ( yarn lint / yarn fix )
• การทดสอบหน่วยกับจัสมิน ( yarn unit ยังไม่รวมอยู่)
• ความเร็วหน้ายอดเยี่ยมดูคะแนนประภาคาร:

การสาธิต

ดู NextJS-PWA-FIREBASE-BOILERPLATE ที่ทำงานบน Vercel ที่นี่

วิธีใช้

โคลนที่เก็บนี้:

 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 ให้เริ่มเว็บแอปโดย:

 yarn dev

ในการผลิต:

 yarn build
yarn start

หากคุณนำทางไปยัง http://localhost:3004/ คุณจะเห็นหน้าเว็บที่มีรายการบทความ (หรือรายการว่างถ้าคุณยังไม่ได้เพิ่ม)

ปรับเปลี่ยนแอพตามความต้องการของคุณ

เปลี่ยนชื่อแอพและคำอธิบาย

• ค้นหา/แทนที่สำหรับ name “ Next.js Firebase PWA”,“ NextJS-PWA-FIREBASE-BOILERPLATE” และ description “ NEXT.JS Serverless PWA พร้อม Firebase และ React Hooks”
• เปลี่ยน version ใน package.json เป็น 0.1.0 หรือคล้ายกัน
• เปลี่ยน license ใน package.json เป็นสิ่งที่เหมาะสมกับโครงการของคุณ

การเปลี่ยนชื่อ“ บทความ” เป็นอย่างอื่น

รายการฐานข้อมูลหลักเรียกว่า 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/ และสร้างโครงการใหม่แอพพลิเคชั่นเว็บใหม่และฐานข้อมูล Cloud Firestore ใหม่
2. คัดลอก firebaseConfig (จากเมื่อตั้งค่าแอป Firebase Web) ไปยัง lib/data/firebase.ts
3. แก้ไขไฟล์ .env.local ตั้งค่า NEXT_PUBLIC_FIREBASE_API_KEY

วิธีลบการพึ่งพาฐาน Firebase

• รัน yarn remove firebase
• ลบ lib/data/firebase.ts และแก้ไข hooks/useArticles.tsx

แทนที่ firebase ด้วย postgres sql

• ใช้ Postgres Hosting Provider (เช่น https://www.elephantsql.com/)
• ใช้ createSqlRestRoutesServerless ใน sql-wizard เพื่อตั้งค่าเส้นทาง API ของคุณเอง

แทนที่ firebase ด้วย supabase (Postgres SQL, การอัปเดตแบบเรียลไทม์)

• ลบ firebase: yarn remove firebase
• เพิ่ม supabase: yarn add @supabase/supabase-js
• เพิ่ม NEXT_PUBLIC_SUPABASE_API_KEY to .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)

• อัปเดตไฟล์ JS ที่อ้างอิง lib/data/firebase

เปลี่ยนธีมภาพ (CSS)

1. เปลี่ยนไฟล์ CSS รวมอยู่ใน pages/_app.tsx
2. เปลี่ยน CSS ใน public/app.css
3. เปลี่ยนแบบอักษรใน PageHead.tsx
4. เปลี่ยนสีใน public/manifest.json

เข้าสู่ระบบ/ลงชื่อเข้าใช้ด้วยการรับรองความถูกต้องของ Firebase

คุณต้องเปิดใช้งานการตรวจสอบอีเมล/รหัสผ่านใน https://console.firebase.google.com/project/yourapp/authentication/providers

การปรับใช้บน vercel

หมายเหตุ: หากคุณตั้งค่าโครงการของคุณโดยใช้ปุ่มปรับใช้คุณต้องโคลน repo ของคุณเองแทนที่เก็บนี้

การตั้งค่าและปรับใช้โครงการของคุณเองโดยใช้เทมเพลตนี้ด้วย Vercel สิ่งที่คุณต้องการคือคีย์ API สาธารณะ Firebase ของคุณ