[Next.js] Nextra 파일 구성

[Next.js] Nextra에서 파일 및 페이지 구성

Nextra는 먼저 페이지 디렉토리에서 모든 Markdown 파일 및 구성을 수집한 다음 전체 사이트의 "페이지 맵 정보"를 생성하여 아래의 탐색 모음 및 사이드바와 같은 항목을 렌더링한다.

 

기본 동작

기본적으로 페이지 맵에는 모든 .md 및 .mdx 파일 이름과 디렉토리 구조가 알파벳 순으로 정렬되어 있다.

그런 다음 Nextra는 제목 패키지를 사용하여 파일 이름에서 형식이 지정된 페이지 이름을 가져온다.

예를 들어 다음과 같은 구조를 가진 경우

pages/
  contact.md
  index.mdx
  about/
    legal.md
    index.mdx

 

페이지 맵은 다음과 같다. (모든 이름이 알파벳 순으로 정렬된다.)

[
  {
    "name": "About",
    "children": [{ "name": "Index" }, { "name": "Legal" }]
  },
  { "name": "Contact" },
  { "name": "Index" }
]

글로벌 페이지 맵은 Nextra에 의해 각 페이지에 번들로 제공돤다.

이후, 구성된 테마는 해당 페이지 맵으로 실제 UI를 렌더링한다.

 

 

_meta.json

파일 이름을 사용하는 대신 각 페이지의 제목을 사용자 정의하는 것이 매우 일반적이다.

예를 들어, "Index"라는 제목의 페이지가 있는 대신 "Home"이라는 제목의 페이지가 있는 것은 의미가 없다.
여기서 _meta.json이 등장한다.

Nextra에서 사이트와 페이지 구조는 함께 위치한 _meta.json 파일을 통해 구성할 수 있다.

각 디렉토리에 _meta.json 파일을 둘 수 있으며, 이 파일은 아래와 같이 각 페이지의 기본 구성을 재정의하는 데 사용된다.

pages/
  _meta.json
  contact.md
  index.mdx
  about/
    _meta.json
    legal.md
    index.mdx

 

아래와 같이 pages/_meta.json 파일에 저장할 수 있다.

{
  "index": "My Homepage",
  "contact": "Contact Us",
  "about": "About Us"
}

위 파일은 Nextra에게 각 페이지의 순서와 올바른 제목을 알려준다.

 

추가로 제목을 사용하여 이 작업을 수행하고 다른 구성도 포함할 수 있다.

{
  "index": "My Homepage",
  "contact": "Contact Us",
  "about": {
    "title": "About Us",
    "...extra configurations...": "..."
  }
}

추가 구성은 추가 정보로 테마에 전달된다.

 

추가 구성에 대한 자세한 내용은 아래 링크에서 확인이 가능하다.

https://nextra.site/docs/docs-theme/page-configuration

Page Configuration – Nextra