[NextJS & Firestore] getStaticPaths() 사용하여 동적 라우팅해주기

오늘은 각 테스트를 클릭 시 그 테스트의 세부사항을 가져올 수 있도록 동적 라우팅을 처리해줄 것이다! 물론 파이어스토어를 사용하여 데이터를 받아올 예정이다.

코드는 어제와 비슷하다. 다른 점은 딱 하나, getStaticPaths라는 메서드를 하나 더 썼다는 것이다.

getStaticPaths 또한 NextJS에서 SSG를 위해 제공하는 메서드이다. 동적 페이지에 필요한 메서드이며 NextJS에게 어떤 동적 파라미터 value의 어떤 페이지가 pre-generate 되어야할지 알려준다.

paths 프로퍼티의 값이 되는 배열의 요소인 객체의 params의 값에 해당하는 페이지를 미리 생성해둔다. 각각의 값 params은 페이지 이름에 사용된 파라미터와 일치해야 한다.

fallback(필수)은 특정 path를 정의한다.

• true : 빈 페이지 즉시 반환하고 동적으로 생성된 콘텐츠를 풀다운한다. 페이지에 데이터가 아직 없는 경우에 대해 처리가 필요하다.
• false : paths 객체 안에 명시된 값에 해당하는 페이지만 미리 만들어놓고, 명시되어있지 않은 페이지를 요청받으면 404 페이지를 리턴한다.
• blocking : 페이지가 미리 생성될 때까지 아무것도 볼 수 없고 완성될 때 보여진다.

// [testId]의 index.js
import { db } from "../../firebaseConfig";
import { collection, doc, getDocs, getDoc } from "firebase/firestore";

export async function getStaticPaths() {
  const listsCollectionRef = collection(db, "testList");
  const data = await getDocs(listsCollectionRef);
  return {
    fallback: false,
    paths: data.docs.map((doc) => ({
      params: { testId: doc.id },
    })),
  };
}

export async function getStaticProps(context) {
  const testId = context.params.testId;
  const docRef = doc(db, "testList", testId);
  const dataSnapshot = await getDoc(docRef);
  const testDetail = dataSnapshot.data();

  return {
    props: {
      test: testDetail,
    },
  };
}

getStaticPaths()안에서 모든 테스트 리스트 데이터를 받아오고 map을 통해 id만 뽑아내어 배열을 만들어준다. 그 값을 paths 프로퍼티의 값응로 설정한 뒤, getStaticProps에서 context.params.testId로 접속한 페이지의 동적 라우팅 주소를 받아와 테스트 리스트에서 그 id에 해당하는 테스트의 정보를 가져온다. 여기서 중요한 점은, 동적 라우팅 주소를 받아오기 위해 getStaticProps 메서드에 파라미터로 context를 꼭 써줘야한다는 것이다.

이제 파이어스토어 연동도 왠만치로 끝냈다! 남은 할 일은 데이터 더 채워넣기와 카테고리 별 데이터 filter하는 방법 생각해보기다! 카테고리 별 데이터 filter를 어떤 방식으로 해야하나 고민이 많다ㅠㅠ

참고한 블로그 및 강의)

https://softauthor.com/firebase-firestore-get-document-by-id/

Firebase 9 Firestore Get A Document By ID Using getDoc()

https://www.udemy.com/course/best-react/learn/lecture/28518427#overview