QCon北京「鸿蒙专场」火热来袭!即刻报名,与创新同行~ 了解详情
写点什么

Next.js 提供了基于 React 的简单通用 JavaScript 框架

  • 2016-11-06
  • 本文字数:904 字

    阅读完需:约 3 分钟

新的通用 JavaScript 框架 Next.js 目前已经开源了,它为基于 React 和服务器的 Web 应用提供了一个新的可选方案。

来自 Zeit 的团队在 React 的基础和组件模型上构建了 Next.js,同时还提供了一个关键扩展:通过使用名为getInitialProps()的组件生命周期钩子方法,框架能够在服务器上进行初始渲染,如果需要的话,还可以在客户端继续进行渲染。不过这个高级特性是一个很小却功能强大的框架所额外提供的。

按照 Next.js 的最小功能集,它提供了一种便利的方式来创建新的 Web 应用,这个过程中,并不需要很多的工具集配置。类似于 create-react-app ,安装这个框架会搭建一个基于 React、Webpack 和 Babel 的构建过程。以往编写 React 组件的开发人员将会基于 React 语法来创建页面,每个页面提供了一个 render 函数:

复制代码
import React from 'react'
export default () => <p>Hello world!</p>

Next.js 使用 filesystem 作为 API ,所以每个放到pages文件夹中的组件将会自动映射为一个基于服务器的路由。比如,磁盘上的pages/about.js组件将会自动服务于/about这个 URL。

express-react-views 这样的项目不同,它是构建在 Express 之上的视图引擎,而 next.js 是一个顶层的服务层,只渲染 JavaScript 函数的结果。为了实现这一点,该项目使用 glamor 来处理 CSS,而不是依赖于单独的 CSS 文件。

在 Next.js 中,每个路由都是一个简单的 ES6 模块,这个模块会导出一个函数或扩展自 React.Component 的类。

Next.js 这种本质上的倾向性会有一些微妙的优势,其中之一就是开发人员不必在搭建 Webpack 或 Babel 配置上花费时间了。以往,这两个步骤就会耗费开发人员很多的时间。要运行某个站点的开发版本,只需运行npm run dev

对于一些开发团队来说,通用(Universal)的 JavaScript 依然是一项更为高级的技术,很多的框架都有自己的实现。Angular 2 有 Universal Angular 2 , Ember 有 Fastboot 。在 React 领域中,这方面的可选方案也不少,比如 Walmart 的 Electrode 和 Redfin 的 React Server 。现在,Next.js 作为一个很简单的可选方案,具有很大的潜力。该项目在 GitHub 上已经开源。

查看英文原文 Next.js Offers Simple Universal JavaScript Framework Based on React

2016-11-06 19:0016722

评论

发布
暂无评论
发现更多内容

一个回答引发热烈讨论,2021程序员进阶宝典

android 程序员 移动开发

一个月成功收割腾讯、阿里、字节offer,食堂大妈看完都会了

android 程序员 移动开发

一起看看这些大厂面试真题查漏补缺吧,Android面试题中高级

android 程序员 移动开发

不可多得的干货!动脑学院vip2019百度网盘

android 程序员 移动开发

从三流Android外包到秒杀阿里P7,从理论到实践

android 移动开发

鸿蒙小游戏-数字华容道 自定义组件的踩坑记录

爱吃土豆丝的打工人

鸿蒙 HarmonyOS 自定义组件 小型游戏

一线互联网大厂中高级Android面试真题收录,android音视频开发面试

android 程序员 移动开发

你还在把Java当成Android官方开发语言吗,字节跳动算法工程师总结

android 程序员 移动开发

kotlin协程原理,动脑学院vip

android 程序员 移动开发

Java hashCode() 指南

码语者

Java hashcode

免费Android高级工程师学习资源,苦熬一个月

android 程序员 移动开发

史上超级详细:扔物线学堂

android 程序员 移动开发

一线互联网移动架构师360°全方面性能调优,Android开发面试题目

android 程序员 移动开发

分享Android资深架构师的成长之路,系列篇

android 程序员 移动开发

了解Android架构组件后构建APP超简单,阿里P7大牛手把手教你

android 程序员 移动开发

五面阿里拿下飞猪事业部offer,思维导图+源代码+笔记+项目

android 程序员 移动开发

模块一学习笔记、总结

吴霏

架构实战营 「架构实战营」

刚从阿里、头条面试回来,动脑学院课程值得买吗

android 程序员 移动开发

为了跳槽强刷1000道Android真题,研发4面真题解析(Android岗)

android 程序员 移动开发

事件分发流程图,扔物线课程怎么样

android 程序员 移动开发

Adts 解析及AAC 编码

webrtc developer

ffmpeg aac,

万字长文,扔物线课程怎么样

android 程序员 移动开发

从不一样的角度描述Android事件传递,字节跳动面试官

android 程序员 移动开发

作为程序员一定不要仅仅追求物质,做了6年Android开发

android 程序员 移动开发

做了3年Android还没看过OkHttp源码,学Android看这就完事了

android 程序员 移动开发

【设计思想解读开源框架】android享学课堂vip课程下载

android 程序员 移动开发

个人开发者做一款App需要知道的事情,推荐

android 程序员 移动开发

千言-情感分析2.0发布,三大数据集升级打造中文情感分析影响力

科技热闻

架构训练营第3期模块一作业

吴霏

架构实战营 #架构实战营 「架构实战营」

作为一个程序员你觉得最大的悲哀是什么,安卓音视频开发

android 程序员 移动开发

一线互联网架构师筑基必备技能之Android篇,2021年安卓开发者跳槽指南

android 程序员 移动开发

Next.js提供了基于React的简单通用JavaScript框架_JavaScript_David Iffland_InfoQ精选文章