nextjs pwa firebase boilerplate

Next.js Firebase Pwa

NEXT.js PWA sans serveur avec Firebase et React Hooks

Remarque 1: Cette passe-partout est convertie en TypeScript. Pour pur javascript, voir Branch old-javascript

Remarque 2: Ceci est mon chaudron V4 pour les applications Web React. Voir aussi mon GraphQL + Postgres SQL Playplate, Redux + REST + Postgres SQL Playplate et Redux + REST + MongoDB Boilerplate. Pour une page de destination simple Next.js, voir NextJS-Generic-Wermeging-Page.

Soutenir ce projet

Vous ou votre entreprise avez-vous trouvé nextjs-pwa-firebase-boilerplate UTILISÉ? Veuillez envisager de faire un petit don, cela m'aide à passer plus de temps sur des projets open source:

Pourquoi est-ce génial?

Ceci est un excellent modèle pour un projet où vous voulez réagir (avec des crochets) (avec la génération de sites statiques (SSG) ou le rendu côté serveur (SSR) , alimenté par Next.js) en tant que frontend et Firebase comme backend. Lightning Fast, tout javascript.

• Grand point de départ pour un PWA (application Web progressive), que vous pouvez ajouter à votre écran d'accueil et utiliser comme application complète.
• Fonctionnalités PWA telles que manifest.json et le support hors ligne ( next-offline ).
• Peut être déployé sous forme de fonctions sans serveur sur Vercel / Zeit maintenant.
• Utilise la nouvelle base de données Firebase Firestore, mais facile à remplacer / supprimer la base de données.
• Connexion / inscription avec l'authentification Firebase.
• Peut utiliser SSG getStaticProps ou SSR getServerSideProps .
• REACT HOCKS ET CONTEXTE pour la gestion de l'État et la logique commerciale.
• Modèle de base de données de forme libre. Aucune API GraphQL ou REST, ajoutez simplement React Hooks et modifiez getStaticProps / getServerSideProps lors de la modification / ajout de tables de base de données.
• Facile à styliser le thème visuel à l'aide de CSS (par exemple en utilisant le générateur de profil de conception).
• Prise en charge du référencement avec sitemap.xml et robots.txt .
• Google Analytics et google-site-verification Prisence (voir config/config.ts ).
• Configuration flexible avec config/config.ts et .env.local Fichier.
• CODE liant et formatage avec StandardJS ( yarn lint / yarn fix ).
• Tests unitaires avec jasmin ( yarn unit , pas encore incluse).
• Grande vitesse de page, voir le score du phare:

Démo

Voir NEXTJS-PWA-FIREBASE-BOILERPALLAGE fonctionnant sur Vercel ici.

Comment utiliser

Cloner ce référentiel:

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

Supprimer le dossier .git car vous souhaitez créer un nouveau référentiel

 rm -rf .git

Installez les dépendances:

 yarn  # or npm install

À ce stade, vous devez configurer Firebase Firestore, voir ci-dessous.

Lorsque Firebase est configuré, démarrez l'application Web par:

 yarn dev

En production:

 yarn build
yarn start

Si vous naviguez vers http://localhost:3004/ Vous verrez une page Web avec une liste d'articles (ou une liste vide si vous n'en avez pas ajouté).

Modifier l'application à vos besoins

Modifier le nom et la description de l'application

• Recherchez / remplacez le name «Next.js Firebase PWA», «NextJS-PWA-FIREBASE-BOILERPLAT» et description «Next.js PWA sans serveur avec Firebase et React Hooks» à autre chose.
• Modifiez la version dans package.json en 0.1.0 ou similaire.
• Modifiez la license dans package.json en tout ce qui convient à votre projet.

Renommer «l'article» à autre chose

L'élément de base de données principale s'appelle Article , mais vous voulez probablement autre chose dans votre application.

Renommez les fichiers:

 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

Ensuite, recherchez / remplacez dans les fichiers pour différents boîtiers: article , Article , ARTICLE .

Modifier le numéro de port

Recherchez / remplacez 3004 à autre chose.

Configurer la base de données Firebase (Firestore)

Configurez la base de données (si vous n'avez pas besoin d'une base de données, voir «Comment supprimer / remplacer la base de feu comme base de données» ci-dessous):

1. Allez sur https://console.firebase.google.com/ et créez un nouveau projet, une nouvelle application Web et une nouvelle base de données Cloud Firestore.
2. Copiez le firebaseConfig (depuis la configuration de l'application Web Firebase) sur lib/data/firebase.ts
3. Modifiez le fichier .env.local en définissant la valeur NEXT_PUBLIC_FIREBASE_API_KEY .

Comment supprimer la dépendance à la base de feu

• Exécuter yarn remove firebase
• Supprimer lib/data/firebase.ts et modifier hooks/useArticles.tsx .

Remplacer Firebase par Postgres SQL

• Utilisez un fournisseur d'hébergement Postgres (par exemple https://www.ephantsql.com/)
• Utilisez createSqlRestRoutesServerless dans sql-wizard pour configurer vos propres itinéraires API.

Remplacez Firebase par Supabase (Postgres SQL, mises à jour en temps réel)

• Retirer la base de feu: yarn remove firebase
• Ajouter Supabase: yarn add @supabase/supabase-js
• Ajouter NEXT_PUBLIC_SUPABASE_API_KEY à .env.local
• Créez une 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)

• Mettez à jour les fichiers JS qui font référence lib/data/firebase

Changer le thème visuel (CSS)

1. Modifier les fichiers CSS inclus en pages/_app.tsx
2. Modifier CSS dans public/app.css
3. Modifier les polices dans PageHead.tsx
4. Changer les couleurs dans public/manifest.json

Connexion / inscription avec l'authentification Firebase

Vous devez activer l'authentification par e-mail / mot de passe dans https://console.firebase.google.com/project/yourapp/authentication/providers

Déploiement sur Vercel

Remarque: Si vous configurez votre projet à l'aide du bouton Déployer, vous devez cloner votre propre référentiel au lieu de ce référentiel.

Configurez et déployez votre propre projet en utilisant ce modèle avec Vercel. Tout ce dont vous aurez besoin, c'est de votre clé API publique Firebase.