nextra
约 2 分钟阅读
- 支持 SSG, SSR, ISR
- shuding/nextraGitHubshuding/nextra支持 SSG, SSR, ISR · shuding/nextra · Next.js Static Site Generator · remark · 高亮 shikijs · markdown 由 nextra/loader 处理 · https://nextra.site/showcase笔记:nextra
- Next.js Static Site Generator
- remark
- 高亮 shikijsGitHubshikijs/shiki
- markdown 由 nextra/loaderGitHub 文件shuding/nextra/packages/nextra/src/loader.ts支持 SSG, SSR, ISR · shuding/nextra · Next.js Static Site Generator · remark · 高亮 shikijs · markdown 由 nextra/loader 处理 · https://nextra.site/showcase笔记:nextra 处理
- nextra.site/showcase
- templates
- 参考
- 不支持 app layout #2023GitHub Issueshuding/nextra#2023
- 但 app 和 pages 可以共存
- 暂不支持 turbopack #1054GitHub Issueshuding/nextra#1054
- Nextra 3 #1421GitHub Issueshuding/nextra#1421
- ESM only
pnpm add next react react-dom
pnpm add nextra nextra-theme-{docs,blog}
pnpm run next dev依赖包nextnpm 包nextNPMreactnpm 包reactNPMreact-domnpm 包react-domNPMnextranpm 包nextraNPMnextra-theme-{docs,blog}npm 包nextra-theme-{docs,blog}NPM
- /
- theme.config.{jsx,tsx}
- pages/
- index.{md,mdx}
- _meta.json
- title 映射
- 顺序
markdown
GFM
## 标题 [#title]- 高亮语言
- VSCode TextMate Grammar
- shikijs/shiki/docs/languages.mdGitHub 文件shikijs/shiki/docs/languages.md
docs
theme.config.jsx
// https://nextra.site/docs/docs-theme/theme-configuration
export default {
logo: <span>My Nextra Documentation</span>,
project: {
link: 'https://github.com/wenerme/wener',
},
};_meta.json
{
"index": {
"title": "Home",
"type": "page",
"theme": {
"layout": "raw",
"typesetting": "article",
"breadcrumb": false,
"footer": true,
"sidebar": false,
"toc": true,
"pagination": false
}
},
"contact": {
"display": "hidden"
},
"about": "About Us",
"github_link": {
"title": "Wener Github",
"href": "https://github.com/wenerme",
"newWindow": true
},
"company": {
"title": "Company",
"type": "menu",
"items": {
"about": {
"title": "About",
"href": "/about"
},
"contact": {
"title": "Contact Us",
"href": "mailto:[email protected]"
}
}
},
"*": {
"type": "page"
},
"---": {
"type": "separator"
}
}- typesetting - default, article
- layout - raw, full
Notes
- 内容目录 ./content, ./src/content
- 默认后缀 js, jsx, ts, tsx, md mdx
- env
- NEXTRA_LOCALES
- NEXTRA_DEFAULT_LOCALE
- 通过插件 resolve 的虚拟 module
- private-next-root-dir
- private-next-content-dir
- 核心逻辑 loader - webpack loader
- findMetaAndPageFilePaths
- 内容目录
**/_meta.{js,jsx,ts,tsx},**/*.{md,mdx} - appDir 目录
- 会额外扫描
**/page.{js,jsx,jsx,tsx,md,mdx},_meta.global.{js,jsx,ts,tsx} - 会排除
_开头目录
- 会额外扫描
- 内容目录
const { pageMap, mdxPages } = convertToPageMap({filePaths})_meta.global.convertPageMapToJs({ pageMap, mdxPages, globalMetaPath })
- findMetaAndPageFilePaths
- 构建的 pageMap 会通过
placeholder.js访问{pageMap: PageMapItem[]}
type TPageItem = { name: string; route: string; __pagePath: string };
type TMetaItem = { __metaPath: string };
interface TFolder<T = TItem> {
name: string;
route: string;
children: T[];
}
export type TItem = TPageItem | TMetaItem | TFolder;
export type PageMapItem = Folder | MdxFile | MetaJsonFile;
export interface Folder<FileType = PageMapItem> {
name: string;
route: string;
children: FileType[];
}
export type MdxFile<FrontMatterType = FrontMatter> = {
name: string;
route: string;
frontMatter?: FrontMatterType;
};
export type MetaJsonFile = {
data: {
[fileName: string]: Meta;
};
};Nextra v4
- NextJS 15 app route
- React 19
关联信息
反向链接、本文链接的其他页面和外部资料。
参考资料
GitHub9 条
- nextapps-de/flexsearchgithub.com/nextapps-de/flexsearch
- shikijs/shikigithub.com/shikijs/shiki
- shikijs/shiki/docs/languages.mdgithub.com/shikijs/shiki/blob/main/docs/languages.md
- shuding/nextragithub.com/shuding/nextra
- shuding/nextra-docs-templategithub.com/shuding/nextra-docs-template
- shuding/nextra/packages/nextra/src/loader.tsgithub.com/shuding/nextra/blob/core/packages/nextra/src/loader.ts
- shuding/nextra#1054github.com/shuding/nextra/issues/1054
- shuding/nextra#1421github.com/shuding/nextra/issues/1421
- shuding/nextra#2023github.com/shuding/nextra/issues/2023
其他外链2 条
- nextra.site/aboutnextra.site/about
- nextra.site/showcasenextra.site/showcase