Next.js + Notion API로 블로그 만들기

2022.09.24

dev

nextjs

blog

Next.js + Notion 조합을 선택한 이유는?

1. Notion API를 사용하기 위해서는 async, fetch 중심으로 이루어지므로 GraphQL을 도입할 필요가 없었다. Gatsby는 GraphQL만을 통해 컨텐츠 데이터를 가져오는 작업에 맞춰져 있다.

2. Next.js는 페이지 단위로 SSR, SSG, CSR을 쉽게 선택할 수 있는 프레임워크이기 때문에 추후 다양한 인터랙션이 필요한 페이지(수시로 데이터가 변경되거나 앱 내 캔버스나 웹 뷰와 같은 CSR이 필요한 경우)를 추가할 수 있는 이점이 있을 것이다.

3. 블로그로써의 기능 뿐 아니라 나의 포트폴리오 사이트로써의 기능도 할 수 있었으면 했는데, Next.js로 만들고 있던 포트폴리오 페이지 레포에 blog 페이지를 만들어서 개발에 들어갈 수 있다.

4. Gatsby가 Next.js보다 SSG가 빠르다고는 하지만 위와 같은 Next.js의 장점들을 상쇄할 정도로 차이가 유의미하게 크지 않았다.

블로그를 위한 기능들

• [P1] Next SSG ✅

• [P1] Notion API를 통해 글을 쉽게 publish, 공개/비공개 기능 ✅

• [P1] 포트스별 SEO: og-tag, sitemap.xml, robots.txt 자동 생성 ✅

• [P1] 포스트 태그(카테고리) 기능 ✅

• [P1] 글 목차 자동 생성 (ToC) ✅

• [P1] 코드 하이라이팅 ✅

• [P2] Google Analytics 지원 - 방문자 트래킹 ✅

• [P2] 포스트 검색 기능 ✅

• [P2] 포트스 별 comment 기능 ✅

• [P2] 모바일 최적화 (media query) ✅

• [P3] 다크모드 ✅

• [P3] 포스트 like 기능

• [P3] prev, next 포스트 버튼 / 관련 포스트 추천 기능

1. Notion API

2. Next.js로 Notion 파싱하기

• react-notion-x 라이브러리를 사용하기로 했다.

3. UI 개발

a. Post card list

b. Post tags

c. Post page

4. 블로그 기능 개발

Giscus를 이용한 댓글과 좋아요

import Giscus from "@giscus/react";
...
<Giscus
    id="comments"
    repo="youngjae99/youngjae-blog-comments"
    repoId="~~~~~~~~"
    category="General"
    categoryId="~~~~~~~~~"
    mapping="title"
    reactionsEnabled="1"
    emitMetadata="0"
    inputPosition="top"
    theme={theme === "light" ? "light_tritanopia" : "dark_tritanopia"}
    lang="en"
    loading="lazy"
/>

SSG + sitemaps 설정

Error occurred prerendering page "/posts/1e8e2b5f-d89a-407b-8164-2fecf31ad07c". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Notion page not found "1e8e2b5fd89a407b81642fecf31ad07c"
    at re.getPage (file:///Users/aaron/dev/next-projects/youngjae_profile/node_modules/notion-client/build/index.js:1:1083)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async getStaticProps (/Users/aaron/dev/next-projects/youngjae_profile/.next/server/pages/posts/[postId].js:144:21)

....

> Build error occurred
Error: Export encountered errors on following paths:
	/posts/[postId]: /posts/0b9e9d22-1b51-4c8d-90a0-54e4b49ab9a3
	/posts/[postId]: /posts/0c499705-f84c-425c-af02-13a9df0a222d
	/posts/[postId]: /posts/0da670df-8ffa-485b-b417-7ab048792708
	/posts/[postId]: /posts/0edf423f-f01e-4aee-bb46-ec2eb500d36b
	/posts/[postId]: /posts/0f6c66cf-4f8c-4eec-84b7-b43f6ce04c07
	/posts/[postId]: /posts/123caf9a-2adb-4204-a4eb-2c375851d671
	/posts/[postId]: /posts/12c03f10-6344-4144-92ae-1c83ccb9d0db
	/posts/[postId]: /posts/1617dfc1-b16e-49b0-a545-74fa702c93c6
	/posts/[postId]: /posts/16288cc8-7ee2-41eb-a019-d6a81be20735
....
error Command failed with exit code 1.

export interface Post {
  id: string;
  properties: any;
  [key: string]: any;
}
interface Posts {
  posts: Post[];
}

const Blog: React.FC<Posts> = ({ posts }: Posts) => {
  return (
    <Layout>
      {posts
         ? posts.map((post: Post) => <PostCard key={post.id} post={post} />)
         : null}
    </Layout>
  );
};

export const getStaticProps = async () => {
  const posts = await getNotionPosts();
  return {
    props: {
      posts,
    },
    revalidate: 10,
  };
};

export default Blog;

const Post: React.FC<{ pageData: any; recordMap: any }> = ({
  pageData,
  recordMap,
}: {
  pageData: any;
  recordMap: ExtendedRecordMap;
}) => {
  const metadata = generateBlogPostMeta(pageData);
  const createdTime = pageData?.created_time;
  const tags = pageData?.properties.Tags.multi_select.map((tag) => tag.name);
  console.log(tags);

  if (!pageData) { // pageData가 없는 경우 HiddenPost임을 보여주기
    return (
      <Layout>
        <HiddenPost />
      </Layout>
    );
  }

  return (
    <Layout>
      <NextSeo
        title={metadata.title}
        description={metadata.description}
        openGraph={metadata.openGraph}
      />
      <NotionPage
        recordMap={recordMap}
        rootPageId={rootNotionPageId}
        postTime={createdTime}
        tags={tags}
      />
    </Layout>
  );
};

export const getStaticPaths: GetStaticPaths = async () => {
  const posts = await getNotionPosts();
  const paths = posts.map((post) => ({
    params: { postId: post.id },
  }));
  return {
    paths,
    fallback: false,
  };
};

export const getStaticProps = async ({ params }) => {
  const pageId = params.postId as string;
  try {
    const recordMap = await notion.getPage(pageId);
    const pageData = await getNotionWithPageId(pageId);
    return {
      props: {
        pageData,
        recordMap,
      },
      revalidate: 10,
    };
  } catch { // notion에서 page share가 안되어있어 public access가 불가능한 경우
    return {
      props: {
        pageData: null,
        recordMap: null,
      },
      revalidate: 10,
    };
  }
};

export default Post;

Sitemaps

 

1. sitemap 제출 후 google crawler가 돌기까지 시간이 걸린다.

Open Graph Tag(OG-tag)

맺으며