如何在Next.js项目中使用Remark Markdown转换器
Next.js是一个用于服务器端渲染和静态项目的React.js框架。当构建一个将其内容存储在Markdown中的网站时,它易于使用并且效果非常好。称为动态路由的功能可在构建时生成路由,该功能可读取充满Markdown文件的目录并为每个文件生成单独的网页。
Remark-react是一个将Markdown转换为React的软件包,它可以与Next.js应用程序一起使用。它与remark-html不同,因为它不强制开发人员使用dangerouslySetInnerHTML
。
老实说,如果您想将Markdown与Next.js一起使用,建议您尝试remark-react。如果这样做,还应该注意以下几点:
Remark-react将使用该
<a>
组件创建所有链接,而在Next.js中,您应该使用中的<Link>
组件next/link
。
<Link>
在Next.js项目中使用适当的组件非常重要,因为它无需完全重定向即可更改页面和URL的内容,而当使用anchor(<a>
)标记时,页面将被重新加载,而React需要做一个完整的渲染-这可能导致您的应用程序性能下降并显示缓慢。
配置Next.js应用程序以正确使用remark-react
将Markdown添加到React转换
您将需要三个NPM软件包:
npm i -s unified remark-parse remark-react
添加它们后,将它们全部导入到您的React应用程序中:
import unified from 'unified';
import parse from 'remark-parse';
import remark2react from 'remark-react';
接下来,添加以下代码以将Markdown转换为React组件:
const content = unified()
.use(parse)
.use(remark2react)
.processSync(markdown).result;
从上面的代码块,您的Next.js应用程序现在应该将Markdown渲染到React中。
添加一个CustomLink
以处理本地和外部链接
现在,我们可以将一个自定义链接组件添加到remark-react配置中,以指示它使用该<Link>
组件进行本地链接,并使用该<a>
组件进行外部链接。
将一个新的组件添加customLink.js
到您的项目中,其内容如下:
import Link from 'next/link';
export default function CustomLink({ children, href }) {
// If the link is local it will start with a "/"
// Otherwise it'll be something like "https://"
return href.startsWith('/') || href === '' ? (
<Link href={href}>
<a>
{children}
</a>
</Link>
) : (
<a
href={href}
target="_blank"
rel="noopener noreferrer"
>
{children}
</a>
);
}
该CustomLink
组件将呈现<Link>
,如果href
通过在具有本地目标,如/about
,但会呈现一个<a>
,如果它有一个外部目标等https://dev.to
。
更新Markdown转换器以使用CustomLink
组件
最后,我们需要将Markdown to React代码更新为CustomLink
在呈现链接时使用该组件。这可以通过将配置对象添加到remark-react.use
行来完成:
const content = unified()
.use(parse)
.use(remark2react, {
remarkReactComponents: {
// Use CustomLink instead of <a>
a: CustomLink,
},
})
.processSync(markdown).result;
概要
这就是在Next.js项目中使用React-remark所需要做的一切。使用配置对象,您可以添加自定义组件,而不仅仅是锚HTML标签,以防万一您想将img
标签交换为更智能的内容(图像压缩?)。
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 如何在Next.js项目中使用Remark Markdown转换器
常见问题FAQ
- 没有金币/金币不足 怎么办?
- 本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
- 所有资源普通会员都能下载吗?
- 本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。