[Portfolio] Notion API를 이용해 NextJS로 포트폴리오 만들기

예전부터 포트폴리오를 한 번 만들어보자 했었는데, 항상 미루기만 하고 작업하기가 쉽지가 않았다.

그런데 이번에 nextjs를 공부하면서 nextjs로 만들면 좋겠다란 생각을 했다.

그치만 역시 문제는 나중에 파일을 추가할 때마다 새로해야하나.. 라는 귀찮음? 이 들었다.

그러던 와중 좋은 영상을 보게 됐다.

바로 `notion api`를 통해서 나의 notion에 등록만해도 바로 등록되는 형식이었다!

딱 내가 원하는 형태!!!

---

시작하기

먼저 참고한 영상 링크는 여기다.

Next.js 나만의 포트폴리오 사이트 만들기 (개발하는 김에 배포까지) / LottieFiles, Notion Api, TailwindCSS (youtube.com)

 

앞에서 나오는 설명은 대부분 넥스트JS로 설치 방법이라 모르는 부분은 영상은 참고하면 될 거 같다.

나 같은 경우 몰랐던 notion api 부분과 해당 부분에서 헷갈렸던 부분을 설명하겠다.

---

Notion API 시작하기

새 글 작성은 한 후에 `/`슬래쉬를 하게 되면 databases가 나온다. 여기서 등록해서 원하는 카테고리들을 선택하면서 이미지를 등록하면 된다.

그리고 google에 `notion api`를 클릭해서 로그인 후 키값을 받아야한다.

해당 내용들은 영상에서 쉽게 보면서해결 할 수 있다. 

밑에 있는 내용들은 영상에 없어서 정리했다

---

문제1 나의 notion과 notion developers와 연결

영상에서 나오는 영상에선 연결하는 부분을 아무리 찾아도 찾을 수가 없었다.

아무래도 영상이 나온 시점과 지금 notion이 버전이 달라서 연결 부분에서 헤맸는데 이리저리 둘러보며 해결했다.

...을 누르면 connections가 있다. 여기서 연결하면 된다.

 

문제2 image를 가져올 때 문제되는 부분

nextjs에서 제공하는 `<Image/>` 태그를 쓰는데 영상과 다르게 오류가 좀 더 나는거 같다.

아마도 이미지 업로드해서 다운받는 경로가 한 두개 더 추가되거나 달라져서 그런거 같다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: [
      'www.notion.so',
      'images.unsplash.com',
      's3.us-west-2.amazonaws.com',
      'prod-files-secure.s3.us-west-2.amazonaws.com',
    ],
    path: '/_next/image',
    loader: 'default',
  },
};

module.exports = nextConfig;

 

문제3 영상에는 없는 database의 상세내용 가져오기 ( notion color mapping )

영상에서보면 리스트에서 보이는 내용들만 가져와지고 리스트를 등록해서 해당 프로젝트에 대한 설명을 좀 더 상세하게적었는데, 그것도 화면에 뿌려주고 싶었다.

하지만 영상에는 그 부분에 대한 설명은 없어서 api를 뒤지다가 `block`으로 가져오면 가능하단걸 알았다. 

 

notion은 글들이 모두 block 개념이라 해당 개념을 이용해서 한줄씩 가져온다.

그래서 그 줄들의 `type`들도 지정이 되기에 그걸 이용해서 font-size나 color 등도 맞게 변경하는 작업도 추가로 했다.

해당 부분은 내용이 길어질 수 있기에 내 블로그에 따른 부분으로 빼놓았으니 거기서 확인하면 될거같다.

[NextJS] Notion API - 컬러 맵핑 — gmrdlsrkswnl (tistory.com)

[NextJS] Notion API - 컬러 맵핑

 

 

문제4 기간이 Date로 오는데 원하는 모양으로 custom

날짜 받아오는거 자체를 커스텀하고 싶었다. 해당 내용도 따로 링크로 빼두겠다

[NextJS] Notion API - 기간 맵핑 — gmrdlsrkswnl (tistory.com)

[NextJS] Notion API - 기간 맵핑

 

 

 

---

마무리

원하던 작업을 이제서야 하게 되서 누가 시키지도 않았는데 새벽까지 작업을 하게 됐다.

확실히 재밌는 작업을 하니 시간가는지 몰랐다. 다음번엔 내소개 부분이나 티스토리 블로그 글을 가져오는 목록을 만들까 한다. 이것도 재밌을거같다.

무엇보다 기존 프로젝트를 하면서 공통으로 짜놨단 `any type 사용하지 않기` 같은 규칙들과 함께 적용하니 프로젝트의 완성도가 더 올라간거 같아서 재밌게 했다.

하지만 역시나 새롭게 디자인을 해야하는데 그건 좀 너무 귀찬...

결과 화면