Firebase를 Next.js에 연결하는 방법.

Firebase를 Next.js에 연결하는 방법.

 

안녕하세요!

오늘은 간단하게 Firebase를 어떻게 Next.js 13에서 이용할 수 있는지 알아보려고 합니다.

 

1. Firebase란?
2. Firebase 사용방법?
3. 연결 방법?
4. 마치며.

 

1. Firebase란?

Firebase란 Google에서 제공하는 서비스입니다.

Firebase에는 여러가지 부가적인 빌드를 (기능) 제공합니다. 예를 들면 Firestore database, Authentification, Hosting과 같은 빌드가 존재합니다. 기본적으로 이러한 빌드들은 다 무료인 것으로 알고 있습니다. 하지만 더 나은 성능을 기대한다면 요금제를 선택하여 사용할 수도 있습니다.

 

Firebase를 이용하면 손쉽게 데이터를 저장하고 유저를 생성할 수 있습니다. 그 외에도 여러 가지 많은 기능들을 사용해 볼 수 있습니다.

 

2. Firebase 사용방법? 

사용방법에 관해서 짧게 알아보겠습니다.

먼저 Firebas 공식 홈페이지로 들어가 Google 아이디로 로그인하시면 사진과 같이 프로젝트를 생성할 수 있는 버튼이 있습니다.

그 후 프로젝트의 이름을 설정합니다. 저는 test-project라고 프로젝트 이름을 설정했습니다.

그 후 Google 애널리틱스에 관한 정보가 나옵니다. 사용하는 것을 권장하지만 저는 따로 애널리틱스 기능을 사용하고 싶지 않기 때문에 비활성화했습니다. 필요하시다면 활성 화하시면 됩니다.

 

프로젝트 만들기 버튼을 누르면 프로젝트 생성이 시작됩니다.

자 프로젝트 생성이 끝나고 나면  아래와 같은 페이지로 이동할 수 있습니다.

자 이제 프로젝트 생성은 끝이 났습니다.

이제 프로젝트를 사용하기 위한 추가작업을 시작해야 합니다.

아래의 사진을 보시면 여러 버튼이 존재합니다.

각각 IOS, Android, Web Unity 그리고 Flutter입니다.

저희는 웹을 이용할 것이기에 3번째에 위치한 웹버튼을 누릅니다.

자 그럼 아래와 같은 페이지가 뜨게 되고 웹 프로젝트의 이름을 설정해야 합니다.

저는 test-web-project라고 이름을 설정했습니다.

그리고 Firebase 호스팅을 사용하지 않을 것이기에 체크하지 않았습니다.

Firebase 호스팅을 이용해서 자신의 웹사이트를 배포하고 싶으시다면 체크를 설정하시면 됩니다.

하지만 언제든지 나중에 설정을 다시 바꿀 수 있습니다.

자 이제 거의 모든 사전준비는 끝났습니다.

자 그럼 아래와 같이 firebaseConfig이라는 오브젝트가 생성됩니다.

firebaseConfig은 누구에게도 보여주시면 안 되는 민감한 정보입니다.

나중에 Git을 이용하여 코드를 푸시하실 때도 꼭. gitignore에 파일을 지정하여 노출되지 않게 조심하셔야 합니다.

firebaseConfig은 조금 후 Next.js와 연동할 때 사용할 것입니다.

자 이제 우리는 예시로 firestore database 사용 방법을 알아볼 것입니다.

콘솔로 이동 버튼을 누르시고 메인 페이지로 이동 후 빌드에서 Firebase database를 찾아 눌러주세요.

이러한 홈페이지로 이동하시계 될 것입니다.

이제 데이터베이스 만들기를 누르시고 위치를 설정하시고 테스트모드를 선택하신 후 사용설정 버튼을 누르시면 됩니다.

위치는 자신이 지금 현재 거주하는 위치에서 가장 가까운 위치를 선택하시는 게 가장 이상적인 방법입니다.

올바르게 사용 설정이 끝나면 아래와 같은 페이지가 보입니다.

