nextjs pwa firebase boilerplate Download - nextjs pwa firebase boilerplate Code Download

nextjs pwa firebase boilerplate

Código-Fonte de IA

1.0.0

Baixar

Ícone do aplicativo

Next.js Firebase PWA

Next.JS PWA sem servidor com ganchos de Firebase e React

NextJs-Pwa-FireBase-Boilerplate Demo no telefone

Nota 1: Este caldeira está sendo convertido em TypeScript. Para JavaScript puro, consulte o ramo old-javascript

Nota 2: Este é o meu caldeira V4 para aplicativos da Web React. Consulte também o meu grafQL + PostGres SQL Boilerplate, Redux + REST + PostGres SQL Boilerplate e Redux + REST + MongoDODB Boilerplate. Para uma página de destino simples do Next.js, consulte a página de pouso genérico NextJS.

Apoie este projeto

Você ou sua empresa encontraram nextjs-pwa-firebase-boilerplate Por favor, considere fazer uma pequena doação, isso me ajuda a gastar mais tempo em projetos de código aberto:

Por que isso é incrível?

Este é um ótimo modelo para um projeto em que você deseja reagir (com ganchos) (com geração estática de geração de sites (SSG) ou renderização do lado do servidor (SSR) , alimentado pelo Next.js) como front-end e FireBase como back-end. Lightning Fast, todo JavaScript.

Ótimo ponto de partida para um PWA (Progressive Web App), que você pode adicionar à tela inicial e usar como um aplicativo em tela cheia.
Recursos da PWA como manifest.json e suporte offline ( next-offline ).
Pode ser implantado como funções sem servidor no Vercel/Zeit agora.
Usa o novo banco de dados Firebase Firestore, mas é fácil de substituir/remover o banco de dados.
Login/inscrição com autenticação do Firebase.
Pode usar o SSG getStaticProps ou o SSR getServerSideProps .
React Hooks e Context para gerenciamento de estado e lógica de negócios.
Modelo de banco de dados de forma livre. Sem grafql ou API REST, basta adicionar ganchos do React e modificar getStaticProps / getServerSideProps ao alterar / adicionar tabelas de banco de dados.
Fácil de estilizar o tema visual usando CSS (por exemplo, usando gerador de perfil de design).
Suporte de SEO com sitemap.xml e robots.txt .
Google Analytics e Suporte google-site-verification (consulte config/config.ts ).
Configuração flexível com o arquivo config/config.ts e .env.local .
LINHO E FORMATIVA DE CÓDIGO COM STANDARDJS ( yarn lint / yarn fix ).
Teste de unidade com jasmim ( yarn unit , ainda não incluída).
Ótima velocidade da página, veja a pontuação do Lighthouse:

Pontuação do farol

Demonstração

Consulte NextJS-PWA-FIRBASE-BOILERPLATEN ON ON ON VERCEL AQUI.

NextJs-Pwa-FireBase-Boilerplate Demo no telefone

Como usar

Clone este repositório:

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

Remova a pasta .git , pois deseja criar um novo repositório

 rm -rf .git

Instale dependências:

 yarn  # or npm install

Neste ponto, você precisa configurar o Firebase Firestore, veja abaixo.

Quando o Firebase estiver configurado, inicie o aplicativo da web por:

 yarn dev

Na produção:

 yarn build
yarn start

Se você navegar para http://localhost:3004/ você verá uma página da web com uma lista de artigos (ou uma lista vazia se você não adicionou uma).

Modificando o aplicativo para suas necessidades

Alterar o nome do aplicativo e a descrição

Pesquise/substitua o name "Next.js Firebase PWA", "NextJs-Pwa-FireBase-Boilerplate" e description "Next.js sem servidor PWA com ganchos de Firebase e React" para outra coisa.
Altere a version no package.json para 0.1.0 ou similar.
Altere a license no package.json para qualquer ser adequado ao seu projeto.

Renomear "artigo" para outra coisa

O item principal do banco de dados é chamado de Article , mas você provavelmente deseja outra coisa no seu aplicativo.

Renomeie os arquivos:

 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

Em seguida, pesquise/substitua dentro dos arquivos por diferentes invólucros: article , Article , ARTICLE .

Alterar o número da porta

Pesquise/substitua 3004 por outra coisa.

Configurar o Firebase Database (Firestore)

Configure o banco de dados (se você não precisar de um banco de dados, consulte “Como remover/substituir o Firebase como banco de dados” abaixo):

Vá para https://console.firebase.google.com/ e crie um novo projeto, um novo aplicativo da web e um novo banco de dados em nuvem Firestore.
Copie o firebaseConfig (de ao configurar o aplicativo da Web Firebase) para lib/data/firebase.ts
Edite o arquivo .env.local , configurando o NEXT_PUBLIC_FIREBASE_API_KEY valor do valor.

Como remover a dependência da base de fogo

Executar yarn remove firebase
Exclua lib/data/firebase.ts e modifique hooks/useArticles.tsx .

Substitua o Firebase pelo Postgres SQL

Use um provedor de hospedagem do Postgres (por exemplo, https://www.elephantsql.com/)
Uso createSqlRestRoutesServerless no sql-wizard para configurar suas próprias rotas de API.

Substitua o Firebase por supabase (pós -gres sql, atualizações em tempo real)

Remova o Firebase: yarn remove firebase
Adicionar supabase: yarn add @supabase/supabase-js
Adicionar NEXT_PUBLIC_SUPABASE_API_KEY para .env.local
Crie um 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)