Next.js(轻量级应用框架) v10.0.7 官方版

　　Next.js是一款用于轻量级应用、静态网站、预渲染应用等的React框架，内置生产所需的所有功能，例如静态和服务器混合渲染、智能捆绑，路由预取等多种功能，无需配置点击即可进行使用，通过该软件用户可以完美解决React构建一个完整的Web应用最常见的问题，比如涉及到代码捆绑和转换、生产自动化等问题；Next.js可通过预渲染、单指令静态导出、自动分码、热代码重载等功能为用户打造一流的开发者体验，该软件具有完全的可扩展性，是一款面向网站和网络应用而研发的react框架，有需要的朋友可以进行下载。

软件功能

　　图像优化

　　和具有即时构建的自动图像优化。

　　国际化

　　内置的域和子域路由和自动语言检测。

　　Next.js分析

　　根据真实的访问者数据和逐页分析得出的真实灯塔评分

　　零配置

　　自动编译和捆绑。从一开始就针对生产进行了优化。

　　混合：SSG和SSR

　　在单个项目中的构建时（SSG）或请求时间（SSR）预渲染页面。

　　增量静态生成

　　在构建时间之后以增量方式添加和更新静态预渲染的页面。

　　TypeScript支持

　　自动TypeScript配置和编译。

　　快速刷新

　　快速，可靠的实时编辑体验，已在Facebook规模上得到证明。

　　文件系统路由

　　pages目录中的每个组件都变成一条路由。

　　API路由

　　创建API端点以提供后端功能。

　　内置CSS支持

　　使用CSS模块创建组件级样式。内置的Sass支持。

　　代码拆分和捆绑

　　由Google Chrome团队创建的优化的捆绑包拆分算法。

软件特色

　　直观的基于页面的路由系统（支持动态路由）

　　每页支持预渲染，静态生成（SSG）和服务器端渲染（SSR）

　　自动代码拆分可加快页面加载速度

　　具有优化的预取功能的客户端路由

　　内置CSS和Sass支持，并支持任何CSS-in-JS库

　　具有快速刷新支持的开发环境

　　API路由以使用无服务器功能构建API端点

　　完全可扩展

官方教程

　　设置

　　首先，让我们确保您的开发环境已经准备就绪。

　　如果您尚未安装Node.js，请从此处安装。您将需要Node.js版本10.13或更高版本。

　　在本教程中，您将使用自己的文本编辑器和终端应用程序。

　　如果您使用的是Windows，建议您下载Windows版Git并使用其随附的Git Bash，它在本教程中支持UNIX特定的命令。Linux的Windows子系统（WSL）是另一种选择。

　　创建一个Next.js应用

　　要创建Next.js应用，请打开终端，cd进入您要在其中创建应用的目录，然后运行以下命令：

　　运行开发服务器

　　现在，您有了一个名为的新目录nextjs-blog。让我们cd开始吧：

　　然后，运行以下命令：

　　这将在端口3000上启动Next.js应用程序的“开发服务器”（稍后将对此进行详细介绍）。

　　让我们检查一下是否正常。从浏览器打开http：// localhost：3000。

　　欢迎来到Next.js

　　访问http：// localhost：3000时，应该会看到类似的页面。这是入门模板页面，显示有关Next.js的一些有用信息。

　　接下来让我们尝试编辑此页面！

　　验证静态生成的页面如果没有阻塞数据要求，那么Next.js会自动确定页面是静态的。这意味着页面中没有getServerSideProps和getInitialProps。相反，您的页面可以从服务器呈现加载状态，然后获取用户客户端。

　　这种模式的一个优势是，它允许从全局CDN提供页面并使用进行预加载next/link。实际上，这将导致更快的TTI（互动时间）。

　　让我们看一下个人资料页面的示例。最初将呈现一个加载骨骼。对用户的请求完成后，将显示用户名：

　　您可以在此处查看此示例。查看with-iron-session示例以了解其工作原理。

　　验证服务器渲染的页面如果导出从页面async调用的函数getServerSideProps，则Next.js将使用所返回的数据针对每个请求预渲染此页面getServerSideProps。

　　让我们将配置文件示例转换为使用服务器端渲染。如果有会话，请user作为道具返回Profile页面中的组件。请注意，此示例中没有加载框架。

　　这种模式的优点是可以防止重定向前未经身份验证的内容闪烁。重要的是要注意，在getServerSideProps对您的身份验证提供程序的请求解决之前，获取用户数据将阻止呈现。