首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

手把手教你用神器nextjs一键导出你的github博客文章生成静态html!

相信有不少小伙伴和我一样用github issues记录自己的blog,但是久而久之也发现了一些小问题,比如 国内访问速度比较慢 不能自定义主题样式等等 不能在博客中加入自己想要的功能 正好最近又在学nextjs...,react做ssr的神器,nextjs提供了next export这个命令,如果不熟悉next小伙伴可以先去官网阅读一下 nextjs.org/docs#static… nextjs的教程,推荐一下技术胖的免费视频教程...发起请求拉取自己github仓库里的博客,获取文章存成md格式本地。 根据nextjs的约定,把生成的md文章改写成jsx,写入到pages目录下。...(这样nextjs就会识别成为一个个路由) 根据自定的规则生成首页jsx,写入pages文件夹。 使用next export导出博客。...首先先用next脚手架生成一个项目,然后项目下建立builder文件夹,用来编写逻辑。

3.5K20

JavaScript错误处理完全指南

为了 从生成器中提取值,我们可以使用两种方法: 迭代器对象上调用 next() for...of 的 迭代 以我们的示例为例,要从生成器获取值,我们可以这样做: function* generate(...> // omitted 当访问缺少资源不存在资源的 HTML 文档时,浏览器的控制台会记录以下错误: GET http://localhost:5000/nowhere-to-be-found.png...“Promise 化”计时器的错误处理 使用计时器事件无法捕获从回调抛出的异常。...在这种情况下,catch 将永远不会启用。于是会运行 finally。 代码的结果记录在 then 中,如下: [ { status: 'fulfilled', value: 'Good!'...=> console.log(value)); go.next().catch(reason => console.error(reason.message)); 代码输出是: { value: 33

4.8K20

Next.js的创建与使用

NextJs是React的服务器渲染框架,区别于官方SSRNext最大的特点是可以渲染出Ajax异步请求渲染出来的结果,本网站目前使用的前端框架就是NextJs 本文章默认你已将学会了React,如果你不会...),状态管理(redex),或者css(css in js、scss)方案都由社区提供,而Next和React最大的区别就是路由以及成果物的渲染方式,核心库基本没有区别因为NextJs官网声明了NextJs...from react-router-dom,而是变成了next/router,next/link等 router事件基本也是想react中一样不同的是因为是服务器渲染的所以next中新加了一个功能:...也可以使用*路由 在对应的文件夹中使用[...all].tsx 本项目我使用了 image.png 这样就相当于注册了article中的所有路由访问blogweb.cn/article/* 中凡是.../index.css'必须在_app.js中引入 使用@代替src文件夹 原本Next.js创建之后是不会有src文件夹的但是我们可以创一个(相关文档),然后将样式、模块、组件路由等文件放进去(总之就是关于项目配置的不要放

4K20

JavaScript 应用程序中的有效错误处理

// 语法错误的示例 console.log('Hello, world!'; // 缺少右括号运行时错误:运行时错误,也称为异常,发生在代码执行期间。...// 运行时错误的示例 let result = addNumbers(5, 'abc'); // 'abc' 不是一个数字逻辑错误:逻辑错误不会立即导致失败错误消息。...提供描述性的错误消息:抛出错误记录错误时,请使用描述性和有意义的消息。这有助于开发人员调试期间快速了解错误的原因。...记录错误:记录错误对于调试和监控应用程序健康状态非常重要。使用 console.error 方法其他日志记录机制记录错误及相关信息。...console.error('发生了错误:', error.message); // 额外的日志记录逻辑}这种日志记录方法有助于开发和生产环境中识别和解决问题。

10900

Next.js实现国际化方案完全指南

国际化常用方案 从零实现 Nextjs 国际化方案 Next-Admin 后期规划 Next-Admin介绍 Next-Admin 是一款基于 nextjs最新版 + Antd5.0的开源中后台(同构...亲自体验了以上几款插件之后,我选择了 next-intl, 从扩展和使用灵活性上都非常不错, 接下来就和大家分享一下如何使用 next-intl 来实现 Next 项目国际化....组件 / 页面中使用i18n next-intl 的国际化定义支持命名空间,我们可以messages 对应的语言文件中通过嵌套结构来设置命名空间,有序的管理不同页面的国际化文本: // zh.json...注意事项 由于 next 项目支持客户端渲染和服务端渲染,所以使用 next-intl 的方式也是有区别的,如果我们页面中出现 next-intl 相关的服务端渲染报错, 可以页面同级添加 layout.tsx...同时,这也是基于 nextjs 嵌套布局实现的方案, 为了使用 next-intl, 我们还需要在 next/src/app目录做如下改造: next-admin\src\app\[locale] 也就是加一层

11810

从零打造一款基于Nextjs+antd5.0的中后台管理系统

hi, 大家好,我是徐小夕,最近在研究nextjs, 为了更全面复盘总结nextjs, 我写了一个开箱即用的基于 next 的后台管理系统, 供大家学习参考. github地址:https://github.com...为什么要用Nextjs 首先从官网上我们可以了解到 Next.js 提供了先进的服务端渲染(SSR)和静态生成(SSG)能力,使得我们能够服务器上生成动态内容并将其直接发送给客户端,从而大大减少首次加载的等待时间...深度使用 next.js 开发应用之后,我总结了以下使用它的优点: 支持高效的服务端渲染和静态页面生成能力 规则化的路由系统(保证页面更有组织层次,能更好的管理多页面) 规范且颗粒度的API开发模式(...所以为了更好的方便国内开发者使用 nextjs 开发中后台系统,我打算使用 antd5.0 作为UI库来开发, 大家也可以 Next-Admin 的基础上改造成自己的中后台系统。...Index`.') ) { // Do nothing, this error is triggered on purpose } else { console.error

14210

ES6--Promise、Generator及async

只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。...,它提供了一种可以通过特定语句方法使其执行对象暂停的功能。 ​...可以把它想成是return关键字的一个基于生成器的版本,但其并非退出函数体,而是切出当前函数的运行时,与此同时可以将一个值带到主线程中。yield语句是暂停执行的标记,而next方法可以恢复执行。...通过next方法的参数,就有办法Generator函数开始运行之后,继续向函数体内部注入值。也就是说,可以Generator函数运行的不同阶段,从外部向内部注入不同的值,从而调整函数行为。...​ 下述描述的使用场景,只是自己开发中经常遇到的,并不一定完全符合所有人的使用,只是这样用起来会很便利和实现一些比较难处理的情况。

66221

初见next.js

. next/link 组件不会将那些 props 传递给子组件,并且还会给你一个错误警告.在这种情况下,next/link 组件的子组件/元素是接受样式和其他 props 最好承载体.它可以是任何组件标签...不会.      ...创建动态路由时,我们 id 放在方括号之间.这是页面接收到的查询参数的名称,因此/p/hello-nextjs query 对象就是{ id: 'hello-nextjs'},我们可以使用 useRouter...>      );      }      该页面中我们看一下元素,其中 href 属性 p 文件夹中页面的路径, as 是要在浏览器的 URL 栏中显示的 URL.as 是用来与浏览器历史记录配合使用...  { id: "hello-nextjs", title: "Hello Next.js" },      { id: "learn-nextjs", title: "Learn Next.js is

5K00

学不动了,Vercel 推出比 Vite 快 10 倍的打包器 Turbopack

公告指出,虽然升级到 Next.js 13 时不需要使用该 app/directory,但其正在为构建复杂的 interfaces 奠定基础,同时减少 JavaScript 的数量。...打包与原生 ESM 像 Vite 这样的框架使用了一种技术,它们不会在开发模式下打包应用程序源代码。相反,它们依赖于浏览器的原生 ES Modules 系统。...它不会强迫您使用本机 ESM。但出于几个原因,我们决定不采用 esbuild。 esbuild 的代码针对一项任务进行了超优化 - 快速打包。它没有 HMR,我们不想从我们的开发服务器中丢失它。...但他意识到架构和运行时的所有缺陷。因此,Tobias 成为了 Rust 专家。”...他还补充称,预计 Webpack 不会很快从 Next.js 中消失。向后兼容性是 Next.js 不可或缺的一部分,他们将关心所有使用自定义插件的 Next.js 用户。

3.5K10

A Guide to Node.js Logging

因为这是一种常见的做法,我们甚至可以使用 no-console 这样的规则来确保生产环境不会留下日志。但是,如果我们真的想要记录这些信息呢?...在这篇博文中,我们将介绍你想要记录信息的各种情况,Node.js 中的 console.logconsole.error之间的区别是什么,以及如何在不使用户控制台混乱的情况下在库中发送日志记录。...`); Theory First: Important Details for Node.js 虽然你可以浏览器和 Node.js 环境中使用 console.logconsole.error,...$ npm install pino-debug pino-debug 我们第一次使用之前需要初始化一次 debug,最简单的方法就是启动之前使用 Node.js 的 -r --require...In Summary JavaScript 中使用 console.log 是非常快的,但当你将代码部署到生产环境时,你应该要考虑更多关于记录的内容。

1.7K20

关于 JavaScript 错误处理的最完整指南(下半部)

如果我们失败了,或者决定不捕获它,异常可以堆栈中自由冒泡。 使用 Promise 来处理定时器中的异常 使用定时器事件无法捕获从回调引发的异常。...来处理错误 Promise.all(iterable) 方法返回一个 Promise 实例,此实例 iterable 参数内所有的 promise 都“完成(resolved)”参数中不包含 promise...使用 Promise.race 来处理错误 Promise.race(iterable) 方法返回一个 promise,一旦迭代器中的某个promise解决拒绝,返回的 promise就会解决拒绝...); go.next().then(value => console.log(value)); go.next().then(value => console.log(value)); go.next...yield 11; } const go = asyncGenerator(); go.next().then(value => console.log(value)); go.next().then

2.2K20

Web3 全栈指南

给出代码示例,并展示该领域所有最大的参与者使用的哪些工具,这样我们也可以使用同样的工具。 如果你想看看现在一些专业的前端是什么样子,可以看一下Aave[8]Uniswap[9]网站。 兴奋吗?...你可能曾经区块链应用程序中使用过Alchemy[23]、Infura[24]Moralis Speedy Nodes[25]的RPC URL[26]。...我们用NextJS[39]来做这些工作,因为ReactJS[40]是目前地球上最流行的前端框架,而 NextJS 是建立它之上的,在我看来,它比原始的 ReactJS 更方便使用。...使用示例 Nader Dabit Explainer[51] 另外,在下面的例子中,我打算从另一个文件中导入abi,这样就不会让文章的内容臃肿了。...那样容易设置钱包 需要编写使用自己的 Hook 来与智能合约交互。

4.7K21
领券