Next.js是一个非常流行的Node.js框架,它可以轻松实现服务器端React渲染,并提供许多其他令人惊奇的功能
- 介绍
- 主要特点
- 安装
- 入门
- 创建一个页面
- 服务器端渲染
- 添加第二页
- 热装
- 客户端渲染
- 动态页面
- CSS-in-JS
- 导出静态站点
- 部署中
- 现在
- 区域
- 外挂程式
- 小故障入门套件
- 阅读更多关于Next.js的信息
介绍
在现代工作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页面,它的外观简洁漂亮。
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查询参数:
现在创建一个post.js
文件在pages
文件夹,然后添加:
export default (props) => <h1>{props.url.query.title}</h1>
现在单击单个帖子将在h1
标签:
您可以使用不带查询参数的干净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>
)
样式是组件的作用域,但是您也可以编辑全局样式,添加global
到style
元素:
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 build
和npm 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手册
接下来的更多教程:
- Next.js入门
- Next.js vs Gatsby vs create-react-app
- 如何安装Next.js
- 使用链接在Next.js中链接两个页面
- 路由器中Next.js中的动态内容
- 使用getInitialProps将数据馈送到Next.js组件
- 使用CSS样式化Next.js组件
- 在Next.js中预取内容
- 使用路由器检测Next.js中的活动链接
- 查看源代码以确认SSR在Next.js中正常工作
- Next.js:使用自定义标签填充head标签
- 立即部署Next.js应用程序
- Next.js:仅在Next.js的服务器端或客户端运行代码
- 在生产中部署Next.js应用
- 如何分析Next.js应用程序捆绑包
- Next.js中的延迟加载模块
- 向您的Next.js应用添加包装器组件
- Next.js添加到您的应用程序中的图标
- Next.js应用程序捆绑包
- 如何使用Next.js路由器
- 如何使用Next.js API路由
- 如何在Next.js应用中在服务器端获取Cookie
- 如何更改Next.js应用程序端口