Next.js Notion Starter Kit으로 Vercel 배포까지

왜 Vercel, Notion?

1. 편리한 배포 Vercel

2. Notion은 왜?

(중요) 뉴비용 스타터 Kit이 있다.

필요한 것들

• Node.js 20(LTS)
• https://nodejs.org/ko/download
• 다른 버전이 깔려 있다면 nvm(사용하는 노드 버전 컨트롤 해주는 매니저)도 설치하자
• https://github.com/coreybutler/nvm-windows/releases
• 윈도우는 nvm-setup.exe로 설치해주면 쉽게 해결된다.

• pnpm은 vercel 기본이 pnpm으로 되어있어서 이 친구 기준으로 해두는게 편하다
• https://pnpm.io/ko/installation

• Git

1. Vercel 배포를 위한 Starter kit clone하기

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

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

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

  // 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: 'Next.js Notion Starter Kit',
  domain: 'nextjs-notion-starter-kit.transitivebullsh.it',
  author: 'Travis Fischer',

  // open graph metadata (optional)
  description: 'Example Next.js Notion Starter Kit Site',

  // 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'
  //   }
  // ]
})
 

  // the site's root Notion page (required)
  rootNotionPageId: '본인의 노션 페이지 Id',
  // basic site info (required)
  name: 'Dongho Log',
  domain: '본인의 vercel.app 도메인',
  author: 'Dongho',
  // open graph metadata (optional)  
  description: 'Dongho의 개인 블로그입니다',

  // social usernames (optional) <-- 필자 기준 github과 linkedIn을 연결할거니까 필수
  github: 'dongho-shin',
  linkedin: '동호-신-81ab65227',

Social usernames

노션 페이지 Id 갖고오기

Vercel 배포

일단은 Vercel로 가보자 VercelVercel: Build and deploy the best web experiences with the Frontend Cloud

Vercel: Build and deploy the best web experiences with the Frontend Cloud

Vercel's Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized web.

Vercel

jobs:
  test:
    name: Test Node.js ${{ matrix.node-version }}
    runs-on: ubuntu-latest
    strategy:
      fail-fast: true
      matrix:
        node-version:
          - 20