next blog firestore 다운로드 - next blog firestore 소스 코드 다운로드

next blog firestore

AI 소스 코드

1.0.0

다운로드

다음 블로그 Firestore

이 블로그는 SSR 및 Firebase Firestore API 용 Next.js를 사용하여 데이터를 저장 및 가져 오기 위해 사용합니다. React, Mobx State Tree 및 Styled 구성 요소로 구축 된 간단한 사용자 정의 컨텐츠 관리 시스템에서 콘텐츠를 작성하고 편집하십시오.

이 저장소를 복제하고 시작점으로 사용하여 자신만의 멋진 블로그를 만들 수 있습니다.

기술 스택 :

반응
다음 .js
Firebase Firestore & Auth
스타일의 구성 요소
Mobx-State-Tree
개미 디자인
마크시
eslint
더 예쁘다
웹 팩
Husky & Lint-Stage

당신이 얻는 것 :

게시물 피드
추천 게시물
태그 및 카테고리 별 게시물
다중 언어 지원
다중 저자 지원
사용자 정의 반응 구성 요소를 사용할 수있는 기능을 갖춘 마크 다운
유령에서 영감을 얻은 간단하고 편리한 CMS
CMS는 Firebase Auth로 보호됩니다
SSR에 대한 빠르고 SEO 친화적 인 응답
등대에서 좋은 결과

시작하기

1 단계. 파이어베이스 계정을 만듭니다

2 단계. 설정 인증 방법

인증 섹션에서 로그인 메소드 설정을 클릭하십시오.
Google 인증 제공자 만 활성화하십시오.
공인 도메인 에 도메인 (있는 경우)을 추가하십시오.

3 단계. Firestore 데이터베이스 생성

데이터베이스 섹션으로 이동하여 Firestore 인스턴스를 작성하십시오.

Firestore는 여전히 베타 버전에 있지만 덜 굉장하지는 않습니다.

4 단계. 데이터베이스 구성.

데이터베이스의 규칙 섹션으로 이동하여 프로젝트 루트의 .firebase-Rules에서 구성을 붙여 넣으십시오.
새로운 규칙을 게시하십시오.

5 단계. 앱의 Firebase Secret 키를 설정하십시오.

프로젝트의 루트에서 .env 만듭니다. 이 파일을 커밋하지 마십시오. 모든 사람이 이용할 수 없도록 개인 데이터입니다.
Firebase 콘솔에서 프로젝트 설정 으로 이동하십시오 ( 프로젝트 개요 옆의 기어 아이콘을 클릭하십시오).
다음 형식 으로이 페이지에서 .env 로 데이터를 복사하십시오.

F_PROJECT_ID= < your Project ID >
F_AUTH_DOMAIN= < your Project ID > .firebaseapp.com
F_API_KEY= < your Web API Key >

6 단계. 데이터베이스에서 데이터를 가져 오기/내보내기위한 Firebase Admin SDK 키 설정.

초기 시드로 데이터베이스를 초기화하려면 개인 Firebase 관리자 서비스 키를 생성해야합니다.

프로젝트 설정 > 서비스 계정 으로 이동하여 새 개인 키 버튼을 클릭하십시오.
Project Root에서 다운로드 된 파일을 firebase-service-key.json 으로 저장하십시오. **이 파일을 커밋하지 마십시오. 기본적으로 .gitignore 에 추가됩니다.

7 단계. 초기 데이터로 데이터베이스를 초기화합니다.

우리는 거의 끝났다. 초기 데이터로 데이터베이스를 초기화하겠습니다.

yarn
yarn run seed

8 단계. 데이터베이스 설정 인덱스.

Firebase에 휴식 요청을 수행하려면 Firestore 데이터베이스에서 수동으로 설정된 인덱스가 필요합니다.

데이터베이스 > 인덱스 로 이동하여 다음 인덱스를 만듭니다.

9 단계. 로컬로 블로그를 실행하십시오.

우리는 로컬로 블로그를 시작할 준비가되었습니다.

yarn dev

블로그는 http : // localhost : 3000에서 실행 중입니다.

10 단계. 관리 부품에 로그인하십시오.

잠깐 ..하지만 CMS 부분은 어떻습니까?

http : // localhost : 3000/admin으로 이동하여 "쓰기 시작하려면 클릭하십시오" 를 클릭하십시오.
팝업 창에서 Google 계정으로 로그인합니다.
Firebase Console으로 이동하여 저자 권한을 추가하여 방금 로그인 한 계정을 계정하십시오.
- 인증 섹션에서 사용자 UID를 복사하십시오.
- 데이터베이스 에서 authors 컬렉션을 만듭니다
- documentId 사용자의 UID이고 config.js 파일에서 사용자의 name id authors 컬렉션에서 레코드를 만듭니다.