nextjs pwa firebase boilerplate Скачать - nextjs pwa firebase boilerplate Скачать исходный код

nextjs pwa firebase boilerplate

AI Исходный код

1.0.0

Скачать

Значок приложения

Next.js Firebase Pwa

Next.js без сервера PWA с огненной базой и крючками React

NextJs-PWA-FireBase-BoilerPlate Демо на телефон

ПРИМЕЧАНИЕ 1: Этот шаблон конвертируется в TypeScript. Для Pure JavaScript см. Franch old-javascript

ПРИМЕЧАНИЕ 2: Это мой патлер V4 для веб -приложений React. См. Также My GraphQL + Postgres SQL Boilerplate, Redux + REST + Postgres SQL Boilerplate и Redux + REST + MongoDB Boilerplate. Для простой целевой страницы следующей.

Поддержите этот проект

Вы или ваша компания обнаружили полезным nextjs-pwa-firebase-boilerplate ? Пожалуйста, подумайте о том, чтобы дать небольшое пожертвование, это помогает мне тратить больше времени на проекты с открытым исходным кодом:

Почему это круто?

Это отличный шаблон для любого проекта, в котором вы хотите реагировать (с крючками) (со статическим генерацией сайта (SSG) или рендеринг на стороне сервера (SSR) , питаемой на следующем.js) в качестве фронта и Firebase в качестве бэкэнд. Молния быстро, все JavaScript.

Отличная отправная точка для PWA (прогрессивное веб-приложение), которое вы можете добавить на свой домашний экран и использовать в качестве полноэкранного приложения.
Особенности PWA, такие как manifest.json и Offline Support ( next-offline ).
Можно развернуть в качестве функций без серверов на Vercel/Zeit сейчас.
Использует новую базу данных Firebase Firestore, но легко заменить/удалить базу данных.
Войдите в систему/регистрацию с аутентификацией Firebase.
Может использовать SSG getStaticProps или SSR getServerSideProps .
React Hooks и контекст для управления государством и бизнес -логики.
Модель базы данных бесплатной формы. Нет API GraphQL или REST, просто добавьте крючки React и измените getStaticProps / getServerSideProps при изменении / добавлении таблиц базы данных.
Легко вставать на визуальную тему с помощью CSS (например, с помощью генератора профиля дизайна).
Поддержка SEO с sitemap.xml и robots.txt .
Google Analytics и поддержка google-site-verification (см. config/config.ts ).
Гибкая конфигурация с config/config.ts и .env.local file.
Кодовое склад и форматирование со стандартными JS ( yarn lint / yarn fix ).
Единое тестирование с жасмином ( yarn unit , еще не включен).
Отличная скорость страницы, см. Оценка маяка:

Оценка маяка

Демо

Смотрите NextJS-PWA-FireBase-BoilerPlate, работающий на Vercel здесь.

NextJs-PWA-FireBase-BoilerPlate Демо на телефон

Как использовать

Клонировать это хранилище:

 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 без сервера 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 в качестве базы данных» ниже):

Зайдите на https://console.firebase.google.com/ и создайте новый проект, новое веб -приложение и новую базу данных Cloud Firestore.
Скопируйте firebaseConfig (от настройки веб -приложения Firebase) до lib/data/firebase.ts
Отредактируйте файл .env.local , установив значение NEXT_PUBLIC_FIREBASE_API_KEY .

Как удалить зависимость от пожарной базы

yarn remove firebase
Удалить lib/data/firebase.ts и изменить hooks/useArticles.tsx .

Заменить Firebase на Postgres SQL

Используйте поставщика хостинга Postgres (например, https://www.elephantsql.com/)
Используйте createSqlRestRoutesServerless в sql-wizard чтобы настроить свои собственные маршруты API.

Замените Firebase Supabase (Postgres SQL, обновления в реальном времени)

Снимите Firebase: yarn remove firebase
Добавить Supabase: yarn add @supabase/supabase-js
Добавить NEXT_PUBLIC_SUPABASE_API_KEY to .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)