NotionNext 문서

Appearance

다중 데이터베이스: 다국어 / 다중 섹션 ​

출처: 다중 데이터베이스: 다국어 / 다중 섹션 발행일: 2024-4-12 최종 편집: 2024-6-18 원래 섹션: 사이트 설정

동작 원리 ​

하나의 사이트 도메인이 여러 데이터베이스를 바인딩할 수 있으며, 각 데이터베이스는 자신의 콘텐츠와 테마 설정 정보를 가질 수 있습니다.

이전에는 NOTION_PAGE_ID가 하나만 가능했습니다. 새 버전에서는 하나의 사이트에 여러 데이터 소스를 설정할 수 있어 다국어 또는 다중 섹션 기능을 구현할 수 있습니다.

  • 구버전 NOTION_PAGE_ID
JavaScript
xxxxxxx
  • 새 버전 NOTION_PAGE_ID
JavaScript
xxxxxxx**,en:xxxxx,zh:xxxxx,blog:xxxxxx,product:xxxxx,docs:xxxxxx**

적용 시나리오 ​

두 가지 방식으로 사용할 수 있습니다.

  1. 프로젝트 공식 사이트나 브랜드 공식 사이트처럼 서로 다른 언어 사용자에게 완전히 다른 콘텐츠를 보여줘야 하는 경우
  2. 하나의 사이트를 여러 하위 섹션으로 나누고, 경로에 따라 어떤 섹션의 데이터를 방문할지 구분해야 하는 경우

효과 미리보기 ​

UntitledUntitled

  • 자동 다국어 리다이렉트:

최신 버전에서는 기본적으로 꺼져 있습니다. 켜려면 NOTION_CONFIG에 REDIRECT_LANG=true를 추가하세요.
홈에 접근하면 사용자의 기본 언어를 감지해 자동으로 이동합니다. 기본 언어는 사용자 브라우저의 선호 언어(window.navigator.language)에서 가져옵니다. 예를 들어 브라우저 기본 언어가 영어라면 /en 디렉터리로 이동합니다. 그렇지 않으면 자동 이동하지 않으며, 사용자는 메뉴에서 직접 언어를 선택해 전환할 수 있습니다.

Untitled

  • 이론적으로 무수히 많은 언어를 설정할 수 있습니다.

사용 방법 ​

주의: 다국어 기능은 정적 내보내기 배포 방식을 지원하지 않습니다. 예: yarn export, Cloudflare Pages, 4Everland 등은 여러 언어를 지원하지 않습니다.

정적 내보내기를 사용해야 한다면 여러 도메인 사이트로 해결할 수 있습니다. 예: xxx.cn, xxx.en, xxx.jp 같은 서로 다른 도메인을 만들거나 cn.xxx.com, jp.xxx.com 같은 2차 도메인을 사용합니다.

1. 사이트에 여러 데이터베이스 준비 ​

언어 하나에 데이터베이스 하나를 준비합니다. 예를 들어 아래 두 개의 데모 데이터베이스를 준비할 수 있습니다.

Notion Blog - EN | Notion

NotionNext Blog

Notion Blog | Notion

NotionNext로 만든 블로그입니다.

2. NOTION_PAGE_ID 설정 ​

blog.config.js에서 NOTION_PAGE_ID를 여러 값으로 설정합니다(영문 쉼표로 구분).

예: '02ab3b8678004aa69e9e415905ef32a5,**en:7c1d570661754c8fbc568e00a01fd70e**'

Untitled

첫 번째 PAGE_ID는 기본 주 언어로 간주되며, 이전 NotionNext 사용 방식과 동일합니다.

쉼표 뒤의 ID는 언어명으로 시작하고 ID 사이를 영문 콜론:으로 구분해야 합니다. 예를 들어 en:xxxx는 영어 사이트가 xxxx 데이터베이스를 사용한다는 뜻이며, 사이트의 [domain.com]/en에 접근하면 데이터는 xxxx 데이터베이스에서 읽습니다.

3. 경로와 데이터베이스 매핑 ​

