NotionNext 문서

Appearance

사이트 설정 방법 ​

이전 문서: 사이트 설정 방법 게시일: 2024-5-13 마지막 수정: 2026-5-2 원래 분류: 🛠 사이트 설정 태그: NotionNext 요약: NotionNext 사이트를 설정하는 방법입니다.

앞선 튜토리얼에 따라 배포에 성공했다면 이후에는 언제든 사이트 설정을 업데이트할 수 있습니다. 예를 들어 테마 전환, 음악 컴포넌트 활성화, 댓글 플러그인 활성화, 애니메이션 효과 활성화, 사이트 글꼴 수정 등을 할 수 있습니다.

설정 방식은 세 가지입니다.

  1. Notion 노트에서 수정

  2. GitHub에서 설정 코드 수정

  3. Vercel 환경 변수로 설정 추가

아래에서 하나씩 설명합니다.

1. Notion에서 수정 ​

사이트 아이콘, 제목, 설명, 커버 이미지는 Notion 템플릿에서 직접 읽습니다.

Untitled아이콘, 제목, 설명, 커버 이미지는 각각 사이트의 작성자 아바타, 사이트 제목, 사이트 설명, 큰 커버 이미지에 대응합니다

💡

4.1 이전 버전(1.0 - 4.0)에서는 많은 설정을 설정 파일이나 환경 변수에서 수정해야 했습니다. 따라서 사용자가 편집기를 열거나 GitHub에 로그인하거나 Vercel 관리 화면에서 환경 변수를 편집해야 했습니다.

4.1 버전 이후에는 Notion 안에 Config 문서를 만들고 언제든 Notion에서 설정 파일을 편집할 수 있습니다.

Notion-Config 사용 ​

💡

Notion에서 문서 하나를 편집하면 사이트 설정과 기능 스위치가 실시간으로 동기화됩니다. GitHub, Vercel, 서버에 로그인할 필요가 없습니다.

사용 방법 ​

처음 복제한 데이터베이스 템플릿에는 이후 업데이트로 type이 Config인 문서가 추가되었습니다. 이 문서에는 다음 형식의 데이터 표가 포함되어 있습니다.

설정 센터 Config설정 센터의 내장 표

설정 센터 사용 설명 ​

  1. 이 설정 페이지는 V4.1.0 이후 버전에서만 지원됩니다.

  2. 여기서 설정한 값의 우선순위가 가장 높습니다. Vercel 환경 변수와 blog.config.js 설정을 덮어씁니다.

  3. 지원되는 설정은 blog.config.js와 각 테마의 config.js에서 찾을 수 있습니다. 4.8.0 이후에는 blog.config.js 크기를 줄이기 위해 서로 다른 모듈의 설정이 /conf/xx.js로 분리되었습니다. image.png 각종 설정 참고 경로: https://github.com/tangly1024/NotionNext/tree/main/conf 테마 지원 설정 참고 경로: https://github.com/tangly1024/NotionNext/blob/main/themes/example/config.js

  4. NOTION_PAGE_ID는 반드시 환경 변수나 코드에 설정해야 하며, Notion_Config 문서 설정은 지원하지 않습니다.

  5. 설정 센터 표에는 몇 가지 자주 쓰는 설정을 미리 넣어 두었습니다. 필요에 따라 더 많은 설정을 직접 추가할 수 있습니다. 오른쪽 위의 new 또는 왼쪽의 더하기 +를 클릭하면 설정 행을 추가할 수 있고, 해당 설정명과 설정값을 입력하면 됩니다. Untitled

  6. 강력히 추가를 권장하는 설정: AUTHOR: 작성자 이름 LINK: 사이트 URL CONTACT_EMAIL: 연락 이메일. 더 많은 연락 방식은 contact.config.js의 설정 방식을 참고하세요. 반드시 본인의 연락처를 설정하세요.

표 필드 설명 ​

테마 설정과 복잡한 형식 지원 ​

대부분의 테마 설정 항목은 NOTION_CONFIG로 사용할 수 있습니다. 다만 설정 내용이 배열이나 객체라면 NOTION_CONFIG 안의 내용을 큰따옴표를 사용하는 JSON 형식으로 변환해야 합니다. 그렇지 않으면 읽을 수 없습니다. 예를 들어 HEO 테마는 다음 네 가지 설정을 지원합니다.

JavaScript
// The following examples represent boolean, string, object, and array types.
HEO_HOME_BANNER_ENABLE: true,
HEO_SITE_CREATE_TIME: '2024-05-09',
HEO_HERO_CATEGORY_1: { title: 'Must Read', url: '/tag/must-read' },
HEO_NOTICE_BAR: [
  { title: 'Welcome to my blog', url: '/user-guide/intro' },
  { title: 'Visit the docs center for more help', url: '/user-guide/intro' }
],

