Быстрый старт

⚠️

Документация по этой теме находится в разработке.

💡

Смотрите пример темы для блога (opens in a new tab) и исходный код (opens in a new tab).

Вы можете установить и настроить тему для блога аналогично теме для документации:

Новый проект

Установка

Для того, чтобы создать Nextra Blog вручную необходимо проинсталлировать Next.js, React, Nextra, и Nextra Blog Theme. Для этого в директории с вашим проектом установите зависимости:

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

💡

Если в вашем проекте Next.js уже установлен, вам потребуется проинсталлировать nextra и nextra-theme-blog в качестве дополнений (add-ons).

Создайте Next.js Config

В корневой директории создайте файл 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 сможет обрабатывать Markdown файлы в вашем Next.js проекте, учитывая специфику темы. Другие конфигурации Nextra вы можете посмотреть в Настройках.

Создайте конфигурационный файл

В корневой директории вашего проекта создайте конфигурационный файл theme.config.jsx. Он применит конфигурацию темы для блога:

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'
    }
  ]
}

На этом все!

Теперь вы можете запустить свой проект. 🎉
Используйте команды next или next dev, которые указаны в вашем package.json.

Тема для блога Пользовательская тема