nextjs pwa firebase boilerplate Download - nextjs pwa firebase boilerplate Sumber Code Unduh

nextjs pwa firebase boilerplate

Kode Sumber AI

1.0.0

Unduh

Ikon Aplikasi

Next.js firebase pwa

Next.js serverless pwa dengan firebase dan react hooks

Demo NextJs-PWA-Firebase-Boilerplate di telepon

CATATAN 1: Boilerplate ini sedang dikonversi ke TypeScript. Untuk JavaScript murni, lihat cabang old-javascript

Catatan 2: Ini adalah boilerplate V4 saya untuk aplikasi web React. Lihat juga GraphQL + Postgres SQL Boilerplate saya, Redux + REST + POSTGRES SQL Boilerplate dan Redux + REST + MONGODB Boilerplate. Untuk halaman pendaratan Next.js yang sederhana, lihat halaman Landing-Generic-Generic NextJs.

Dukung proyek ini

Apakah Anda atau perusahaan Anda menemukan nextjs-pwa-firebase-boilerplate bermanfaat? Harap pertimbangkan untuk memberikan donasi kecil, ini membantu saya menghabiskan lebih banyak waktu untuk proyek open-source:

Mengapa ini luar biasa?

Ini adalah template yang bagus untuk proyek apa pun di mana Anda ingin bereaksi (dengan kait) (dengan pembuatan situs statis (SSG) atau rendering sisi server (SSR) , ditenagai oleh Next.js) sebagai frontend dan firebase sebagai backend. Petir Cepat, semua JavaScript.

Titik awal yang bagus untuk PWA (aplikasi web progresif), yang dapat Anda tambahkan ke layar beranda dan gunakan sebagai aplikasi layar penuh.
Fitur PWA seperti manifest.json dan dukungan offline ( next-offline ).
Dapat digunakan sebagai fungsi tanpa server di Vercel/Zeit sekarang.
Menggunakan database Firebase Firestore baru, tetapi mudah untuk mengganti/menghapus database.
Masuk/Mendaftar dengan Otentikasi Firebase.
Dapat menggunakan SSG getStaticProps atau SSR getServerSideProps .
Bereaksi kait dan konteks untuk manajemen negara dan logika bisnis.
Model database bentuk bebas. Tidak ada GraphQL atau REST API, cukup tambahkan react hooks dan memodifikasi getStaticProps / getServerSideProps saat mengubah / menambahkan tabel basis data.
Mudah untuk menata tema visual menggunakan CSS (misalnya menggunakan generator profil desain).
Dukungan SEO dengan sitemap.xml dan robots.txt .
Dukungan Google Analytics dan google-site-verification (lihat config/config.ts ).
Konfigurasi fleksibel dengan file config/config.ts dan .env.local .
Kode linting dan pemformatan dengan StandardJS ( yarn lint / yarn fix ).
Pengujian unit dengan melati ( yarn unit , belum termasuk).
Kecepatan halaman yang bagus, lihat skor mercusuar:

Skor mercusuar

Demo

Lihat NextJS-PWA-Firebase-Boilerplate berjalan di Vercel di sini.

Demo NextJs-PWA-Firebase-Boilerplate di telepon

Cara menggunakan

Klon Repositori ini:

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

Hapus folder .git karena Anda ingin membuat repositori baru

 rm -rf .git

Instal dependensi:

 yarn  # or npm install

Pada titik ini, Anda perlu mengatur Firebase Firestore, lihat di bawah.

Saat Firebase diatur, mulailah aplikasi web dengan:

 yarn dev

Dalam produksi:

 yarn build
yarn start

Jika Anda menavigasi ke http://localhost:3004/ Anda akan melihat halaman web dengan daftar artikel (atau daftar kosong jika Anda belum menambahkannya).

Memodifikasi aplikasi sesuai kebutuhan Anda

Ubah Nama dan Deskripsi Aplikasi

Lakukan pencarian/ganti name "Next.js Firebase PWA", "NextJS-PWA-Firebase-Boilerplate" dan description "Next.js PWA tanpa server dengan Firebase dan React Hooks" ke sesuatu yang lain.
Ubah version dalam package.json ke 0.1.0 atau serupa.
Ubah license dalam package.json untuk apa pun yang sesuai dengan proyek Anda.

Mengganti nama "artikel" menjadi sesuatu yang lain

Item database utama disebut Article , tetapi Anda mungkin menginginkan sesuatu yang lain di aplikasi Anda.

Ubah nama file:

 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

Kemudian, lakukan pencarian/ganti di dalam file untuk casing yang berbeda: article , Article , ARTICLE .

Ubah Nomor Port

Lakukan pencarian/ganti untuk 3004 ke sesuatu yang lain.

Siapkan database Firebase (Firestore)

Atur database (jika Anda tidak memerlukan database, lihat “Cara Menghapus/Mengganti Firebase Sebagai Database” di bawah):

Kunjungi https://console.firebase.google.com/ dan buat proyek baru, aplikasi web baru, dan database Cloud Firestore baru.
Salin firebaseConfig (dari saat menyiapkan aplikasi Web Firebase) ke lib/data/firebase.ts
Edit file .env.local , mengatur nilai NEXT_PUBLIC_FIREBASE_API_KEY .

Cara menghapus ketergantungan firebase

Jalankan yarn remove firebase
Hapus lib/data/firebase.ts dan memodifikasi hooks/useArticles.tsx .

Ganti firebase dengan postgres sql

Gunakan Penyedia Hosting Postgres (misalnya https://www.elephantql.com/)
Gunakan createSqlRestRoutesServerless di sql-wizard untuk mengatur rute API Anda sendiri.

Ganti Firebase dengan Supabase (Postgres SQL, pembaruan waktu-nyata)

Lepaskan Firebase: yarn remove firebase
Tambahkan Supabase: yarn add @supabase/supabase-js
Tambahkan NEXT_PUBLIC_SUPABASE_API_KEY ke .env.local
Buat 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)