学会它(Nextjs),前端也可以和PHP程序员一样了

学会它(Nextjs),前端也可以和PHP程序员一样了

PHP小彩虹2021-07-11 16:08:05180A+A-

话说 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 ,解决了此问题。

//.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 (
      <div>
        Hello World {this.props.userAgent}
      </div>
    )
  }
}

在页面渲染加载数据时,我们使用 getInitialProps 这个异步静态方法来获取 props (类似JSON.stringify)对象。初始化页面的时候,getInitialProps 方法只会在服务端执行。

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们