Next.js 9.1 | Next.js 框架

今天，我们很高兴宣布 Next.js 9.1 发布，支持 src 和 public 目录。

本次发布的新功能

src 目录支持：pages 目录现在可以嵌套在 src 文件夹下，支持更广泛的应用程序设置。
public 目录支持：定义将挂载到应用程序 URL 根目录的文件（例如 favicon.ico）。

本次发布预览

内置 CSS 支持：应用程序很快就可以导入全局 CSS，并利用开发热重载和高级生产优化、编译和 polyfilling。
静态错误页面：静态导出预期错误页面（如 404），以提高可用性 (CDN)。
Module / Nomodule：向在常青浏览器上运行的最终用户发送更小的 JavaScript 包。
改进的打包拆分：向最终用户发送更少的字节，从而提高 TTI 和页面过渡速度。大型库块也可以在多次部署中长期缓存。

一如既往，我们力求确保所有这些优势都向后兼容。您只需运行以下命令即可更新

npm i next@latest react@latest react-dom@latest

如果您的应用程序使用的是 Next.js 9 之前的版本，您可以参考升级指南，了解您可能需要升级的更改。

自上次主要版本发布以来，我们很高兴看到像TikTok、Hilton、Elastic、Realtor 和 JW Player 等公司使用 Next.js 发布产品。查看展示页面了解更多！

`src` 目录支持

Next.js 有一个特殊的 pages 目录，其中每个文件都成为一个单独的路由，遵循约定优于配置的方法，此目录必须位于 Next.js 应用程序的根目录中。

在与使用 Next.js 的公司交流并检查一些闭源代码库时，我们发现开发人员普遍希望为他们的代码设置一个 src 目录，并且 pages 目录也位于其中。

从 Next.js 9.1 开始，现在可以创建一个 src/pages 目录，而不是在应用程序的根目录中创建 pages 目录。

使用 src 目录是可选的，并且涵盖了您的公司已经有此标准的情况。

The pages folder in the src directory directory — src 目录中的 pages 文件夹

`public` 目录支持

除了 pages 目录，Next.js 还有一个名为 static 的特殊目录，其中的文件会映射到 /static 路由。

例如，static/my-image.png 将映射到 /static/my-image.png。

这个约定自 Next.js 首次发布以来一直运行良好，并没有特别的问题。

然而，随着时间的推移，我们发现 /static 无法涵盖 Web 应用程序所需的所有内容。例如，robots.txt 必须从域的根目录提供。

从 Next.js 9.1 开始，我们引入了一个名为 public 的新目录。

public 目录中的任何文件都将映射到域的根目录。

例如，public/robots.txt 将映射到 /robots.txt。

由于 public 也涵盖了 static 目录的用例，我们决定弃用 static 目录，转而创建具有相同功能的 public/static 文件夹。

一如既往，我们力求向后兼容，因此 static 目录将继续工作，并显示弃用消息。

即将推出

以下功能目前处于实验阶段，一旦最终实现准备就绪，就会发布。

内置 CSS 支持

目前，Next.js 有一个内置的 CSS-in-JS 解决方案，名为 styled-jsx。此解决方案非常适合为单个 React 组件设置样式。

然而，在与公司交流时，我们发现普遍需要重用一些基于 CSS 的现有样式或设计系统。

通常，这意味着添加 next-css 插件以添加 CSS 导入支持。

我们发现大约 50% 的 Next.js 用户将此插件添加到他们的应用程序中。

由于这种广泛的使用，我们正在添加对 CSS 导入的内置支持，并在开发中自动重新加载样式，以及 next-css 插件中以前无法实现的生产优化。

初始实现目前正在生产 Next.js 应用程序上进行测试。

首先将引入全局 CSS 导入

// Global styles can be imported from _app.js
import '../styles/global.css';
import App from 'next/app';
 
export default App;

在全局 CSS 导入之后，我们将通过 .module.css 扩展名引入对 CSS 模块的支持

// Scoped styles are imported through .module.css
import styles from '../styles/index.module.css';
 
export default function HomePage() {
  return <h1 className={styles.heading}>Hello World</h1>;
}

这将使我们能够在使用 CSS 导入时提供显着更好的开发人员体验。

您可以在 GitHub 上的 RFC 上阅读有关正在进行的工作的更多信息。

静态错误页面

