Next.js 官方版 v10.0.4

软件介绍

Next.js是一款可以帮助用户开发web程序和设计网站的框架，可以在软件配置网站页面，可以设置动态路由的页面，可以对页面渲染，支持静态生成和端渲染，也可以对网站图像优化，可以设置图像可用属，可以配置网站默认的图像大小，支持语法错误检测，如果在开发过程中出现语法错误，则可以对其进行修复并再次保存该文件。该错误将自动消失，因此您无需重新加载该应用程序，您将不会丢失组件状态，Next.js框架支持IE11和所有现代浏览器!

Next.js软件功能

Next.js具有同类最佳的“开发人员体验”和许多内置功能。

直观的基于页面的路由系统(支持动态路由)

每页支持预渲染，静态生成(SSG)和端渲染(SSR)

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

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

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

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

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

完全可扩展

Next.js用于成千上万个面向生产的网站和Web应用程序，包括许多世界上最大的品牌。

Next.js软件特色

JavaScpt语言功能

Next.js允许您直接使用最新的JavaScpt功能。除ES6功能外，Next.js还支持：

Async/await (ES2017)

Object Rest/Spread Pperties (ES2018)

Dynamic import() (ES2020)

Optional Chaining (ES2020)

Nullish Coalescing (ES2020)

Class Fields and Static Pperties

TypeScpt功能

Next.js具有内置的TypeScpt支持。提供了集成的TypeScpt体验，类似于IDE。

自定义Babel Config(高级)

您可以自定义babel配置。

两种形式的预渲染Next.js具有两种预渲染形式：静态生成和端渲染。所不同的是，当它产生一个页面的HTML。

静态生成(推荐)：HTML是在构建时生成的，并将在每个请求上重用。

端渲染：HTML是在每个请求上生成的。

重要的是，Next.js使您可以选择要用于每个页面的预渲染形式。您可以通过对大多数页面使用“静态生成”，对其他页面使用“端渲染”来创建“混合” Next.js应用程序。

Next.js使用说明

系统要求Node.js 10.13或更高版本

支持MacOS，Windows(包括WSL)和Linux

设定我们建议您使用创建一个新的Next.js应用程序-next-app，它会自动为您设置所有内容。要创建项目，请运行：

安装完成后，请按照说明启动开发。尝试编辑pages/index.js并在浏览器上查看结果

手动设定安装next，reactreact-dom在您的项目中：

打开package.json并添加以下内容scpts：

这些脚本涉及开发应用程序的不同阶段：

dev-运行next dev以开发模式启动Next.js

build-运行next build以构建用于生产用途的应用程序

start-运行next start将启动Next.js生产

Next.js围绕页面的概念构建。页是一个阵营组件从出口.js，.jsx，.ts，或者.tsx在文件pages目录。

页面根据其文件名与路由关联。例如pages/about.js映到/about。您甚至可以使用文件名添加动态路由参数。

pages在您的项目中创建一个目录。

填充./pages/index.js以下内容：

要开始开发应用程序，请运行npm run dev或yarn dev。这将在上启动开发http://localhost:3000。

访问http://localhost:3000以查看您的应用程序。

到目前为止，我们得到：

自动编译和捆绑(使用webpack和babel)

快速刷新

静态生成和端渲染的./pages/

静态文件服务。./public/映到/

静态文件服务

Next.js可以public在根目录下的文件夹下提供静态文件(例如图像)。public，您的代码可以从基本L(/)开始引用其中的文件。

例如，如果您将图片添加到public/me.png，则以下代码将访问该图片：

此文件夹也是有用的bots.txt，favicon.ico，谷歌网站验证，以及任何其他静态文件(包括.html)!

注意：请勿为public目录命名。名称不能更改，并且是用于提供静态资产的唯一目录。

注意：请确保没有与pages/目录中的文件同名的静态文件，因为这将导致错误。

注意：Next.js仅服务public于构建时目录中的资产。在运行时添加的文件将不可用。我们建议使用第三方服务(例如AWS S3)进行持久文件存储。

图像组件和图像优化

从10.0.0版开始，Next.js具有内置的图像组件和自动图像优化功能。

Next.js图像组件，next/image是HTML

组态除了使用next/image组件可用的属之外，您还可以选择通过来针对更高级的用例配置Image Optimization next.config.js。

域要为外部网站上托管的图像启用“图像优化”，请为图像使用绝对L，src指定 domains允许进行优化的L 。这是确保不滥用外部网址所必需的。

装载机如果要使用云提供程序来优化映像，而不是使用Next.js的内置映像优化，则可以配置加载程序和路径前缀。这使您可以为图像使用相对L，src并自动为提供程序生成正确的绝对L。

支持以下图像优化云提供商：

Vercel：在Vercel上部署时自动运行，无需进行配置。学到更多

Imgix：loader: 'imgix'

Cloudinary：loader: 'cloudinary'

Akamai：loader: 'akamai'

默认：用自动工作next dev，next start或自定义