Next.js入门

Next.js是一个非常流行的Node.js框架,它可以轻松实现服务器端React渲染,并提供许多其他令人惊奇的功能

介绍

在现代工作JavaScript由应用程序提供支持反应很棒,直到您意识到与在客户端呈现所有内容有关的几个问题。

首先,页面花了更长的时间才对用户可见,因为在加载内容之前,所有JavaScript都必须加载,并且您的应用程序需要运行才能确定在页面上显示的内容。

其次,如果您要建立一个公开可用的网站,则存在内容SEO问题。搜索引擎在运行和索引JavaScript应用方面越来越好,但是如果我们可以向他们发送内容而不是让他们弄清楚它,那就更好了。

解决这两个问题的方法是服务器渲染, 也被称为静态预渲染

Next.js是一个React框架,可以非常简单地完成所有这些工作,但不仅限于此。它的创作者将其广告宣传为用于React应用的零配置,单命令工具链

它提供了一种通用结构,可让您轻松构建前端React应用程序,并为您透明地处理服务器端渲染。

主要特点

这是Next.js主要功能的详尽列表:

  • 热门代码重装:Next.js在检测到任何保存到磁盘的更改时会重新加载页面。
  • 自动路由:任何URL都映射到文件系统,也映射到放置在pages文件夹,并且不需要任何配置(当然,您可以使用自定义选项)。
  • 单个文件组件: 使用样式的jsx,由同一团队完全集成在一起,因此添加范围限定到组件的样式很简单。
  • 服务器渲染:您可以(可选)在将HTML发送给客户端之前在服务器端呈现React组件。
  • 生态系统兼容性:Next.js在其余的JavaScript,Node和React生态系统中表现良好。
  • 自动代码分割:仅使用所需的库和JavaScript呈现页面,仅此而已。
  • 预取: 这Link组件,用于将不同的页面链接在一起,支持prefetch在后台自动预取页面资源(包括由于代码拆分而丢失的代码)的prop。
  • 动态组件:您可以动态导入JavaScript模块和React组件(https://github.com/zeit/next.js#dynamic-import)。
  • 静态出口: 使用next export命令,Next.js允许您从应用程序中导出一个完全静态的网站。

安装

Next.js支持所有主要平台:Linux,macOS,Windows。

轻松启动Next.js项目npm

npm install next react react-dom

入门

创建一个package.json包含以下内容的文件:

{
  "scripts": {
    "dev": "next"
  }
}

如果现在运行此命令:

npm run dev

该脚本会引发一个错误,抱怨找不到该脚本。pages文件夹。这是Next.js唯一需要运行的东西。

创建一个空的pages文件夹,然后再次运行命令,Next.js将在以下位置启动服务器localhost:3000

如果您现在转到该URL,则会看到一个友好的404页面,它的外观简洁漂亮。

A 404 page returned by Next.js

Next.js也可以处理其他错误类型,例如500个错误。

创建一个页面

在里面pages文件夹创建一个index.js一个简单的React功能组件的文件:

export default () => (
  <div>
    <p>Hello World!</p>
  </div>
)

如果您访问localhost:3000,此组件将自动呈现。

为什么这么简单?

Next.js使用基于文件系统结构的声明性页面结构。

页面位于pages文件夹,页面URL由页面文件名确定。文件系统是页面API。

服务器端渲染

打开页面源,View -> Developer -> View Source使用Chrome。

如您所见,组件生成的HTML直接在页面源中发送。它不是在客户端呈现的,而是在服务器上呈现的。

Next.js团队希望为服务器呈现的页面创建开发人员体验,类似于创建基本PHP项目时获得的页面,例如,在其中放置PHP文件并对其进行调用,然后将它们显示为页面。在内部,这当然是非常不同的,但是明显的易用性是显而易见的。

添加第二页

让我们在其中创建另一个页面pages/contact.js

export default () => (
  <div>
    <p>
      <a href='mailto:[email protected]'>Contact us!</a>
    </p>
  </div>
)

如果您将浏览器指向localhost:3000/contact此页面将被呈现。如您所见,此页面也是服务器渲染的。

热装

请注意,您不必重新启动npm加载第二页的过程。 Next.js在后台为您完成此任务。

客户端渲染

由于上面提到的所有原因,服务器呈现在第一次加载页面时非常方便,但是在网站内部导航时,客户端呈现是加快页面加载和改善用户体验的关键。

Next.js提供了一个Link可用于构建链接的组件。尝试链接上面的两个页面。

改变index.js这段代码:

import Link from 'next/link'

export default () => ( <div> <p>Hello World!</p> <Link href=’/contact’> <a>Contact me!</a> </Link> </div> )

现在返回浏览器并尝试此链接。如您所见,“联系人”页面将立即加载,而不会刷新页面。

这是客户端导航正常运行,并完全支持历史API,这意味着您的用户后退按钮不会损坏。

如果你现在cmd-click链接后,将在新选项卡中打开相同的“联系人”页面,现在服务器已呈现。

动态页面

Next.js的一个很好的用例是一个博客,因为它是所有开发人员都知道的工作原理,并且非常适合作为一个简单的示例来处理动态页面。

动态页面是没有固定内容的页面,而是根据某些参数显示一些数据。

改变index.js

import Link from 'next/link'

const Post = (props) => ( <li> <Link href={/post?title=</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">title</span><span style="color:#e6db74">}</span><span style="color:#e6db74">}> <a>{props.title}</a> </Link> </li> )

export default () => ( <div> <h2>My blog</h2> <ul> <li> <Post title=‘Yet another post’ /> <Post title=‘Second post’ /> <Post title=‘Hello, world!’ /> </li> </ul> </div> )

这将创建一系列帖子,并用帖子标题填充title查询参数:

The posts list

现在创建一个post.js文件在pages文件夹,然后添加:

export default (props) => <h1>{props.url.query.title}</h1>

现在单击单个帖子将在h1标签:

A single post

您可以使用不带查询参数的干净URL。 Next.js链接组件通过接受一个as属性,您可以使用它传递一个子弹:

import Link from 'next/link'

const Post = (props) => ( <li> <Link as={/</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">slug</span><span style="color:#e6db74">}</span><span style="color:#e6db74">} href={/post?title=</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">props</span>.<span style="color:#a6e22e">title</span><span style="color:#e6db74">}</span><span style="color:#e6db74">}> <a>{props.title}</a> </Link> </li> )

export default () => ( <div> <h2>My blog</h2> <ul> <li> <Post slug=‘yet-another-post’ title=‘Yet another post’ /> <Post slug=‘second-post’ title=‘Second post’ /> <Post slug=‘hello-world’ title=‘Hello, world!’ /> </li> </ul> </div> )

CSS-in-JS

默认情况下,Next.js支持样式的jsx,这是同一开发团队提供的CSS-in-JS解决方案,但是您可以使用喜欢的任何库,例如样式化的组件

例子:

export default () => (
  <div>
    <p>
      <a href='mailto:[email protected]'>Contact us!</a>
    </p>
    <style jsx>{`
      p {
        font-family: 'Courier New';
      }
      a {
        text-decoration: none;
        color: black;
      }
      a:hover {
        opacity: 0.8;
      }
    `}</style>
  </div>
)

样式是组件的作用域,但是您也可以编辑全局样式,添加globalstyle元素:

export default () => (
  <div>
    <p>
      <a href='mailto:[email protected]'>Contact us!</a>
    </p>
    <style jsx global>{`
      body {
        font-family: 'Benton Sans', 'Helvetica Neue';
        margin: 2em;
      }
      h2 {
        font-style: italic;
        color: #373fff;
      }
    `}</style>
  </div>
)

导出静态站点

Next.js应用程序可以轻松导出为静态站点,可以将其部署在超快速静态站点主机之一上,例如Netlify或者Firebase托管,而无需设置Node环境。

该过程要求您声明构成网站的URL,但这是一个简单的过程

部署中

无需最终版本中不需要的源映射或其他开发工具,即可轻松地创建应用程序的生产就绪副本。

在本教程开始时,您创建了一个package.json包含以下内容的文件:

{
  "scripts": {
    "dev": "next"
  }
}

这是使用以下方法启动开发服务器的方法npm run dev

现在,只需将以下内容添加到package.json反而:

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

并通过运行来准备您的应用npm run buildnpm run start

现在

Zeit现在被称为威赛尔,而本教程可能已过时

Next.js背后的公司为Node.js应用程序提供了很棒的托管服务,称为现在

当然,他们集成了两个产品,因此您可以无缝部署Next.js应用程序,一旦您现在安装,通过运行now应用程序文件夹中的命令。

幕后现在为您设置服务器,您无需担心任何事情,只需等待应用程序URL就绪即可。

区域

您可以设置多个Next.js实例以侦听不同的URL,但是外部用户的应用程序看起来像是由一台服务器提供动力:https://github.com/zeit/next.js/#multi-zones

外挂程式

Next.js的插件列表位于https://github.com/zeit/next-plugins

小故障入门套件

如果您想尝试,建议您使用Glitch。看看我的Next.js小故障入门套件

阅读更多关于Next.js的信息

我可能无法描述这个出色框架的所有功能,而主要阅读Next.js的主要地方是GitHub上的项目自述文件

免费下载我的Next.js手册


接下来的更多教程: