首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

学会这个,前端也可以和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 模版的实现,相关文章>>。

技术实现

[x] Node > 8.x

[x] Express

[x] mongoose

[x] react > 16.x

[x] Nextjs

[x] sass

[x] isomorphic-unfetch

目录结构

如何使用

主要针对我当前的项目>> node-blog-app 来说说使用方法:

Install

Install mongodb

Start Mongo

最后执行:

Create a datebase

Start App

遇到问题

项目开始的时候,也是遇到(踩)了不少的问题(坑)。接下来捡几个来说说吧。

编译

最开始 clone 了官方的 demo ,但是编译()的时候会遇到 报错,后来查了资料,也在 issues 上提了,官方给我的答复是过时的 影响。哎~自己都浪费了半天时间,按照大神 @timneutkens 的指导,添加了新的 ,解决了此问题。

获取数据

Nextjs 提供一个新的生命周期函数 。具体用法如下:

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180518G0Y0ZM00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券