자 이제 컬랙션을 하나 만들어보겠습니다.

저는 컬랙션 아이디는 test-test로 만들고 문서 아이디는 자동으로 그리고 필드는 name과 Mike를 입력하였습니다.

아래의 사진과 같이 test-test컬랙션이 생성되었는 것을 확인할 수 있습니다.

자 이제 모든 사전 작업은 끝났습니다.

 

3. 연결 방법?

Next.js에 Firebase를 연결할 차례입니다.

먼저 Next.js 프로젝트를 생성합니다.

Next.js프로젝트를 생성하려면 Node.js를 설치해야 합니다.

Node.js가 설치되어 있는지 확인하려면 터미널에서 node -v을 입력해 보시면 됩니다.

Node.js가 설치되어 있지 않으시다면 간단히 Google에 Node.js를 검색하시고 공식 홈페이지에서 다운로드하시면 됩니다.

혹은 여러버 전을 사용하게 되실 경우 nvm이라는 노드 버전 매니저를 설치하시면 됩니다.

 

아래의 yarn 혹은 npx 커맨드를 이용하여 Next.js프로젝트를 생성할 수 있습니다.
(개인적인 정보가 표시되는 부분은 모두 안 보이게 바꿔놨습니다.)

yarn create next-app
# or
npx create-next-app

자 이렇게 Next.js 프로젝트가 생성되었습니다.

이제 프로젝트를 VSCode를 이용하여 열어보도록 하겠습니다.

그 후 아래의 사진과 같이 firebase 터미널에 입력하여 패키지를 다운로드해 줍니다.

저는 yarn을 사용하지만 없으시다면 npm를 이용해 주세요.

yarn add firebase
# or
npm install firebase

firbase 패키지 설치가 끝나면 루트에서 새로운 폴더를 생성하시고 그 폴더 안에 firebase.ts라는 파일을 생성합니다.

저는 lib폴더를 생성하였지만 이름은 아무것이나 전혀 상관없습니다.

그리고 똑같이 루트에서. env.local이라는 파일도 생성해 주세요.

아래의 사진을 보시면 lib폴더 안에 firebase.ts와. env.local파일이 생성되어 있는 것을 확인할 수 있습니다.

. env.local파일은. gitignore에 포함되어 있기 때문에 어두운 회색으로 표현됩니다.

어두운 회색으로 표현된 모든 파일을 은 Git을 이용해서 코드를 푸시해도 포함되지 않습니다.

 

자 이제. env.local 파일에 우리가 아까 firebase에서 만들었던 firebaseConfig 오브젝트의 값을 설정할 것입니다.

혹시 firebaseConfig 값을 어디서 찾아야 하는지 모르신다면, 자신의 프로젝트 메인홈페이지로 가셔서 프로젝트 개요 옆 톱니바퀴모양을 클릭 후 프로젝트 설정으로 이동하시면 됩니다.

여기서 WriteYourOwnValue대신 firebaseConfig에 있던 값들을 복사붙여 넣기 하시면 됩니다.

예시를 보시면 이렇게 될 것입니다. 예시와 같이 자신의 모든 firebaseConfig 값을 위에서 아래까지 복사 붙여넣기 해주세요.

FIREBASE_API_KEY=AbCdEFgHiJKLMn
FIREBASE_AUTH_DOMAIN=yourOwnProjectName.firebase.com
FIREBASE_PROJECT_ID=yourOwnProjectName
FIREBASE_STORAGE_BUCKET=yourOwnProjectName.appspot.com
FIREBASE_MESSAGING_SENDER_ID=123121923123
FIREBASE_APP_ID=1:12312312312:web:7c2jwiac3123f5e

자 이제 firebase.ts 파일로 넘어가겠습니다.

firebase.ts에 아래의 코드를 입력해 주세요.

firebaseConfig은 process.env. 를 통해서. env.local에 있는 값을 가져오게 됩니다.

현재 getCollectionData는 firebase에 collectionName 즉 제가 지정한 test-test를 통해서 존재하는 모든 값을 가져오는 함수입니다.