Next.js 在发生错误时会渲染一个特殊页面，该页面内部称为 /_error。用户可以通过创建导出 React 组件的 pages/_error.js 文件来自定义此页面。

渲染的错误通常分为两种情况：预期错误和意外错误。

例如，预期错误是 404 页面。

意外错误是指，例如，在 getInitialProps 中或在渲染 React 树时抛出错误，这会导致渲染 500。

我们计划为预期错误添加自动静态优化，因为它们通常不需要动态渲染。

如果用户想要动态渲染这些页面，将有一个选择退出选项，但默认情况下 404 将是静态页面。这在使用 server 目标时减少了服务器负载，并在使用 serverless 目标时降低了成本。

使页面静态化的另一个好处是，在使用 CDN 时可以自动缓存。

Google Chrome 合作

正如在 Next.js 9 发布公告中分享的那样，Google Chrome 团队正在投入资源改进 Next.js，并一直致力于多项工作，以大幅提高所有 Next.js 应用程序的性能。

要了解有关此协作的更多信息，您可以阅读 Next.js 9 公告，并观看 Nicole Sullivan 在 React Rally 上的演讲。

Module / Nomodule

在 Next.js 中编写代码时，您通常会编写“现代”JavaScript。您可以使用所有最新的稳定功能，Next.js 会通过使用 Babel 编译代码来自动确保这些功能通过转换或 polyfilled。

目前，许多这些 JavaScript 功能都得到了大多数浏览器的支持。然而，通常（包括在 Next.js 中）代码以单个 JavaScript 包的形式发布，该包在应用程序支持的所有浏览器上运行。

对于 Next.js，这意味着将现代 JavaScript 编译为与 Internet Explorer 11 兼容的格式。

例如，目前 Next.js 必须为 async/await 语法提供 polyfills，因为代码可能会在不支持 async/await 的浏览器中执行，这会导致崩溃。

为了避免破坏旧版浏览器，同时向支持较新语法的浏览器发送现代 JavaScript，Next.js 将利用 module/nomodule 模式。module/nomodule 模式提供了一种可靠的机制，用于向现代浏览器提供现代 JavaScript，同时允许旧版浏览器回退到 polyfilled ES5 代码。

这项新功能目前正在由多个大型 Next.js 应用程序在生产环境中进行测试，以收集真实世界数据。这些测试的结果看起来很有希望，关于此更改的性能改进的更多细节将很快分享。

改进的打包拆分

Next.js 目前加载多个 JavaScript 包以使页面具有交互性。最值得注意的是

页面 JavaScript 包。
包含常用 JavaScript 的文件。
Next.js 客户端运行时包。
动态导入（通常通过 next/dynamic 添加）。

为了确保页面变得具有交互性，所有这些捆绑包都必须加载，因为它们都相互依赖才能在浏览器中启动 React。

由于这些捆绑包必须加载才能启动 React，因此它们尽可能优化并且不会从应用程序的其余部分过度下载太多代码非常重要。

因此，有一个 commons 捆绑包，其中包含页面之间的通用 JavaScript。当前捆绑包拆分策略生成 commons 的计算基于比例启发式，如果一个模块在所有页面中的使用率达到 50%，它将被标记为通用模块。

然而，应用程序可能由许多不同的部分组成。例如，营销页面、博客和仪表板。如果营销页面的数量相对于仪表板来说很多，那么公共计算将为营销页面带来更优化的结果。

我们的目标是在一个应用程序中同时优化这两者。

Alex Castle 定义了一个新的分块层（创建单独的 JavaScript 文件），它允许更优化的公共分块与多个文件一起使用，尤其是在涉及许多页面时。

与 module/nomodule 支持类似，改进的打包拆分正在由多个大型 Next.js 应用程序在生产环境中进行测试，以收集真实世界数据。这些测试的结果以及此更改的性能改进的更多详细信息将很快在单独的博客文章中分享。

社区

我们对即将到来的变化感到兴奋，这些变化将改善所有 Next.js 应用程序的性能。

此外，Next.js 社区仍在不断壮大

我们有超过 800 名贡献者至少提交了 1 次提交。
在 GitHub 上，该项目已获得超过 41,350 次星标。
示例目录有超过 210 个示例。

Next.js 社区现在拥有超过 11,250 名成员。加入我们！

我们感谢社区以及所有帮助塑造此版本的外部反馈和贡献。