#6 데이터 가져오기

getStaticProps

Next.js 에는 getStaticProps라고 데이터를 가져올 수 있다.

쉽게 말해 getStaticProps은 처음 렌더링이 될 때만 가져오는 함수 같은 거다.

components/projects.tsx

import Layout from "@/components/layout";
import type { NextPage } from "next";

import axios from "axios";
import { IProjectProps, IProjects } from "@/types/project";
import ProjectItem from "@/components/projects/project-item";
import Seo from "@/components/seo";
import Typical from "react-typical";

const Projects: NextPage = ({ project }: IProjectProps) => {
  return (
    <Layout>
      <Seo title="Projects" content="Projects" />
      <h1 className="typical">
        <Typical steps={[`프로젝트`]} loop={undefined} wrapper="strong" />
      </h1>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-5 py-10 sm:w-full ">
        {project.map((aProject: IProjects) => (
          <ProjectItem key={aProject.id} data={aProject} />
        ))}
      </div>
    </Layout>
  );
};

export default Projects;

// getStaticProps => 처음 렌더링 될 때 가져온다.
export async function getStaticProps() {
  const options = {
    method: "POST",
    url: `https://api.notion.com/v1/databases/${process.env.NOTION_DATABASE_ID}/query`,
    headers: {
      accept: "application/json",
      "Notion-Version": "2022-06-28",
      "content-type": "application/json",
      Authorization: `Bearer ${process.env.NOTION_TOKEN}`,
    },
    data: {
      sorts: [
        {
          property: "Date",
          direction: "descending",
        },
      ],
      page_size: 100,
    },
  };

  const res = await axios.request(options);
  const project = await res.data.results;
  //   const projects = await res.data.results.map((project: IProjects) => project);

  return {
    props: { project },
  };
}

 

TypeScript를 사용했기 때문에 포스트맨에서 가져온 값을 Type을 정해줘야 한다.

getStaticProps를 만들어 포스트맨에서 했던 거처럼 만들어준다.

노션 데이터베이스 아이디랑 노션 토큰은 env 파일에 넣어놔서 가져오고, data 안은 body 여서 정렬할 수 있는 sorts로 정렬을 한다.

그리고 return 반환값에 props: {보내고 싶은 값}을 보내주고 props로 받아주면 된다.

한마디로 말해 export async function getStaticProps() 이 부분은 서버 쪽이고,

const Projects: NextPage = ({ project }: IProjectProps) 이 부분은 클라이언트 쪽이라고 생각하면 쉽다.

그래서 props로 받은 project를 콘솔로 찍어보면 위 사진과 같이 getStaticProps에서 뽑은 값을 가져온다.