getStaticData 시도

KoEunseo·2023년 2월 7일
0

portfolio

목록 보기
5/12
import { filterByTitle } from "@/hooks/filtering";
import Image from "next/image";
import name from "@/public/images/profile.webp";
import useSWR from "swr";
import styles from "@/styles/layouts/intro.module.scss";
import common from "@/styles/common/common.module.scss";
import { getData } from "@/pages/api/notionApi";
import { SWRConfig } from "swr/_internal";
import { NotionDataRow } from "@/types/types";
import { Client } from "@notionhq/client";

export async function getStaticProps() {
  const query = await getData();
  // @ts-ignore
  const rows = query.results.map((res) => res.properties) as NotionDataRow[];
  const rowsStructured = rows.map((row) => ({
    title: row.title.title[0].text.content,
    content: row.content.rich_text[0]?.text?.content,
    tags: row.tags.multi_select[0].name,
  }));
  return {
    props: {
      staticData: rowsStructured,
    },
  };
}
const Introduce = ({ staticData }: any) => {
  const { data } = useSWR("/api/notion");
  const { data, isLoading } = useSWR("/api/notion", {
    initialData: staticData,
    revalidateOnMount: true,
  });
  const title = "Introduce";
  const intro = filterByTitle(data, title)?.[0];

  return (
    <figure className={styles.intro}>
      <div className={styles.intro_img_wrap}>
        <Image
          src={name}
          alt="name"
          placeholder="blur"
          fill
          sizes="(min-width: 480px) 100vw, (min-width:600px) 500px, 500px"
        />
      </div>
      <figcaption className={styles.intro_contents}>
        <h2 className={`${styles.intro_title} ${common.stroke_title}`}>
          프론트엔드 개발자
        </h2>
        {intro ? <p>{intro.content}</p> : null}
      </figcaption>
    </figure>
  );
};

export default Introduce;

무엇이 문제인가..... 작동하지 않는다.

profile
주니어 플러터 개발자의 고군분투기

0개의 댓글