网站开发模块查相似,备案通,怎样建立自己网站视频,如何加强网站管理的队伍建设文章说明#xff1a;1. 之前想搭建个人博客#xff0c;由于学习的是react技术栈#xff0c;所以就到处搜罗资料学了nextjs#xff0c;配合koa就把博客搭起来了。该系列文章基于我的学习笔记#xff0c;重新整理了一遍#xff0c;如果有错误之处#xff0c;还请指正。2. …文章说明 1. 之前想搭建个人博客由于学习的是react技术栈所以就到处搜罗资料学了nextjs配合koa就把博客搭起来了。该系列文章基于我的学习笔记重新整理了一遍如果有错误之处还请指正。 2. 个人能力有限我更注重的是使用所以对于许多原理也只是简单理解并未深究。如果是想研究源码或者追求性能深度优化的老铁可以不用往下看了 3. 转载请注明出处各工具版本npm v6.10node v12.13react v16.12next v9.1可能需要的预备知识React项目经验、nodejs开发经验webpack、npm等常用工具使用经验。最好会koa部分地方可能会用到一、Nextjs与服务端渲染Nextjs的官方解释Next.js 是一个轻量级的 React 服务端渲染应用框架。服务端渲染顾名思义就是在服务器上就把网页渲染好了你请求时直接发给你渲染好的页面。知道了原理ssr的优势劣势也就很明显了 与客户端渲染比较优势 1. 更利于SEO便于搜索引擎收录。因为大多数爬虫只会爬源码不会爬脚本当服务端返回渲染好的数据后爬虫便能直接爬取了。 2. 利于首屏加载。这个简单服务端发过来的就是渲染好的客户端就省事了加载也就快了。 劣势就是1. 服务器的压力大了(多了活要干)2. 对开发人员要求也高了 深有体会量发而行这已经不属纯正血统的前端范畴了因为要成功部署的话你还不得不心甘情愿地去学点服务器知识、Linux运维、nginx部署等 特别注意当服务端渲染时服务端是没有window、document对象的浏览器端才有直接调用会报错。想用这俩对象的话最好放在didAmount周期函数里等组件挂载后再调用其实从这一点来说这只能算是半服务端渲染......扯远了 另外Nextjs自带的服务器专注于处理ssr部分但后端往往还需要处理文件、连接数据库等功能此时还需要借助其他的node服务器我这选用了koa2然后让nextjs作为koa的一个专门负责ssr的中间件。 二、搭建Nextjs项目实践出真知。介绍完了作为正经的程序员先上手一个再慢慢研究。我们按照官网的节奏一步步搭建项目再一步步解释每个文件和目录的作用 1. 搭建环境随便创建个项目目录如demo 进入该目录npm初始化生成package.jsonnpm init npm安装nextjs和其依赖npm install next react react-dom 之后再修改package.json的scripts模块:{scripts: {dev: next,build: next build,start: next start}
}说明和react项目类似这里的命令build即部署时的打包命令,start运行打包后的文件命令dev则是开发环境下启动nextjs服务器。 到这里环境就算搭建好了。 2. 创建pages目录Nextjs的路由系统非常简单所有的路由页面全部存放在pages目录下nextjs会自动对应page目录的文件路径生成对应路由。 如我们在pages创建demo.js export default () divThis is the demo page/div然后启动next服务器npm run dev 命令行显示如下时表示启动成功了 D:webdemonpm run dev next_test1.0.0 dev D:webdemonext[ wait ] starting the development server ...
[ info ] waiting on http://localhost:3000 ...此时打开浏览器进入localhost:3000/demo便能看到页面了路由/demo显示界面3._app.js和 _document.js特别的pages下有两个特殊文件_app.js和_document.js。这两个文件默认是隐藏的新建的话就会覆盖之前的文件。他们分别用来自定义APP和自定义Document 自定义什么意思有什么用简单来说就是用来定义一些页面共用的属性如设置全局css,通用布局等或者定义一些通用的动作如获取、传递数据等 这个结合nextjs的getInitialProps函数会更好说明就留着后续讲getInitialProps数据获取和页面布局的时候再一并解释吧。 这篇文章我们主要关注路由系统。 三、路由系统保证pages目录的干净对于现在的组件化开发我们通常会有两种组件一种作为某个独立功能的小组件一种是作为页面显示的页面组件通常结合了多个小组件Nexjs同样适用 但小组件不能存储在pages目录下这会导致路由系统混乱。我们可以新建一个components目录根据自己喜好自定义名字来存储小组件在需要时从该目录下import使用即可。 多级路由如果路由有多级直接在pages下创立父级目录再把最终路由文件放入目录下即可实现多级路由。如在pages目录下创建user目录user下再创建index.js和home.js那么路由/user就对应index.js文件/user/home就对应home.js文件 路由跳转Nextjs官方推荐了两种跳转方式一种是Link组件包裹一种使用Router我个人是不推荐Link的原理也是用Router实现的使用也简单但用起来总感觉很冗余。我这里主要介绍Router想了解Link的老铁得麻烦移步官网了。 Nextjs提供了一个next/router的包专门用来处理路由。Router便是其中一个对象Router.push(url)进行跳转。 实践一下 1. pages目录下创建index.js文件import React from react
import Router from next/routerexport default () {return(button onClick{()Router.push(/demo)} 送我去demo页/buttondiv这里是主页/div/)
}2. 修改demo.js文件import React from react
import Router from next/routerexport default () {return(button onClick{()Router.push(/)} 送我去主页/buttondiv这里是demo页/div/)
}3. 运行结果 点击“送我去demo页”按钮后路由参数注意注意Nextjs不能使用params传参数!只能通过query! 像这样 Router.push(url?id1)
等价
Router.push({pathname:url,query:{id:1}})另外前面说过服务端渲染时没有window对象的自然不能通过传统途径获取url参数这里next/router里提供了一个withRouter对象用它包裹组件后组件会多出router的参数通过router就能获取query参数了 import React from react
import Router,{ withRouter } from next/routerconst Demo (props) {return(button onClick{()Router.push(/)} 送我去主页/buttondiv这里是demo页/divdiv{props.router.query.id}/div/)
}
export default withRouter(Demo);成功显示id的值1路由映射我们常看到的url是这样的/url?id1而路由映射可以帮我们显示成为这样 /url/1比较美观友好其实也就好一点点这小节讲解下路由映射会涉及到koa使用不感兴趣的小伙伴直接跳过吧毕竟也不是什么特别重要的 表面上的实现方法 1. Router.push({ pathname: /demo, query: { id: 1 } },/demo/1)Router.push的第三个参数即可指定别名
2. Link组件中的as属性Link href/demo?id1 as/demo/1这样看上去的确可以了初始时也能访问但页面一刷新就会404为什么因为当我们点击按钮在浏览器端跳转时是浏览器去找页面它通过路由映射可以找到。而刷新的时候是服务器去找而我们的pages页面里面没有/demo/1的文件所以就报404了。 解决办法利用koa处理 router.get(/demo/:id,async (ctx){cosnt id ctx.params.id await handle(ctx.req,ctx.res,{pathname:/demo,query: {id}}),ctx.respond false
})其实就是在服务器处又将路由转换回来而已。路由钩子Router中还定义了几个钩子函数用来获取路由转变时的状态方便我们在转换路由时进行操作 // routeChangeStart history模式路由改变刚开始
// routeChangeComplete history模式路由改变结束
// routeChangeError 路由改变失败
// hashChangeStart hash模式路由改变刚开始
// hashChangeComplete hash模式路由改变结束Router.events.on(event,func()) //event即监听的事件以上5种func回调函数
Router.events.off(event,func()) //取消监听好了路由系统就讲解到这了下一篇文章会讲解到nextjs的布局和getInitialProps()函数顺带会把这期遗留的_app.js和_document.js一并解释了。喜欢的话欢迎分享欢迎讨论欢迎关注我的其他平台账号 【知乎】均远 【公众号】佛系前端 【个人博客】http://xujunyuan.com 【GitHub】JunYuanHub
