문서 테마

설치

Nextra 문서 사이트를 수동으로 만들려면 Next.js, React, Nextra, Nextra Docs Theme를 설치해야 합니다. 프로젝트 디렉토리에서 다음 명령을 실행하여 의존성을 설치하세요:

npm i next react react-dom nextra nextra-theme-docs

package.json에 다음 스크립트를 추가하세요:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
},

예를 들어 npm을 사용한다면 npm run dev로 개발 모드에서 서버를 시작하거나, 프로덕션 모드에서는 npm run build && npm run start로 시작할 수 있습니다.

Next.js 설정 추가

프로젝트의 루트 디렉토리에 다음과 같은 next.config.js 파일을 만드세요:

const withNextra = require("nextra")({
  theme: "nextra-theme-docs",
  themeConfig: "./theme.config.jsx",
});
 
module.exports = withNextra();
 
// 다른 Next.js 설정이 있다면 매개변수로 전달할 수 있습니다:
// module.exports = withNextra({ /* 다른 next.js 설정 */ })

위의 설정으로 Nextra는 지정된 테마로 Next.js 프로젝트의 Markdown 파일을 처리할 수 있습니다. 다른 Nextra 설정은 가이드에서 찾을 수 있습니다.

문서 테마 설정 생성

마지막으로, 프로젝트의 루트 디렉토리에 해당하는 theme.config.jsx 파일을 만드세요. 이는 Nextra 문서 테마를 구성하는 데 사용됩니다:

export default {
  logo: <span>내 Nextra 문서</span>,
  project: {
    link: "https://github.com/shuding/nextra",
  },
  // ... 기타 테마 옵션
};

전체 테마 구성은 여기에서 찾을 수 있습니다.

준비 완료!

이제 pages/index.mdx로 첫 번째 MDX 페이지를 만들 수 있습니다:

# Nextra에 오신 것을 환영합니다
 
안녕하세요, 여러분!

그리고 package.json에 지정된 next 또는 next dev 명령을 실행하여 프로젝트 개발을 시작하세요! 🎉