import { initializeApp } from "firebase/app";
import { getFirestore, getDocs, collection } from "firebase/firestore";

/** Firebase config. */
const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.FIREBASE_APP_ID,
};

const app = initializeApp(firebaseConfig);

export const db = getFirestore(app);

/** Get all data from one collection. */
export const getCollectionData = async ({
  collectionName,
}: {
  collectionName: string;
}) => {
  const querySnapshot = await getDocs(collection(db, collectionName));
  // 예시를 위해 any 타입을 설정했습니다. any는 왠만하면 사용하지 않는것이 좋습니다.
  const results: any = [];

  querySnapshot.forEach((doc) => {
	// 체크하기위한 console.log
    console.log(doc.id, " => ", doc.data());
    results.push(doc.data());
  });

  return results;
};

 

자 이제 마지막으로 백엔드에 route 지정해 주면 모든 준비가 끝났습니다.

백엔드에 route을 지정하는 방법은 아주 간단합니다.

먼저 app 폴더 안에 api폴더를 생성합니다. 그리고 그 안에 collection이라는 폴더를 생성하고 그 안에 route.ts라는 파일을 생성합니다.

아래의 사진을 참조하세요. 

자 이렇게 폴더와 파일까지 생성하셨다면 아래의 코드를 route.ts에 붙여 넣어 주세요.

원래는 POST request를 사용하는 것이 맞으나 쉽게 이해시켜 드리기 위해서 GET request를 사용하였고 collectionName에 직접 제가 Firestore에 만든 test-test라는 컬랙션의 이름을 지정해 주었습니다. 컬랙션의 이름을 다르게 설정하셨다면 test-test대신 자신의 컬랙션 이름을 지정해 주시면 됩니다.

import { NextResponse } from 'next/server';
import { getCollectionData } from '@/lib/firebase';

export async function GET() {
  const result = await getCollectionData({ collectionName: 'test-test' });

  return NextResponse.json(result);
}

이제 서버를 시작하여 확인해 보겠습니다. 아래의 커맨드를 이용해서 서버를 로컬에서 실행할 수 있습니다.

yarn dev
# or
npm start dev

로컬에서 제대로 작동하기 시작하면 아래와 같은 표시가 터미널에 나타납니다.

자 이제 브라우저를 열고

http://localhost:3000을 입력합니다.

그러면 Next.js에서 제공하는 메인페이지가 나타날 것입니다.

그렇다면 이제 거의 다 온 겁니다.

이번에는 http://localhost:3000/api/collection을 입력합니다.

그러면 저희가 지정한 컬랙션의 모든 데이터가 브라우저에 나타나게 될 것입니다. 아래의 사진과 같이 말입니다.

 

4. 마치며.

사진과 코드를 같이 담다 보니 게시글의 길이가 조금 길어진 감이 없지 않아 있습니다.

하지만 이렇게 사진을 같이 보시면 따라 해보기 시 훨씬 편하길 것입니다.

저 역시 코딩할 때 여러 블로그를 확인하지만 글은 잘 읽지 않고 사진과 코드를 먼저 확인하기 때문에

아마 조금이나마 도움이 더 될 것이라고 생각했습니다.

 

자 오늘은 짧게? Firebase를 Next.js에 연결하는 방법을 알아보았습니다.

Firebase는 제공하는 여러 빌드가 많기 때문에 가능하시다면 한 번씩 사용해 보시는 걸 추천드립니다.

더군다나 무료로 사용이 가능한데 사용하지 않을 이유가 없습니다.

또한 Firebase를 더 쉽게 사용할 수 있도록 도와주는 다른 라이브러리들이 많습니다.

그러한 라이브러리를 이용하면 제가 작성한 코드들마저도 작성하지 않고 Firebase를 사용 가능할 것입니다.

 

다음에 기회가 되면 Next.js를 Docker를 이용해 image를 생성하여 docker hub에 저장한 후 Web 서버를 만들어 실제로 웹사이트가 서비스되는 과정을 포스팅해보도록 하겠습니다.

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.

Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.