会前端的php程序员,学会它（Nextjs），前端也可以和PHP程序员一样了
话说 PHP 是世界上“最好”的语言，我不是 PHPer ，所以今天我们的主角不是 PHP ，而是前端(Nextjs)。那么问题来了，Nextjs 是什么？
Next.js is a lightweight framework for static and server-rendered applications.
说直白了：Next.js 是一个基于 React 实现的服务端渲染框架。 好了，今天我们就来聊聊 Next.js 实现。
介绍
该项目通过使用 Nextjs 技术，实现了 React 同构方案。采用 Nodejs 搭建服务，结合 Mongoose 数据库，实现了一个简单的博客系统。
也可以参考项目 v1.0 版本通过 Ejs 模版的实现， 相关文章>>。
技术实现
目录结构
├─server # 服务
│ ├─controllers # 控制器
│ ├─dto #
│ ├─models # 模型
│ ├─routes # 路由
│ └─service
├─pages # 页面
│ ├─…… #
│ └─index.js # 主页面
├─compontents # 组件
│ └─#……
├─config # 配置文件
│ └─#……
├─assets # 静态资源
│ └─#……
├─build # 发布目录
│ └─ #……
├─next.config.js # next配置文件
├─package.json
├─postcss.config.js # postcss配置
├─server.js # 服务入口文件
└─.babelrc
如何使用
主要针对我当前的项目>> node-blog-app 来说说使用方法：
Install
git clone https://github.com/Hancoson/node-blog-app.git
yarn
Install mongodb
brew install mongodb
Start Mongo
mongod
# or
brew services start mongodb
最后执行：
mongo
Create a datebase
use {nodeApp}
Start App
npm run dev #(start dev)
npm run build #(构建)
npm start #(启动项目)
遇到问题
项目开始的时候，也是遇到(踩)了不少的问题(坑)。接下来捡几个来说说吧。
编译
最开始 clone 了官方的 demo ，但是编译(npm run dev)的时候会遇到 (node:58300) UnhandledPromiseRejectionWarning: Error: Cannot find module 'babel-plugin-transform-runtime' 报错，后来查了资料，也在 issues 上提了，官方给我的答复是过时的 .babelrc 影响。哎～自己都浪费了半天时间，按照大神 @timneutkens 的指导，添加了新的 .babelrc ，解决了此问题。
//.babelrc
{
"presets": [
"next/babel"
],
"plugins": [
"@babel/plugin-transform-runtime"
]
}
获取数据
Nextjs 提供一个新的生命周期函数 getInitialProps 。具体用法如下：
import React from 'react'
export default class extends React.Component {
static async getInitialProps({ req }) {
//这里可以使用 isomorphic-unfetch 获取 server 端数据
const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
return { userAgent }
}
render() {
return (
Hello World {this.props.userAgent}
)
}
}
在页面渲染加载数据时，我们使用 getInitialProps 这个异步静态方法来获取 props (类似JSON.stringify)对象。初始化页面的时候，getInitialProps 方法只会在服务端执行。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！