nextjs-notion-starter-kit

1. 노션 템플릿 복제

• 다음의 템플릿을 자신의 워크스페이스로 복제해온다
Next.js Notion Starter Kit Template
This is an example site. Duplicate this page to get started.

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

• 복제한 페이지를 웹에 게시한다

• notion.site/와 ?v= 사이에 있는 pageId를 복제해둔다

https://devskim.notion.site/Next-js-Notion-Starter-Kit-Template-e45884a6714d42c990b8623c78a006b2?pvs=4

2. 저장소 설정

• 다음의 명령어로 저장소를 받는다

git clone https://github.com/transitive-bullshit/nextjs-notion-starter-kit.git

• site.config.ts에서 rootNotionPageId를 설정한다

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

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

	...
}

• 필요한 노드 패키지를 설치한다

npm install --legacy-peer-deps

• 패키지를 실행한다

npm run dev

3. 웹페이지

• 다음과 같은 모습으로 노션 페이지가 렌더링된다

참고