이 네 가지 유형을 Notion_Config에 설정할 때는 객체와 배열을 JSON 형식으로 변환해야 합니다.

설정 후 효과 예시:

CONFIG-TABLE | Notion

Built with Notion, the all-in-one connected workspace with publishing capabilities.

코드의 Config를 JSON으로 변환하는 방법 ​

config의 객체를 JSON으로 바꾸려면 AI나 온라인 JSON 포맷 도구를 사용할 수 있습니다.

image.png

기존 사용자 업그레이드 ​

새 사용자(2024년 이후): 복제한 데이터베이스 템플릿에는 이 설정 페이지가 기본으로 포함되어 있습니다.

기존 사용자(2023년 및 이전): 아래 링크의 설정 센터 문서를 복사하면 NotionConfig 기능을 사용할 수 있습니다.

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

이 문서 왼쪽의 점 여섯 개 버튼을 클릭해 선택하고 Ctrl+C로 문서를 복사합니다. 그런 뒤 본인의 Notion 템플릿 페이지에서 Ctrl+V로 붙여 넣으면 됩니다.

Untitled

2. 코드 수정 ​

💡

중요: 사이트의 대부분 설정은 코드 저장소의 blog.config.js 파일에서 찾을 수 있습니다.

대응하는 설정만 수정하면 Vercel이 GitHub 저장소의 최신 코드를 자동으로 배포합니다.

💡

NotionNext 4.1 이후 버전으로 업데이트했다면 Notion-Config 파일에 설정을 추가하는 방식을 권장합니다. 이 설정은 blog.config.js의 설정을 덮어씁니다.

설정 방법: GitHub에서 이 파일을 찾고 오른쪽 위의 편집 버튼을 클릭해 매개변수를 수정합니다.

Untitled

💡

코드를 수정할 때마다 Vercel은 자동으로 배포 작업을 만들어 최신 코드를 패키징하고 배포합니다. 각 배포 작업에는 미리보기에 사용할 수 있는 고유 URL이 제공됩니다.

  • 컴파일 성공: 온라인 도메인이 이번 배포의 최신 버전으로 업데이트됩니다.
  • 배포 실패: 코드 형식 오류나 오타가 있으면 이번 배포는 폐기됩니다. 온라인에서 실행 중인 이전 버전 사이트는 영향을 받지 않습니다. 관리 화면의 배포 로그에서 오류 원인을 확인할 수 있습니다.
부록 - 배포 로그 얻는 방법

배포 로그를 캡처해 커뮤니티에 도움을 요청하세요.

  1. Vercel 관리 화면에서 각 배포 기록을 확인합니다. Untitled
  2. 배포 오류 로그를 캡처합니다. 오류 정보는 완전할수록 좋습니다. Untitled

수정 예시 ​

아래 예시는 사이트 기본 작성자를 수정합니다.

  • 수정 전
JavaScript
AUTHOR: process.env.NEXT_PUBLIC_AUTHOR || 'NotionNext', // Before: author NotionNext
  • 수정 후
JavaScript
AUTHOR: process.env.NEXT_PUBLIC_AUTHOR || 'momo', // After: author momo

아래 예시는 현재 사이트 URL을 수정합니다.

  • 수정 전
JavaScript
LINK: process.env.NEXT_PUBLIC_LINK || '/user-guide/intro', // Before: site URL
  • 수정 후
JavaScript
LINK: process.env.NEXT_PUBLIC_LINK || 'https://qq.com', // After

💡

이 설정은 반드시 본인의 사이트 도메인으로 바꾸세요. 그렇지 않으면 공유와 저작권 표시 기능에 영향을 줄 수 있습니다.

3. 환경 변수에서 설정 ​

blog.config.js 코드를 직접 수정하는 것 외에도 Vercel 관리 화면에 환경 변수를 추가할 수 있습니다. 이 방식의 장점은 코드 변경을 줄이고, 이후 업그레이드 때 코드 충돌 가능성을 낮춘다는 점입니다.

💡

사이트 설정 우선순위는 NotionConfig, 그다음 환경 변수, 마지막 코드 설정입니다.

내장 테마 이름 목록(저장소와 동기화) ​

