nextJS
checkMa
雪千山,何处寻得,人间春色
展开
-
next Error: A required parameter (id) was not provided as a string in getStaticPaths...
next中的报错如下图原因这个报错的意思大概就是,getStaticPaths的返回值d的属性paths的内容必须都是string,因为对应页面地址栏的值都是字符串,毕竟地址栏请求不可能给数字到服务端export async function getStaticPaths(context) { // 假如id的值为数字,就会报错 return { paths: [{ params: { id: 1 } }, { params: { id: 2 } }], fallback: false };原创 2020-12-13 15:30:23 · 1409 阅读 · 0 评论 -
next的渲染
前言next可以实现服务端渲染,也就是在服务端就就获取数据生成一个html页面到客户端,那么怎么实现呢?案例实现我们做个小demo实现一下,很简单就两个步骤1、首先创建一个next官方脚手架项目npx create-next-app2、在pages目录下创建一个list页面,在api目录下创建一个list接口// 目录结构...pages| |--- list.js| |---api| |---list.js...// api里的list接口代码export defaul原创 2020-12-13 14:47:51 · 275 阅读 · 0 评论 -
next Error: React.Children.only expected to receive a single React element child
next中的报错如下图原因很常见的报错,next的组件下只能存在一个元素,以Link为例:case本身是一个jsx元素,span也是一个jsx元素,所以报错...<Link > case <span>1</span> </Link>...解决办法使其变成一个整体jsx元素就行了,无论你用啥包裹,空元素或者其他标签都行...<Link > <> case <span>1</span>原创 2020-12-13 10:03:56 · 299 阅读 · 0 评论 -
next中的样式写法
前言next是react的SSR的一种实践方案,今天记录一下next的样式写法。样式实现大致有以下几种内联样式css/less常规引入模块化引入css in js内联样式内联样式实现其实没啥好说的,算是css一种补充吧,和常规html的style相差不远 ... <div style={{ fontSize: 20 }}> 样式实现 </div> ...常规引入常规引入写法也很常见,包括less的也可以这么引入。但是它有个问题就是,全局都会受到该原创 2020-12-12 17:38:46 · 1435 阅读 · 0 评论