/
get-started.mdx.backup
92 lines (71 loc) · 3.08 KB
/
get-started.mdx.backup
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
# Get Started
## Quick Start with Vercel
You can start by creating your own Nextra site and deploying to Vercel by clicking the link:
[![](https://vercel.com/button)](https://vercel.com/new/clone?demo-description=Markdown%20powered%20docs%20site.%20Built%20with%20Next.js.&demo-image=https%3A%2F%2Fnextra.vercel.app%2Fdemo.png&demo-title=Documentation%20Starter%20Kit&demo-url=https%3A%2F%2Fnextra.vercel.app%2F&project-name=nextjs-docs&repository-name=nextjs-docs&s=https%3A%2F%2Fgithub.com%2Fshuding%2Fnextra&from=templates)
Vercel will create the Nextra repository and deploy the site for you with just a few clicks.
Once done, every change in the repository will be deployed automatically.
## Create Manually
Nextra works like a Next.js plugin, and it accepts a theme config (layout) to render the page. To start:
1. Install Next.js, Nextra and React: `yarn add next nextra react react-dom`
2. Install the docs theme (you can use any theme you like): `yarn add nextra-theme-docs`
3. Create the following Next.js config:
```js filename="next.config.js"
const withNextra = require('nextra')({
theme: 'nextra-theme-docs',
themeConfig: './theme.config.jsx'
// optional: add `unstable_staticImage: true` to enable Nextra's auto image import
})
module.exports = withNextra()
```
4. Create a `theme.config.jsx` file for the docs theme:
```jsx filename="theme.config.jsx"
export default {
projectLink: 'https://github.com/shuding/nextra', // GitHub link in the navbar
docsRepositoryBase: 'https://github.com/shuding/nextra/blob/master', // base URL for the docs repository
nextLinks: true,
prevLinks: true,
search: true,
customSearch: null, // customizable, you can use algolia for example
darkMode: true,
footer: true,
footerText: `MIT ${new Date().getFullYear()} © Shu Ding.`,
footerEditLink: `Edit this page on GitHub`,
logo: (
<>
<svg>...</svg>
<span>Next.js Static Site Generator</span>
</>
),
head: (
<>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Nextra: the next docs builder" />
<meta name="og:title" content="Nextra: the next docs builder" />
</>
)
}
```
import { Callout } from 'nextra-theme-docs'
<Callout>
More configuration options for the docs theme can be found
[here](/themes/docs/configuration).
</Callout>
5. Create `pages/_app.jsx` and include the theme stylesheet:
```jsx filename="_app.jsx"
import 'nextra-theme-docs/style.css'
export default function Nextra({ Component, pageProps }) {
return <Component {...pageProps} />
}
```
6. You are good to go! Run `yarn next` to start.
---
<span id="sidebar-and-anchor-links" />
<Callout>
Any `.md` or `.mdx` file will turn into a doc page and be displayed in
sidebar. You can also create a `meta.json` file to customize the page order
and title. <br /> Check the source code: https://github.com/shuding/nextra for
more information.
</Callout>
<Callout>
You can also use [`<style jsx>`](https://nextjs.org/docs/basic-features/built-in-css-support#css-in-js) to style elements inside `theme.config.jsx`.
</Callout>