문서
시작하기

시작하기

⚠️
이 테마에 대한 문서는 현재 작성 중입니다.
💡

블로그 테마의 예시는 여기 (opens in a new tab)에서 확인할 수 있으며, 소스 코드는 여기 (opens in a new tab)에 있습니다.

Docs 테마와 유사하게, 다음 명령어로 블로그 테마를 설치할 수 있습니다:

템플릿에서 빠르게 시작하기

새 프로젝트로 시작하기

설치

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

npm i next react react-dom nextra nextra-theme-blog
💡

프로젝트에 이미 Next.js가 설치되어 있다면, nextranextra-theme-blog만 추가로 설치하면 됩니다.

Next.js 설정 추가

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

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

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

블로그 테마 설정 생성

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

theme.config.jsx
export default {
  footer: <p>MIT 2023 © Nextra.</p>,
  head: ({ title, meta }) => (
    <>
      {meta.description && (
        <meta name="description" content={meta.description} />
      )}
      {meta.tag && <meta name="keywords" content={meta.tag} />}
      {meta.author && <meta name="author" content={meta.author} />}
    </>
  ),
  readMore: "Read More →",
  postFooter: null,
  darkMode: false,
  navs: [
    {
      url: "https://github.com/shuding/nextra",
      name: "Nextra",
    },
  ],
};

준비 완료!

이제 package.json에 지정된 next 또는 next dev 명령어를 실행하여 프로젝트 개발을 시작할 수 있습니다! 🎉