学会它（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 模版 的实现， 相关文章>> 。

技术实现

• Node > 8.x
• Express
• mongoose
• react > 16.x
• Nextjs
• sass
• isomorphic-unfetch

目录结构

├─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 ，解决了此问题。

请到「今天看啥」查看全文