다국어 예시 ​

위 규칙에 따라 더 많은 언어를 만들 수 있습니다.

4개 언어를 지원하는 사이트를 만든다고 가정해 봅니다. 기본 언어는 일본어이고, 중국어, 영어, 스페인어 전환을 지원하려면 어떻게 설정할까요?

먼저 네 개의 대응 데이터베이스를 준비합니다.

그런 다음 NOTION_PAGE_ID에 다음처럼 설정합니다.

JavaScript
NOTION_PAGE_ID = 'xxJPxx,en:xxENxx,zh:xxZHxx,es:xxESxx'

이렇게 하면 완료됩니다.

하위 섹션 사용법 ​

여기서 경로 이름은 표준 언어명이 아니어도 되며, 임의의 영어 단어를 사용할 수 있습니다. 이 방식으로 하위 섹션 업무를 구분할 수 있습니다.

예:

Notion Config의 기능과 결합하면 각 섹션에 서로 다른 테마를 설정할 수 있습니다.

4. 언어 전환 ​

사용자를 해당 언어 경로로 이동시키면 됩니다. 예를 들어 기본 언어가 중국어라면, 사용자가 클릭했을 때 영어 경로 /en으로 이동하는 메뉴를 만들면 됩니다.

다만 다국어 메뉴 처리는 조금 특수합니다. /en, /zh, /jp 같은 상대 경로를 메뉴 slug로 쓰면 안 되고, 전체 경로를 사용해야 합니다.

예를 들어 기본 중국어 홈이 https://preview.tangly1024.com/라면 영어로 전환하려면 slug가 https://preview.tangly1024.com/en인 메뉴를 만들어야 합니다. 그렇지 않으면 전환이 비정상적으로 동작할 수 있습니다.

기타 ​

왜 이런 다중 데이터베이스 방식으로 구현하나요? ​

사이트의 모든 버튼, 메뉴, 안내 문구, 글 콘텐츠를 서로 다른 언어 버전으로 설정해야 한다고 생각하면 두 가지 방식이 있습니다.

  1. 데이터베이스에 언어 구분 필드를 추가하는 방식. 예: 데이터에 English 태그를 붙임
  2. 하나의 사이트가 여러 데이터베이스를 바인딩하도록 하는 방식, 즉 다중 데이터 소스 방식

첫 번째 방식은 단일 Notion 데이터베이스 템플릿이 지나치게 크고 복잡해져 유지보수가 어려워질 수 있습니다.

따라서 “다중 데이터 소스” 방식을 사용합니다. 하나의 NotionNext 사이트가 여러 Notion 데이터베이스를 바인딩하고, 사용자의 언어 지역 또는 선택 언어에 따라 해당 데이터베이스의 콘텐츠를 자동으로 전환해 표시합니다. 장점은 다음과 같습니다.

  1. 차별화 운영: 대상 사용자에 따라 메뉴 수와 내용, 글 내용과 수를 완전히 다르게 표시할 수 있어 지역별 맞춤 운영이 쉽습니다.
  2. 각 데이터베이스가 독립적이므로 단일 데이터베이스의 내용이 더 적고 유지보수하기 쉽습니다. 기존 데이터베이스에 “언어” 필드를 새로 추가하지 않아도 되므로 다국어가 필요 없는 사용자에게도 더 자연스럽습니다.
  3. 이론적으로 하나의 사이트에 무수히 많은 언어를 설정할 수 있습니다. 사이트 확장성이 더 강해지고, 하나의 사이트가 여러 데이터 세트를 연결해 더 많은 가능성을 만들 수 있습니다. 다국어 경로는 /en/article/test.html, /zh, /jp 같은 언어 prefix뿐 아니라 다른 다양한 형식도 가능합니다. 이를 활용해 여러 하위 섹션을 만들고 각 섹션마다 서로 다른 테마, 설정, 기능을 지정할 수도 있습니다. 물론 여러 2차 도메인 사이트를 만들어도 됩니다.

원문 링크 ​

https://docs.tangly1024.com/article/notion-next-mulity-languages