NEXT_PUBLIC_THEME / THEME 값은 저장소의 [themes/](https://github.com/tangly1024/NotionNext/tree/main/themes) 아래 폴더명과 일치해야 합니다. next.config.js는 빌드 시 이 디렉터리를 스캔합니다. 현재 main 브랜치를 기준으로 내장 테마는 claude, commerce, example, fukasawa, fuwari, game, gitbook, heo, hexo, landing, magzine, matery, medium, movie, nav, next, nobelium, photo, plog, proxio, simple, starter, typography입니다.

  • 기본값은 일반적으로 simple입니다. blog.config.js의 THEME 작성 방식과 맞추면 됩니다.

  • example은 주로 테마와 설정 참고 예시입니다. 운영 사이트에서는 simple, hexo, heo, fuwari, claude 같은 다른 테마를 더 자주 선택합니다.

  • 폴더명은 magzine입니다. 영문 magazine과 철자가 다르므로 틀리지 마세요.

  • 각 테마의 개인화 옵션과 미리보기 방식은 테마 설정 문서를 참고하세요. 로컬 또는 fork의 themes/가 공식 저장소와 다르다면 실제 디렉터리를 기준으로 삼으세요.

  • blog.config.js 파일에서 process.env.NEXT_PUBLIC_THEME 같은 형식을 볼 수 있습니다. 이는 해당 매개변수를 Vercel 환경 변수로 설정할 수 있다는 뜻입니다. 기본 테마는 simple입니다. 페이지에 테마 전환 메뉴를 표시하려면 저장소의 conf/widget.config.js에서 THEME_SWITCH를 설정할 수 있습니다. 환경 변수 NEXT_PUBLIC_THEME_SWITCH도 사용할 수 있습니다.

JavaScript
NOTION_PAGE_ID: process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5',
THEME: process.env.NEXT_PUBLIC_THEME || 'simple', // Default theme, consistent with blog.config.js
LINK: process.env.NEXT_PUBLIC_LINK || '/user-guide/intro', // Site domain
  • 사이트는 먼저 환경 변수 설정을 읽고, 그다음 파일 안의 설정을 읽습니다.

💡

관리 화면의 환경 변수로 설정하는 장점: 일부 민감 정보는 코드에 직접 쓰기에 적합하지 않습니다. 예를 들어 서드파티 플러그인의 key는 환경 변수로 설정하는 것을 권장합니다.

Vercel 환경 변수 설정 방법(클릭하여 펼치기)

  1. 프로젝트 홈에서 Settings를 클릭하고 Environment Variables를 선택해 환경 변수를 설정합니다. Untitled

  2. Setting -> Environment Variables로 이동합니다. Untitled

  3. Key에는 설정 이름을, Value에는 설정 값을 입력합니다. 4DA432EF-AC19-46EA-AF59-DD0BC45C6483.jpeg

  4. 환경 변수를 수정한 뒤 상단의 Deployments 탭을 클릭하고 목록 맨 위의 배포 기록을 Redeploy합니다. Untitled

수정 예시 ​

key는 어떻게 알 수 있나요? ​

blog.config.js 파일에는 많은 설정 항목이 있습니다. 설정 항목 중 process.env.``**NEXT_PUBLIC_THEME** 같은 구조에서 굵게 표시된 부분이 key 이름입니다. 예를 들어 다음 설정은 현재 저장소의 기본 테마가 simple임을 뜻합니다. 환경 변수로 hexo 등으로 바꿀 수 있습니다.

JavaScript
THEME: process.env.NEXT_PUBLIC_THEME || 'simple', // Default theme

테마를 hexo로 바꾸려면 해당 환경 변수를 추가하면 됩니다.

key 예시 2 ​

같은 방식으로 사이트 연락 이메일 주소를 수정하는 예를 보겠습니다. blog.config.js의 이메일 주소 설정은 다음과 같습니다.

JavaScript
CONTACT_EMAIL: process.env.NEXT_PUBLIC_CONTACT_EMAIL || ''  // Fill in email address

설정을 직접 수정한다면 다음과 같습니다.

JavaScript
CONTACT_EMAIL: process.env.NEXT_PUBLIC_CONTACT_EMAIL || '123456@qq.com'  // Fill in email address

파일은 수정하지 않고 환경 변수만 바꾸려면 아래 환경 변수를 추가하면 됩니다.

VPS 로컬 배포에서 환경 변수 설정 ​

Vercel 호스팅이 아니라 자신의 서버에 배포한다면 프로젝트 루트 디렉터리의 .env.local 파일에 환경 변수를 직접 추가하면 됩니다.

JavaScript
# Environment variables @see https://www.nextjs.cn/docs/basic-features/environment-variables
NOTION_PAGE_ID=xxxxxxxx
NEXT_PUBLIC_THEME=simple
NEXT_PUBLIC_LINK=http://xxx.com

4. 테마별 개인화 설정 ​

각 테마에는 고유한 개인화 설정이 있습니다. 예를 들어 Hexo 테마 홈에는 전용 환영 문구가 있습니다.

hi, I am a programmer

이 문구는 어떻게 바꿀까요? 해당 테마 설명 문서를 확인해야 합니다. 이 문서 튜토리얼의 테마 설정 부분을 참고하세요.

원문 링크 ​

https://docs.tangly1024.com/article/how-to-config-notion-next