如何在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

该示例取自 GitHub

将Markdown添加到React转换

GitHub上的printMarkdown.js

您将需要三个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>组件进行外部链接。

GitHub上的customLink.js

将一个新的组件添加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;