반응형 Nextra14 [Nextra] FileTree, Steps, Mermaid사용 Nextra에서 FileTree, Steps, Mermaid사용FileTree 컴포넌트의 사용방법import { FileTree } from "nextra-theme-docs"; 출력결과Steps 컴포넌트의 사용방법import { Steps } from "nextra-theme-docs"; ### Step1Step1의 내용이다.### Step2Step2의 내용이다.출력결과Mermaid```mermaidgraph TD;subgraph AA [Consumers]A[Mobile app];B[Web app];C[Node.js client];endsubgraph BB [Services]E[REST API];F[GraphQL API];G[SOAP API];endZ[GraphQL A.. 2023. 6. 22. [Nextra] Callout 컴포넌트 Nextra에서 Callout 컴포넌트Nextra에서 Callout 컴포넌트는 읽는 사람에게 중요한 정보를 보여주는 기본 제공 컴포넌트이다. Callout 컴포넌트의 사용방법 Default(기본)import { Callout } from 'nextra/components' **스페이스 인베이더**는 니시카도 토모히로가 개발한 1978년 아케이드 게임입니다.출력결과Info(정보)import { Callout } from 'nextra/components' 오늘은 금요일이에요.출력결과Warning(경고)import { Callout } from 'nextra/components' 이 API는 곧 더 이상 사용되지 않습니다.출력결과Error(에러)import { Callout } from 'next.. 2023. 6. 21. [Next.js] Nextra 파일 구성 [Next.js] Nextra에서 파일 및 페이지 구성Nextra는 먼저 페이지 디렉토리에서 모든 Markdown 파일 및 구성을 수집한 다음 전체 사이트의 "페이지 맵 정보"를 생성하여 아래의 탐색 모음 및 사이드바와 같은 항목을 렌더링한다. 기본 동작기본적으로 페이지 맵에는 모든 .md 및 .mdx 파일 이름과 디렉토리 구조가 알파벳 순으로 정렬되어 있다. 그런 다음 Nextra는 제목 패키지를 사용하여 파일 이름에서 형식이 지정된 페이지 이름을 가져온다.예를 들어 다음과 같은 구조를 가진 경우pages/ contact.md index.mdx about/ legal.md index.mdx 페이지 맵은 다음과 같다. (모든 이름이 알파벳 순으로 정렬된다.)[ { "name": ".. 2023. 6. 20. [Next.js] Nextra를 사용한 문서화 [Next.js] 문서화를 위한 Nextra를 설치 및 시작Nextra는 Next.js를 기반으로 하는 프레임워크로 컨텐츠 중심의 웹사이트를 구축할 수 있다.Next.js의 모든 기능과 Markdown 기반 컨텐츠를 쉽게 생성할 수 있는 추가 기능이 있다. 1. Next 프로젝트 설치Next.js, React, Nextra 및 Nextra Docs Theme를 설치해야 한다.먼저 프로젝트를 설치하고자 하는 디렉토리에서 아래 명령어를 실행하여 Next.js 프로젝트 폴더를 설치한다.# npx 사용npx create-next-app@latest "프로젝트 이름"# pnpm 사용pnpm create next-app "프로젝트 이름"# yarn 사용yarn create next-app "프로젝트 이름" 이후 아.. 2023. 6. 19. 이전 1 2 다음 반응형
