Cài đặt

Cài đặt

Để tạo một trang Nextra Docs một cách thủ công, bạn phải cài đặt Next.js, React, Nextra V3 alpha, và Nextra Docs Theme V3 alpha. Trong thư mục dự án của bạn, chạy lệnh sau để cài đặt các phụ thuộc:

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

pnpm add next react react-dom nextra@alpha nextra-theme-docs@alpha

yarn add next react react-dom nextra@alpha nextra-theme-docs@alpha

bun add next react react-dom nextra@alpha nextra-theme-docs@alpha

Thêm các tập lệnh sau vào package.json:

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

Bạn có thể chạy project sử dụng npm npm run dev, chạy ở chế độ phát triển hoặc npm run build && npm run start cho chế độ production.

Thêm cấu hình Next.js

Tạo tệp next.config.js sau trong thư mục gốc của dự án:

const withNextra = require('nextra')({
  theme: 'nextra-theme-docs',
  themeConfig: './theme.config.jsx',
});
 
module.exports = withNextra();
 
// Nếu bạn có các cấu hình Next.js khác, bạn có thể truyền chúng làm tham số:
// module.exports = withNextra({ /* cấu hình next.js khác */ })

Với cấu hình trên, Nextra có thể xử lý các tệp Markdown trong dự án Next.js của bạn, với chủ đề được chỉ định. Các cấu hình Nextra khác có thể được tìm thấy trong Hướng Dẫn.

Tạo cấu hình Docs Theme

Cuối cùng, tạo tệp theme.config.jsx tương ứng trong thư mục gốc của dự án. Điều này sẽ được sử dụng để cấu hình chủ đề Nextra Docs:

export default {
  logo: <span>Nextra Template</span>,
  project: {
    link: 'https://github.com/namnguyenthanhwork/nextra-personal-website-template',
  },
  // ... các tùy chọn chủ đề khác
};

Cấu hình chủ đề đầy đủ có thể được tìm thấy tại đây.

Sẵn sàng sử dụng

Bây giờ, bạn có thể tạo trang MDX đầu tiên của mình tại pages/index.mdx:

# Chào mừng đến với Nextra
 
Xin chào, thế giới!

Và chạy lệnh next hoặc next dev được chỉ định trong package.json để bắt đầu phát triển dự án! 🎉