nextjs pwa firebase boilerplate

다음 .js Firebase PWA

다음 .JS 서버리스 PWA는 Firebase 및 React Hooks가 있습니다

참고 1 :이 보일러 플레이트는 TypeScript로 변환됩니다. 순수한 JavaScript는 Branch old-javascript 참조하십시오

참고 2 : 이것은 React 웹 앱을위한 V4 보일러 플레이트입니다. 내 GraphQL + Postgres SQL Boilerplate, Redux + REST + Postgres SQL BoilerPlate 및 Redux + REST + MongoDB BoilerPlate도 참조하십시오. 간단한 Next.js 방문 페이지는 NextJS-Generic-Landing-Page를 참조하십시오.

이 프로젝트를 지원하십시오

귀하 또는 귀하의 회사는 nextjs-pwa-firebase-boilerplate 유용하다고 생각 했습니까? 소규모 기부를 고려하십시오. 오픈 소스 프로젝트에 더 많은 시간을 보내는 데 도움이됩니다.

이것이 왜 굉장한가요?

이것은 반응 (후크 포함) ( 정적 사이트 생성 (SSG) 또는 SSR (Server-Side Rendering) ( Next.js)에 의해 전원이 공급 및 백엔드로 Firebase를 원하는 모든 프로젝트에 대한 훌륭한 템플릿입니다. 번개 빠른, 모든 JavaScript.

• 홈 화면에 추가하여 전체 화면 앱으로 사용할 수있는 PWA (Progressive Web App)의 훌륭한 출발점.
• manifest.json 및 오프라인 지원 ( next-offline )과 같은 PWA 기능.
• Vercel/Zeit에서 서버리스 함수로 배포 할 수 있습니다.
• 새로운 FireBase Firestore 데이터베이스를 사용하지만 데이터베이스를 쉽게 교체/제거 할 수 있습니다.
• Firebase 인증으로 로그인/가입.
• SSG getStaticProps 또는 SSR getServerSideProps 사용할 수 있습니다.
• 국가 관리 및 비즈니스 논리에 대한 후크 및 컨텍스트에 반응합니다.
• 자유형 데이터베이스 모델. GraphQL 또는 REST API가 없으면 반응 후크를 추가하고 데이터베이스 테이블을 변경 / 추가 할 때 getStaticProps / getServerSideProps 수정하십시오.
• CSS를 사용하여 시각적 테마를 쉽게 스타일링 할 수 있습니다 (예 : 설계 프로파일 생성기 사용).
• SEO 지원 sitemap.xml 및 robots.txt .
• Google 웹 로그 분석 및 google-site-verification 지원 ( config/config.ts 참조).
• config/config.ts 및 .env.local 파일을 사용한 Flexible Configuration.
• 표준 JS를 사용한 코드 라인 및 서식 ( yarn lint / yarn fix ).
• 재스민으로 단위 테스트 ( yarn unit , 아직 포함되지 않음).
• 좋은 페이지 속도, 등대 점수 참조 :

데모

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"의 이름을 검색/교체하고 "Firebase 및 React Hooks가있는 Next.js Serverless PWA"를 다른 것으로 description .
• package.json 의 version 0.1.0 이상으로 변경하십시오.
• package.json 의 license 프로젝트에 적합한 것으로 변경하십시오.

“기사”를 다른 것으로 바꾸는 것

기본 데이터베이스 항목은 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를 데이터베이스로 제거/교체하는 방법”을 참조하십시오) :

1. https://console.firebase.google.com/으로 이동하여 새로운 프로젝트, 새로운 웹 앱 및 새로운 Cloud Firestore 데이터베이스를 만듭니다.
2. firebaseConfig (FireBase 웹 앱을 설정할 때)를 lib/data/firebase.ts 로 복사하십시오.
3. .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/)를 사용하십시오.
• sql-wizard 에서 createSqlRestRoutesServerless 사용하여 자신의 API 경로를 설정하십시오.

FireBase를 Supabase (Postgres SQL, 실시간 업데이트)로 교체하십시오.

• Firebase 제거 : yarn remove firebase
• Supabase 추가 : yarn add @supabase/supabase-js
• NEXT_PUBLIC_SUPABASE_API_KEY .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)

• lib/data/firebase 참조하는 JS 파일을 업데이트하십시오

시각적 테마 변경 (CSS)

1. pages/_app.tsx 에 CSS 파일이 포함되었습니다
2. public/app.css 에서 CSS를 변경하십시오
3. PageHead.tsx 에서 글꼴을 변경합니다
4. public/manifest.json 의 색상 변경

Firebase 인증으로 로그인/가입

https://console.firebase.google.com/project/yourapp/authentication/providers에서 이메일/비밀번호 인증을 활성화해야합니다

Vercel에 배포

참고 : 배포 버튼을 사용하여 프로젝트를 설정하면이 저장소 대신 자신의 리포지토리를 복제해야합니다.

이 템플릿을 사용하여 Vercel을 사용하여 자체 프로젝트를 설정하고 배포하십시오. 당신이 필요한 것은 Firebase Public API 키 만 있으면됩니다.