Descarga nextjs pwa firebase boilerplate - Código fuente nextjs pwa firebase boilerplate

nextjs pwa firebase boilerplate

Código Fuente de IA

1.0.0

Descargar

Icono de la aplicación

Next.js Firebase PWA

Next.js sin servidor PWA con firebase y reacts ganchos

nextjs-pwa-firebase-boilerplate demostración en el teléfono

Nota 1: Esta calderera se está convirtiendo a TypeScript. Para JavaScript puro, ver Branch old-javascript

Nota 2: Este es mi V4 Boilerplate para las aplicaciones web React. Consulte también My GraphQL + Postgres SQL Boilerplate, Redux + REST + Postgres SQL Boilerplate y Redux + REST + MongoDB Boilerplate. Para una página de destino Simple Next.JS, consulte la página de tierra-generación nextjs.

Apoyar este proyecto

¿Usted o su empresa consideraron útil nextjs-pwa-firebase-boilerplate ? Considere dar una pequeña donación, me ayuda a pasar más tiempo en proyectos de código abierto:

¿Por qué es esto increíble?

Esta es una gran plantilla para un proyecto en el que desee reaccionar (con ganchos) (con generación estática de sitios (SSG) o representación del lado del servidor (SSR) , alimentada por Next.js) como frontend y Firebase como backend. Lightning Rápido, todo JavaScript.

Excelente punto de partida para un PWA (aplicación web progresiva), que puede agregar a su pantalla de inicio y usar como una aplicación de pantalla completa.
Características de PWA como manifest.json y Soporte fuera de línea ( next-offline ).
Se puede implementar como funciones sin servidor en Vercel/ZEIT ahora.
Utiliza la nueva base de datos Firebase Firestore, pero fácil de reemplazar/eliminar la base de datos.
Iniciar sesión/registrar con la autenticación de Firebase.
Puede usar SSG getStaticProps o SSR getServerSideProps .
Reaccionar ganchos y contexto para la gestión estatal y la lógica de negocios.
Modelo de base de datos de forma libre. No hay API GraphQL o REST, simplemente agregue ganchos React y modifique getStaticProps / getServerSideProps al cambiar / agregar tablas de base de datos.
Fácil de diseñar el tema visual con CSS (por ejemplo, usando el generador de perfil de diseño).
Soporte de SEO con sitemap.xml y robots.txt .
Google Analytics y google-site-verification Support (ver config/config.ts ).
Configuración flexible con el archivo config/config.ts y .env.local .
Código de pelusa y formato con StandardJS (corrección yarn lint / yarn fix ).
Pruebas unitarias con jazmín ( yarn unit , aún no incluida).
Gran velocidad de página, ver puntaje del faro:

Puntaje de faro

Manifestación

Vea NextJS-PWA-FireBase-Boilerplate que se ejecuta en Vercel.

nextjs-pwa-firebase-boilerplate demostración en el teléfono

Cómo usar

Clon este repositorio:

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

Eliminar la carpeta .git ya que desea crear un nuevo repositorio

 rm -rf .git

Instalar dependencias:

 yarn  # or npm install

En este punto, debe configurar Firebase Firestore, ver a continuación.

Cuando se configura Firebase, inicie la aplicación web por:

 yarn dev

En producción:

 yarn build
yarn start

Si navega a http://localhost:3004/ verá una página web con una lista de artículos (o una lista vacía si no ha agregado uno).

Modificación de la aplicación a sus necesidades

Cambiar el nombre y la descripción de la aplicación

Busque/reemplace name "Next.js Firebase PWA", "Nextjs-pwa-FireBase-Boilerplate" y description "Next.js Servidor sin servidor con Firebase y React Hooks" a otra cosa.
Cambie la version en package.json a 0.1.0 o similar.
Cambie la license en package.json a cualquiera que se adapte a su proyecto.

Renombrar "artículo" a otra cosa

El artículo principal de la base de datos se llama Article , pero probablemente desee algo más en su aplicación.

Cambiar el nombre de los archivos:

 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

Luego, busque/reemplace dentro de los archivos para diferentes carcasas: article , Article , ARTICLE .

Cambiar el número de puerto

Busque/reemplace por 3004 a otra cosa.

Configurar la base de datos de Firebase (Firestore)

Configure la base de datos (si no necesita una base de datos, consulte "Cómo eliminar/reemplazar Firebase como base de datos" a continuación):

Vaya a https://console.firebase.google.com/ y cree un nuevo proyecto, una nueva aplicación web y una nueva base de datos Cloud Firestore.
Copie el firebaseConfig (desde cuando se configure la aplicación web Firebase) a lib/data/firebase.ts
Edite el archivo .env.local , configurando el valor NEXT_PUBLIC_FIREBASE_API_KEY .

Cómo eliminar la dependencia de la base de fuego

Ejecutar yarn remove firebase
Eliminar lib/data/firebase.ts y modificar hooks/useArticles.tsx .

Reemplace Firebase con Postgres SQL

Use un proveedor de alojamiento de Postgres (por ejemplo, https://www.elephantsql.com/)
Use createSqlRestRoutesServerless en sql-wizard para configurar sus propias rutas API.

Reemplace Firebase con Supabase (Postgres SQL, actualizaciones en tiempo real)

Retire la base de fuego: yarn remove firebase
Agregar Supabase: yarn add @supabase/supabase-js
Agregar NEXT_PUBLIC_SUPABASE_API_KEY a .env.local
Cree un 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)