유형

실습문서

주제

NextJS와Notion

순번

태그

NextJSnotion

설명

NotionDB를 이용하여 NextJS로 프론트단 구현하기

💡

노션으로 작성한 페이지를 데이터베이스로 활용해서 nextJS로 프론트단을 제작하는 프로젝트 예시 입니다.

조금 더 다양한 구조나 블록을 추가 하려면 당신의 수명을 담보로 해야 할수 있으니 주의하시기 바랍니다.

1. 스타터킷 포크

위의 깃허브에 방문하여 리포지토리를 포크한다.

이리저리 둘러봐도 트레비스씨가 만드신 이것이 가장 편리하다.

참고로 이 프로젝트는 next+ts+yarn 을 사용하였다.

2. 노션템플릿 복제

https://transitive-bs.notion.site/Next-js-Notion-Starter-Kit-Template-7875426197cf461698809def95960ebf

위의 링크로 가서 노션 템플릿을 본인의 계정으로 복제한다.

노션의 구조가 같아야 빌드시 성공확률이 높다 왜냐고? 해봐라 그럼 알것이다.

본인의 노션 페이지를 빌드하고 싶다면 일단 이걸로 해보고 고민해보길 바란다.

3. 1에서 포크한 리포지토리를 클론한다

VSCode를 열로 깃허브의 포크한 리포지토리를 로컬로 클론한다.

4. 로컬 환경설정

4.1.site.config.ts

선택한 폴더 하위에 클론 리포지토리가 추가 되었다.

해당 파일로 이동하여 site.config.ts 를 연다

4.1.1. pageId

메인 페이지 역할을 할 노션의 데이터베이스 id이다.

복제한 노션페이지로 이동한다
아래이미지의 순서대로 클릭한다

공유탭의 링크 복사 클릭

site.config.ts 파일에 링크 붙여넣기

이미지에 표시된 부분이 pageId 이다

이 부분만 잘라붙이고 나머지는 삭제한다.

4.1.2. name, author

사이트의 이름이다. 검색엔진에 반영된다.

아래 그림처럼 문자형을 넣으면 된다.

4.1.3. domain

사이트 주소이다.
노션 무료 계정은 2차 도메인 세팅은 가능하다.

노션 사이드 메뉴를 열고 설정과 멤버를 클릭한다

① 왼쪽의 사이트 클릭

② 중앙에서 도메인 변경하려는 페이지 선택

③ 상단의 더보기 클릭후 ④ 업데이트 클릭

다른 사람이 쓰고 있을 경우 사용 못한다.

발급받은 도메인을 config.ts에 작성한다.

4.1.4. 기타설정

description: 사이트 설명 seo반영됨
twitter,github 등의 설정이 있다 알아서 쓰자 없으면 주석처리
그래서 아래는 나의 site.config.ts 파일이다.

import { siteConfig } from './lib/site-config';


export default siteConfig({
  // the site's root Notion page (required)
  rootNotionPageId: 'a3b6198286794676a4faf255afb3470d',

  // if you want to restrict pages to a single notion workspace (optional)
  // (this should be a Notion ID; see the docs for how to extract this)
  rootNotionSpaceId: null,

  // basic site info (required)
  name: '넥스트는 시내철',
  domain: 'knight-doll.notion.site',
  author: '인형',

  // open graph metadata (optional)
  description: '넥스트는 시내철 ',

  // social usernames (optional)
  //twitter: 'transitive_bs',
  //github: 'transitive-bullshit',
  //linkedin: 'fisch2',
  // mastodon: '#', // optional mastodon profile URL, provides link verification
  // newsletter: '#', // optional newsletter URL
  // youtube: '#', // optional youtube channel name or `channel/UCGbXXXXXXXXXXXXXXXXXXXXXX`

  // default notion icon and cover images for site-wide consistency (optional)
  // page-specific values will override these site-wide defaults
  defaultPageIcon: null,
  defaultPageCover: null,
  defaultPageCoverPosition: 0.5,

  // whether or not to enable support for LQIP preview images (optional)
  isPreviewImageSupportEnabled: true,

  // whether or not redis is enabled for caching generated preview images (optional)
  // NOTE: if you enable redis, you need to set the `REDIS_HOST` and `REDIS_PASSWORD`
  // environment variables. see the readme for more info
  isRedisEnabled: false,

  // map of notion page IDs to URL paths (optional)
  // any pages defined here will override their default URL paths
  // example:
  //
  // pageUrlOverrides: {
  //   '/foo': '067dd719a912471ea9a3ac10710e7fdf',
  //   '/bar': '0be6efce9daf42688f65c76b89f8eb27'
  // }
  pageUrlOverrides: null,

  // whether to use the default notion navigation style or a custom one with links to
  // important pages. To use `navigationLinks`, set `navigationStyle` to `custom`.
  navigationStyle: 'default'
  // navigationStyle: 'custom',
  // navigationLinks: [
  //   {
  //     title: 'About',
  //     pageId: 'f1199d37579b41cbabfc0b5174f4256a'
  //   },
  //   {
  //     title: 'Contact',
  //     pageId: '6a29ebcb935a4f0689fe661ab5f3b8d1'
  //   }
  // ]
})

4.2. package.json 수정

name,version 등 수정

{
  "name": "next",
  "version": "1.0.0",
  "private": true,
  "description": "next라면 시내철이지.",
  "author": "얄리얄리",
  "repository": "qwerewqwerew/next",
  "license": "MIT",
  "engines": {
    "node": ">=16"
  },
  ...

4.3. 모듈설치

vscode 에서 클론된 저장소 (next) 폴더 위에서 우클릭 후 아래 이미지의 순서대로 클릭한다.

선택한 폴더에서 터미널 창이 열린다

터미널창에 npm install 입력
npm run dev 해보자

5. 빌드 및 배포

5.1. 깃허브에 올리기

터미널에서 ctrl + c 를 눌러 서버를 종료한다.
yarn.lock 파일을 삭제한다

깃에 올리자

git add .
git commit -m "첫번째 빌드시도"
git push origin main

완료 되었으면 버셀로 이동한다.

5.2. 버셀에서 배포하기

https://vercel.com/

버셀에 로그인 한후 아래 이미지 번호 순으로 클릭한다

f66c0d7d7d584a25b5d0c22501432c99

ffc272bcbe7d499aab32f950c7815d22

4c58b32f183a4bd1b6a0a5ca1dee8cb4

배포끝

6. 유지보수

깃허브에 코드를 push하면 버셀로 자동 배포된다.

상황에 따라 깃허브와 버셀 연동을 한번도 안했던 경우 깃허브에서 버셀앱의 서드파드앱 권한을 열어줘야 한다.
노션의 페이지 내용을 수정하면 프론트 화면에도 연동된다.

7. 참조링크

국내개발자의 스타터 킷
트레비스씨의 노션용 모듈
노션 api 레퍼런스	https://developers.notion.com/reference/intro
notion-api 키워드로 검색한 stackoverflow 게시글 모음	https://stackoverflow.com/search?q="notion+api"

Notion과NextJS로 그것을 만들기