nextjs pwa firebase boilerplate

next.js Firebase PWA

next.js serverless pwa مع Firebase و React Hooks

الملاحظة 1: يتم تحويل هذا الغلاية إلى TypeScript. للاطلاع على JavaScript ، انظر فرع old-javascript

ملاحظة 2: هذا هو V4 Boilerplate لتطبيقات Web React. انظر أيضًا GraphQl + Postgres SQL Boilerplate ، Redux + Rest + Postgres SQL Boilerplate و Redux + Rest + MongoDB Boilerplate. للاطلاع على صفحة مقصودة بسيطة. js ، انظر صفحة NextJS-Generic-Landing.

دعم هذا المشروع

هل وجدت أنت أو شركتك nextjs-pwa-firebase-boilerplate مفيدة؟ يرجى التفكير في تقديم تبرع صغير ، فهو يساعدني على قضاء المزيد من الوقت في مشاريع المصدر المفتوح:

لماذا هذا رائع؟

هذا قالب رائع لأي مشروع تريد React (مع السنانير) (مع توليد الموقع الثابت (SSG) أو عرض من جانب الخادم (SSR) ، مدعوم من Next.js) كواجهة أمامية و Firebase كخلفية. البرق بسرعة ، كل جافا سكريبت.

• نقطة انطلاق رائعة لـ PWA (تطبيق الويب التدريجي) ، والتي يمكنك إضافتها إلى شاشتك الرئيسية واستخدامها كتطبيق كامل الشاشة.
• ميزات PWA مثل manifest.json والدعم غير المتصلة بالإنترنت ( next-offline ).
• يمكن نشرها كوظائف بدون خادم على Vercel/Zeit الآن.
• يستخدم قاعدة بيانات Firebase Firestore الجديدة ، ولكن من السهل استبدال/إزالة قاعدة البيانات.
• تسجيل الدخول/الاشتراك مع مصادقة Firebase.
• يمكن استخدام ssg getStaticProps أو ssr getServerSideProps .
• رد فعل الخطافات والسياق لإدارة الدولة ومنطق الأعمال.
• نموذج قاعدة البيانات الحرة. لا يوجد GraphQL أو REST API ، ما عليك سوى إضافة خطافات React وتعديل getStaticProps / getServerSideProps عند تغيير / إضافة جداول قاعدة البيانات.
• من السهل تصميم السمة المرئية باستخدام CSS (على سبيل المثال باستخدام مولد ملف تعريف التصميم).
• SEO دعم مع sitemap.xml و robots.txt .
• Google Analytics و google-site-verification Support (انظر config/config.ts ).
• التكوين المرن مع config/config.ts و .env.local file.
• الرمز البطيء والتنسيق مع 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/ وإنشاء مشروع جديد ، وتطبيق ويب جديد ، وقاعدة بيانات سحابة جديدة.
2. انسخ firebaseConfig (من عند إعداد تطبيق الويب Firebase) إلى 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 (على سبيل المثال https://www.lephantsql.com/)
• استخدام createSqlRestRoutesServerless في sql-wizard لإعداد طرق API الخاصة بك.

استبدل Firebase بـ Supabase (Postgres SQL ، تحديثات في الوقت الفعلي)

• قم بإزالة قشرة fire: 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)

• قم بتحديث ملفات 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

ملاحظة: إذا قمت بإعداد مشروعك باستخدام زر النشر ، فأنت بحاجة إلى استنساخ الريبو الخاص بك بدلاً من هذا المستودع.

قم بإعداد ونشر مشروعك الخاص باستخدام هذا القالب مع Vercel. كل ما ستحتاجه هو مفتاح FireBase Public API.