Nextjs

Nextjs v10

内置Image组件实现主动图片优化性能

<img src="/profile-picture.jpg" width="400" height="400" alt="Profile Picture">

import Image from 'next/image'<Image src="/profile-picture.jpg" width="400" height="400" alt="Profile Picture">

• 实现懒加载 在看到图片时再渲染
• 图片尺寸固定，防止渲染时布局发生变化从新渲染界面
• 图片自适应安装

属性

layout属性值

• fixed：图片固定 不会因为视口的扭转而扭转图片的大小
• intrinsic：视图窗口较小时放大图片 但不会放大图片
• responsive：随着视图窗口的变动而自适应
• fill：将图片拉伸到父元素尺寸

国际化路由

依据路由来判断翻译成哪种语言

• Subpath routing(/nl-nl/blog and /en/blog)

     // next.config.js   module.exports = {     i18n: {       locales: ['en', 'nl'],       defaultLocale: 'en'     }   }

• Domain routing(example.nlandexample.com)

  // next.config.jsmodule.exports = {  i18n: {    locales: ['en', 'nl'],    domains: [      {        domain: 'example.com',        defaultLocale: 'en'      },      {        domain: 'example.nl',        defaultLocale: 'nl'      }    ]  }}

禁止国际化映射

// next.config.jsmodule.exports = {  i18n: {    localeDetection: false,  },}

Next.js Analytics

掂量用户理论性能并加以调整

Next.js Commerce

实用于高性能电子商务网站的多合一启动套件

兼容react17最新版本

放慢预渲染

getStaticProps / getServerSideProps Fast Refresh: 在对数据获取办法进行编辑时，主动从新加载各项属性

@next/mdx疾速渲染

应用 @next/mdx，Fast Refresh 现可间接利用更改而无需从新加载整个页面

反对从第三方组件导入css

现反对从 npm 处导入组件所须要的 CSS

next/link

主动解析 href:next/link 上不再须要 as 属性

<Link href="/categories/[slug]" as="/categories/books">

@next/codemod CLI

@next/codemod CLI: 容许您轻松拜访全副 Next.js codemods

getStaticPaths

勾销 getStaticPaths 回退: 在生成新的动态页面时间接期待预渲染后果，而不再提供动态回退页面

Nextjs v9.5

稳固的增量动态再生 ：部署后以毫秒为单位重建动态页面

可自定义的根本门路 ：在域的子门路上轻松托管 Next.js 我的项目

引入了一个新的配置选项 basePath

  // next.config.js       module.exports = {     basePath: '/docs'   }    

配置 basePath 之后，你的我的项目将主动从提供的门路路由。本例中为 /docs。

当应用 next/link 或 next/router 链接到我的项目中的其余页面时，basePath 将主动增加前缀。这使你无需更改我的项目即可更改 basePath。

反对重写、重定向和标头 ：重写虚构 URL，重定向旧 URL，向动态页面增加标头

• 重写

Next.js 9.5 引入了一个名为 rewrites 的配置选项，容许你将传入的申请门路映射到其余指标门路上，包含内部 URL。

 // next.config.js      module.exports = {      async rewrites() {         return [            { source: '/backend/:path*', destination: 'https://example.com/:path*' }          ]         }    

• 重定向

能够在 next.config.js 中的 redirects 键下创立重定向列表

   // next.config.js  module.exports = {     async redirects() {       return [         {           source: '/about',           destination: '/',           permanent: true         }       ]    }  }

• 标头

  // next.config.js       module.exports = {         async headers() {           return [             {               source: '/:path*',               headers: [                 {                   key: 'Feature-Policy',                   // Disable microphone and geolocation                   value: "microphone 'none'; geolocation 'none'"                 }               ]             }           ]         }    }

URL 中的可选尾斜杠 ：始终强制去除 / 显示尾斜杠

默认行为是所有带有尾斜杠的 URL 始终返回 404 页面
Next.js 9.5 在 next.config.js 中引入了一个名为 trailingSlash 的新选项。

• 主动将尾斜杠 URL 重定向到没有尾斜杠的 URL，例如：/about/ 到 /about
• 当 trailingSlash 设置为 true 时，不带斜杠的 URL 将被重定向到带斜杠的 URL，例如：/about 到 /about/
• 确保 next/link 具备主动利用 / 删除的尾斜杠，以防止不必要的重定向。

   // next.config.js       module.exports = {         // Force a trailing slash, the default value is no trailing slash (false)         trailingSlash: true    

永恒缓存页面包 ：未更改页面的 JavaScript 文件当初能够在各个版本之间继承

从 Next.js 9.5 开始， 所有页面 JavaScript 包都将应用内容哈希代替构建 ID 。这容许在各个部署之间未更改的页面保留在浏览器和边缘缓存中，而无需再次下载。

/_next/static/ovgxWYrvKyjnlM15qtz7h/pages/about.js/_next/static/chunks/pages/about.qzfS4o5gIEXRME6sTEahL.js

疾速刷新加强 ：加强了 Next.js 实时编辑体验的可靠性

Production React Profiling ：掂量我的项目渲染“老本”的新标记

可选的“捕捉所有路由” ：动静路由当初为 SEO 驱动的用例提供了更大的灵活性

Webpack 5 反对（测试版） ：可选地退出 Webpack 5，以改良构建体积和速度

参考文章

Next.js 10正式公布：带来诸多新个性