Next 3.0前瞻：静态导出和动态导入

最新推荐文章于 2024-07-20 23:54:17 发布

陈秋歌

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量3.2k

点赞数

文章标签：应用导入动态渲染代码

本文链接：https://blog.csdn.net/chenqiuge1984/article/details/80129692

版权

Next.js 3.0 引入了next-export指令，允许无缝构建为静态网站，无需服务端即可部署。此外，动态导入特性基于TC39草案，实现了按需加载组件，提高代码分割的精细度，支持服务端渲染，减少客户端加载等待时间。通过next export构建的应用几乎支持Next.js所有功能，包括动态URL、预加载和动态导入。

摘要由CSDN通过智能技术生成

原文链接：Next 3.0 Preview: Static Exports and Dynamic Imports
作者：Arunoda Susiripala
译者：周余飞，数观科技前端搬运工，工作之余喜欢研究Canvas和WebGL，痴迷数据可视化，TypeScript重度使用者。博客地址：http://supperjet.github.io。

Next.js是一种基于服务端渲染React应用的通用JavaScript框架，已经在Github上开源。目前，最新版本是Beta版的Next.js 3.0。对于还不了解Next.js为何物的同学，可以前去官网体验一下Next.js的新玩法。本文主要介绍即将到来的Next.js 3.0版本中的两个新特性：next-export和动态组件（Dynamic Components）。

Next.js提供了一系列的新特性，它可以使我们编写的React应用在服务端完成渲染（server-rendering），其代码自动拆分功能（Automatic Code Splitting）可以使你的页面无需加载不相关的代码，并且可以在组件内编写CSS，你所要做的只是在相应的位置加上{…}，就像下面这样。

export default () => (
  <div>
    Hello world
    <p>scoped!</p>
    <style jsx>{
    `
      p {
        color: blue;
      }
      div {
        background: red;
      }
      @media (max-width: 600px) {
        div {
          background: blue;
        }
      }
    `}</style>