从零搭建一个基于React+Nextjs的SSR网站(三)：在Next项目中使用markdown

最新推荐文章于 2024-02-07 15:13:42 发布
VIP文章 最新推荐文章于 2024-02-07 15:13:42 发布
阅读量2.3k 收藏 2
点赞数
分类专栏： javascript es6 react Nextjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35087256/article/details/86027330
版权

PS: 如果你有疑惑，可以给我留言，咱们一起解决它。

从零搭建一个基于React+Nextjs的SSR网站(一)：写在前面
从零搭建一个基于React+Nextjs的SSR网站(二)：在Nextjs项目中增加react+redux
从零搭建一个基于React+Nextjs的SSR网站(三)：在Next项目中使用markdown
从零搭建一个基于React+Nextjs的SSR网站(四)：如何搭建服务器并部署Nextjs项目

正文

github很多开源markdown工具，比如react-markdown,marked等等。

可以选择一个自己喜欢的，我这里用的marked。

代码中使用也比较方便：

import marked from 'marked'
最低0.47元/天 解锁文章
邵天宇Soy
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2020年开发人员博客入门者（Next.js + React + TypeScript + Markdown +语法突出显示）-JavaScript开发
05-26
2020年开发人员博客入门（Next.js + React + TypeScript + Markdown +语法突出显示）Devii 2020年开发人员博客入门。Next.js+ React + TypeScript + Markdown +语法突出显示+ SEO + RSS生成（如果您感到满意）您知道吗，加星标@vriad这个2020年开发博客初学者的回购协议。直接使用基于Markdown的静态站点生成器：只需将新博客帖子添加到/ md / blog支持导出到完全静态资产（由Next.js提供支持）热重载（由Next.js提供支持）使在React + TypeScript Provid中轻松编写自定义页面/代码变得容易
react css异步加载,React Next.js基本配置（antd按需加载，next支持原本的css）
weixin_35458714的博客
08-03 436
1、全局安装命令行工具npm install -g create-next-app2、使用命令建立项目npx create-next-app project3、查看是否成功创建next项目cd projectyarn dev4、让next支持cssyarn add @zeit/next-css配置：根目录下新建next-config.js复制代码进去：const withCss = require...
next.js + react基础（持续更新）
weixin_56478633的博客
02-04 825
一个组件就是用户界面的一部分，拥有自己的逻辑和外观，组件之间可以互相嵌套，也可以多次复用【自定义组件首字母要大写，否则不起作用】/* 页面是路由独有的 UI。您可以通过从 page.js 文件导出组件来定义页面。使用嵌套文件夹定义路由，并使用 page.js 文件使路由可公开访问。*/// 绑定事件报错，添加使用客户端use client【允许在客户端（浏览器中）渲染 React 组件】// 引入css// 引入useState// 自定义组件首字母要大写，否则不起作用return (
React Next.js项目中Ant Design与Tailwind CSS样式冲突问题
最新发布
weixin_68615235的博客
02-07 351
新开了一个同时安装tailwind和antd的next.js项目，发现运行起来时部分组件会产生样式冲突，例如antd Button，在使用过程中按钮颜色默认为透明。
20231212基于react的next.js v生产级全站框架整合styled-components，实现CSS-in-JS，将CSS样式集成到React组件中。
zrc_xiaoguo的博客
12-12 1515
styled-components是一个流行的CSS-in-JS库，它允许您在React应用程序中编写CSS代码，并以组件方式管理样式。以下是styled-components的详细介绍：基于组件：styled-components将CSS样式集成到React组件中，使得样式与组件一起工作。这种风格可以更清晰地表达组件的样式，并提高组件的可重用性。动态CSS：相比于传统CSS，styled-components具有更高的灵活性，可以在组件中使用动态属性。
next实现import导入css
大山博客
03-16 1038
遇到的问题： React Next中使用 import "../static/nav.css"; 报错 解决方案： 安装 @zeit/next-css 包 两种安装方式： npm install --save @zeit/next-css yarn add @zeit/next-css 编写配置文件next.config.js(next的总配置文件)，导入下面代码即可， const withC...
next.js博客搭建_react-markdown渲染内容（第三步）
热门推荐
编程知识分享，主打前端
06-22 3万+
大家好，我是yma16，本期给大家分享next项目中使用react-markdown渲染内容。该系列的往期文章博客搭建_初始化next项目博客搭建_登录注册。
在Next.js渲染Markdown竟然如此简单
远小帅的博客
12-19 1277
在这篇文章中，我详细介绍了如何在 Next.js 中渲染 Markdown 和 MDX 文件。希望这篇文章能够帮助你更好地理解和使用 Markdown 和 MDX 在 Next.js 中的应用，为你的开发工作带来便利。下一篇文章我将开发一个具有 SEO 优化的博客实战项目，使用 MDX 渲染，有感兴趣的小伙伴可以关注一下。
使用 Next.js 开发个人博客的一点记录
GoldenaArcher的博客
04-24 1768
使用 Next.js 开发个人博客的一点记录 其实是要帮学校的某个 club 写官网，最终会使用学校的服务器进行部署，所以也就不考虑 hexo+GitHub 这样的实现方法了。 经过一番搜索之后，最终决定使用 Next.js 作为服务端渲染，读取本地 Markdown 的，以及使用图床三管齐下结合的方式进行实现。 下面解释一下为什么使用 Next.js，markdown 和 图床。 Next.js 可以使用 SSG 的方式进行渲染，俱乐部的文章内容等本身就不会更新的特别频繁，所以可以使用 SSG 加上重
react中使用markdown组件——react-md-editor
weixin_42737733的博客
04-23 2964
react中使用markdown组件 组件推荐（react-md-editor）：https://github.com/uiwjs/react-md-editor 在项目中使用过后是这样的，左侧内容可以默认，可以手动回填 简单介绍 下载依赖 npm i @uiw/react-md-editor 组件引入及使用 引入：import MDEditor from ‘@uiw/react-md-editor’; 引入左侧写入、右边展示的markdown，属性value为markdown文本 &lt
Next.js & create-react-app使用react-markdown
宏斌的博客
08-25 577
文章目录结论NEXT代码高亮需要手动复制js文件CRA封装代码 在next和CRA中使用方式不同 主要是因为 next用require() 而新版本的react-markdown https://github.com/remarkjs/react-markdown 结论 不用这个 换个好的 NEXT 解决：降级 降级到如下 "react-markdown": "^6.0.3", "react-syntax-highlighter": "^10.3.3", "rehype-raw": "^5.1.0", "
使用next.js的基于Markdown的博客，支持静态导出-JavaScript开发
05-26
使用next的基于next的Markdown博客。 它还使用processmd编译markdown文件并监视更改（免责声明：我的另一个项目）。 克隆此存储库，并将其用作您自己的博客的起点。 N个基于next的Markdown博客。 它还使用processmd编译markdown文件并监视更改（免责声明：我的另一个项目）。 克隆此存储库，并将其用作您自己的博客的起点。 注意：确保在首次启动npm之前运行npm run build：content。 安装依赖项npm install构建内容npm run build：content运行开发服务器npm start生产版本npm run build TODO添加RSS feed支持
nextblog使用nextjs实现一个基于Markdown的博客
08-10
next-blog 使用next.js实现一个基于Markdown的博客
nextjs-portfolio-starter:使用Next.js和Markdown轻松创建投资组合
03-25
投资组合入门套件 该产品组合是使用Next.js和一个名为的库构建的。 它使您可以编写Markdown并专注于投资组合的内容。 该启动器包括： 自动配置为处理Markdown / MDX 根据您的帖子生成RSS feed 开箱即用的精美主题 轻松分类带有标签的帖子 快速，优化的Web字体加载 配置 在theme.config.js更新您的名称或更改页脚。 在scripts/gen-rss.js更新RSS提要的名称和站点URL。 更新pages/_document.js的meta标签。 使用您自己的内容更新pages/posts/*.md内的pages/posts/*.md 。 自己部署 使用部署示例： 如何使用 使用或执行来引导示例： npx create-next-app --example blog my-blog # or yarn create next-app --
nextein：具有markdown的静态站点生成器+对Next.js有React
02-04
下一个 基于Next.js的静态网站生成器 | | 它是什么？ nextein是围绕一个包装next.js ，使您可以编写使用静态站点markdown和react 。 要求 v10.x的NodeJS +需要运行nextein命令。 入门套件 如果您想跳入入门项目，请检查 入门 您需要遵循一些步骤才能使网站与nextein运行 创建一个项目： mkdir my-site cd my-site npm init -y 安装依赖项 npm i nextein next react react-dom 添加next.config.js配置文件 const { withNextein } =
nextjs-prism-markdown:将Prism Markdown与Next.js结合使用的示例，包括切换语法突出显示主题
05-06
在Next.js中使用Prism 将Prism / Markdown与Next.js结合使用的示例，包括切换语法突出显示主题。
tm-nextjs-starter:React + Nextjs + MobX入门
05-14
截至2018年8月，这是我最小但仍可正常运行的React入门套件和演示应用程序。 如果您对Java脚本的疲劳感到厌倦，并且想快速而轻松地上手，请看一看。 开发现代化的SPA React应用程序并没有比这简单得多。 现场演示 ...
基于React+TS+Antd+NodeJS+MySQL实现的全栈项目实战【100012591】
06-05
NodeJS全栈开发之前端基于 React全家桶+TypeScript+Antd 构建用户界面，功能包括：登录，注册，找回密码，自动登录，登出，错误页面，todoList增删改查CRUD。
aluraquiz-react-nextjs:用于开发测验的项目React + Next
05-24
★项目名称使用React + NextJs的Alura Quiz⊕关于这个项目Next Js技术问答难题。 在alura浸没条件下开发。 :keyboard: 技术以下是此项目中使用的技术。 React下一个Java脚本 :umbrella: 使用的服务Github 威赛尔 :...
如何从零搭建一个react + TS的完整项目
05-31
搭建 React + TypeScript 项目的步骤如下： 1. 创建一个新的项目文件夹 ``` mkdir my-react-ts-app cd my-react-ts-app ``` 2. 初始化项目 ...以上就是从零搭建一个 React + TypeScript 的完整项目的步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值