vlambda博客
学习文章列表

Next.js 10.2正式发布,React应用的后端渲染

文 | 局长

出品 | OSC开源社区(ID:oschina2013)

Next.js 10.2 稳定版已发布,主要变化如下:

  • 提升构建速度:使用缓存后的构建速度提升了大约 60%

  • 提升刷新速度:刷新时间提升了大约 100ms 到 200ms

  • 提升启动速度next dev的启动速度提升了大约 24%

  • 改进可访问性:屏幕阅读器改变路由

  • 更灵活的重定向和重写:支持匹配任意 header, cookie 或 query string

  • 自动 Webfont 优化通过内联字体 CSS 来提升性能

Next.js 是一个用于生产环境的 React 框架,提供了生产环境所需的所有功能以及最佳开发体验:包括静态及服务器端融合渲染、支持 TypeScript、智能化打包、路由预取等功能,无需任何配置。

Next.js 10.2正式发布,React应用的后端渲染


Webpack 5


开发团队表示,在 Next.js 10.1 中,他们优化了“快读刷新”功能并减少了安装时间,现在又通过 Webpack 5 实现了其他的性能改进。

启用 Webpack 5 后,使用者可自动获得新功能和改进。例如:改进磁盘缓存、改进快速刷新、改进资源的长期缓存和改进 Tree Shaking。


改进的启动性能


Next.js 团队改进了 Next.js CLI 的初始化,使next dev首次运行后的启动时间缩短了大约 24%。例如,vercel.com 的next dev从 3.3 秒变为 2.5 秒。


更灵活的重定向和重写


Next.js 的重写、重定向和 header 现在支持新的has属性,可用于匹配传入的 header、cookie 和查询字符串。举个例子,Verce l客户 Joyn 使用has来优化内容的可发现性和性能。例如,可以根据 User-Agent 重定向旧的浏览器。

// next.config.js

module.exports = {
 async redirects() {
   return [
     {
       source: '/:path*',
       has: [
         {
           type: 'header',
           key: 'User-Agent',
           value:
             'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; Microsoft; Lumia 950)'
         }
       ],
       destination: '/old-browser',
       permanent: false
     }
   ]
 }
}
另一个示例是根据用户的位置重定向用户:
// next.config.js

module.exports = {
 async redirects() {
   return [
     {
       source: '/:path*',
       has: [
         {
           type: 'header',
           key: 'x-vercel-ip-country',
           value: 'GB'
         }
       ],
       destination: '/:path*/uk',
       permanent: true
     }
   ]
 }
}
如果用户已经登录,也可以进行重定向:
// next.config.js

module.exports = {
 async redirects() {
   return [
     {
       source: '/:path*',
       has: [
         {
           type: 'header',
           key: 'x-authorized',
           value: '(?<authorized>yes|true)'
         }
       ],
       destination: '/dashboard?authorized=:authorized',
       permanent: false
     }
   ]
 }
}
详细更新说明查看发布公告: https://nextjs.org/blog/next-10-2


Next.js 10.2正式发布,React应用的后端渲染



觉得不错,请点个在看