reactserver(ssr)框架next.js开发个人网站分享

{`.fl{float:left;}.fr{float:right;}`}next-blog项目介绍使用reactserver框架next.js写的博客，喜欢的话给个Star支持一下。https://github.com/Weibozzz/next-blog在线地址：http://www.liuweibo.cn本项目使用next.js经验分享：http://www.liuweibo.cn/p/206软件架构软件架构说明react.jsnext.jsantdmysqlnodekoa2fetch网站使用技术前端：React(16.x)Next.jsantd-designfetch少后端：node框架koa和mysql（目前前端和后端分开，这里只负责写接口，和通常的ajax获取接口一样，这里不开源）网站用途：业余学习，记录技术文章，学以致用，网站功能markdown发布文章修改文章（增删改查）用户评论上传图片到七牛云存储安装教程1.快速入门虽然是服务端渲染，但是也需要调用接口，所以需要调用后端界面进入config文件夹下env.js的isShow，设置为true。接口，当然只能查看不能修改接口。如果为false，则无法调整界面，需要自己编写界面。2.运行cnpminpmrundev3.部署cnpminpmrunbuildnpmstart使用说明demo上传图片、发布文章或修改是正常的，因为只是展示。关于路由看不到发布的文章路由和后台管理是正常的，可以修改代码显示路由效果。网站截图1.详情页2.列表页3.编辑页面和发布文章，上传图片到七牛云网站技术介绍完全用next.js开发的个人网站，网址http://www.liuweibo.cn总结经验和心得开发完成后。gtihub源代码https://github.com/Weibozzz/next-blog。喜欢就给个Star支持一下。为什么要使用服务端渲染（SSR）？网站要推广，所以需要更好的SEO。搜索引擎可以抓取完整的页面访问速度，加载静态页面更快。网站使用技术前端：React(16.x)Next.jsantd-designfetchLess后端：node框架koa和mysql（目前前后端分离，这里只负责写接口，即和平时的ajax获取接口一样，这里不开源）网站用途：业余学习，记录技术文章，学以致用发表文章修改文章（增删改查）用户评论源码分析这里只关注入口文件server.js的要点这里使用的是官方的express，同时开启了gzip压缩constexpress=require('express')constnext=require('next')constcompression=require('compression')constdev=process.env.NODE_ENV!=='production'constapp=next({dev})consthandle=app.getRequestHandler()letport=dev?4322:80app.prepare().then(()=>{constserver=express()if(!dev){server.use(compression())//gzip}//文章二级页面server.get('/p/:id',(req,res)=>{constactualPage='/detail'constqueryParams={id:req.params.id}app.render(req,res,actualPage,queryParams)})server.get('*',(req,res)=>{returnhandle(req,res)})服务器。listen(port,(err)=>{if(err)throwerrconsole.log('>Readyonhttp://localhost'port)})}).catch((ex)=>{process.exit(1)})页面根组件_app.js用于传递redux数据，store和普通react一样，header和footer可以放这里。类似地，_err.js用于处理404页面importApp,{Container}from'next/app'importReactfrom'react'import{withRouter}from'next/router'//访问next的routerimportwithReduxStorefrom'../lib/with-redux-store'//从'react-redux'访问next的reduximport{Provider}classMyAppextendsApp{render(){const{Component,pageProps,reduxStore,router:{pathname}}=this。道具;return()}}exportdefaultwithReduxStore(withRouter(MyApp))网站的服务端渲染页面博客页面链接用于跳转页面，使用as改变原来的http://*.com?id=1为漂亮的/id/1head，meta标签可以嵌套用于seo配置不需要seo的组件importdynamicfrom'next/dynamic';//不需要seoconstDynamicTopTipsNoSsr=dynamic(import('../../components/TopTips'),{ssr:false})importReact,{Component}from'react'import{connect}from'react-redux'importRouterfrom'next/router'import'whatwg-fetch'//获取请求数据从“下一个/链接”导入链接；//下一个跳转linkimportHeadfrom'next/head'//下一个跳转head可以用于seoclassBlogextendsComponent{render(){return({current}