骄阳

Next.Js是JavaScript中的下一件大事吗?

骄阳 · 2016-11-21翻译 · 2992阅读 原文链接

我们知道已经有太多JS框架存在了。但是,每天还是可以看到新的JS框架出现。

紧随 create-react-appNext.js是新的、值得关注的JS框架。

它有很酷的功能,包括:

  • 基于路由的文件系统

  • 代码拆分

  • 服务器端渲染

  • 零配置. 设置

  • 轻松布署

有关Next.js的更多信息请查看Zeit的博客日志

疲劳是JS世界中常见的因素。

Next.js 也许不能治愈 JS 疲劳, 但它允许我们像用PHP写网站一样在JavaScript里构建 web应用程序。

只需在你的应用程序里为页面创建几个文件,即可完成。

与PHP不同,我们能从JS生态系统中获得帮助,包括NPM, ES201X 特性,babel和Webpack。

最重要的是,它简洁且将继续保持这样。

做正确的事:围绕路由构建

很多现代JavaScript应用程序框架没有做这件正确的事。

一个框架应该有一个路由,而且它应做的不仅仅是客户端路由。

Next.js 有自己的路由, 且建立在它之上。最重要的是,你根本不需要知道路由。

> What?

它使用文件系统作为你应用程序的路由器。例如,假设你需要创建具有两个页面(主页和About页面)的web应用程序。

然后,你需要在一个页面目录里创建两个文件,并导出包含你文件内容的React组件。

看看下面的代码片段:

这是我们共有的头组件: components/Header.js

import React from 'react'
import **Link** from 'next/link'
export default () => (
  <div>
    &lt;**Link** href='/'&gt;
      Home
    &lt;/**Link**&gt; |
    &lt;**Link** href='/about'&gt;
      About
    &lt;/**Link**&gt;
  </div>
)

这是我们的主页: pages/index.js

import React from 'react'
import Header from '../components/Header'

export default () =&gt; (
 <div>
   <header />
   <p>This is my Homepage</p>
 </div>
)

这是我们的 About 页面: pages/about.js

import React from 'react'
import Header from '../components/Header'

export default () =&gt; (
 <div>
   <header />
   <p>This is the About page</p>
 </div>
)

够了就要这些。

然后你将得到一个服务器端渲染的web应用程序,只加载你需要的给定页面的模块(AKA: 代码拆分). 当你在客户端更改路由时,它将加载其他模块并加载你的页面。

但是, 路由现在是很基本的。

目前,你不能实现动态路由—我认为这是任何路由器的标准功能。

已经有一些尝试(here, herehere) 实现这一点, 我希望我们很快会看到一些简单且坚实的东西。

简约方法

Next.js 具有很小的代码库。例如:

  • 无内置数据系统

  • 无验证系统

  • 无测试框架

基本上,它只是一种服务你网页的方式。

你需要带来你应用程序所需要的其他东西。

因为它是JavaScript,所以这不会是个大问题。

这种方法使我们用Next.js应用于各种应用,无论是一个爱好项目或拥有数百万用户的应用。

选择你的后端

后端是你应用程序的中心,通常,它会是你应用程序的复杂部分。最初,它不会太复杂,但随着你的应用越来越大,你将不得不开始担心它。

使用Next.js你的客户端应用和后端是分离的,这将帮你在应用程序/启动的整个生命周期保持Next.js应用程序。

根据需要配置

Next.js下一步是什么,这是一个基本的React设置。对于一个真正的应用程序,我们需要按我们想要的定制它。

例如,我们可能需要添加一些babel插件和一些Webpack加载器。

目前,Next.js还不能做到这些。幸运的是,很快就可以做到了。

我们将能够在Next.js中配置一切,而不仅仅是配置babel和Webpack.

所以,这是JS应用的未来吗?

目前Next.js仅支持React。在未来,我希望Next.js能支持其他新兴框架,

无论如何,Next.js看起来已经从其他JS框架那里学到一些经验,它正试着去做正确的事。

现在它可能还没准备好应用到你的程序中去,但请保持关注 — 它将变得越来越好.

> 即使Next.js 正使用Webpack, 它也不使用Webpack的代码拆分功能。相反,它有自己的 > > 我将在下一篇博文中介绍Next.js的工作原理。 > 敬请关注!

相关文章