<tbody id="5vw1z"></tbody>
<rp id="5vw1z"></rp>
  •  

    Next.js 12 重大發布!打造現代化前端框架

    Next.js 12 重大發布!打造現代化前端框架

    就在剛剛過去的 10 月 27 日,Next.js?團隊官宣了 12 版本發布。

    就像在?Next.js Conf?上宣布的那樣,Next.js 12?是?Next.js?有史以來最大的版本,更新概覽如下:

    • 采用Rust 編譯器:刷新速度提升 3 倍、構建速度提升約 5 倍的;
    • Middleware (beta):通過配置代碼在 Next.js 中實現完全的靈活性;
    • React 18 支持:支持?Suspense、React Server Components 等新特性;
    • <Image />AVIF 支持:選擇縮小 20% 的圖像;
    • Bot-aware ISR Fallback:為網絡爬蟲優化 SEO;
    • 原生 ES 模塊支持:與標準化的模塊系統保持一致;
    • URL Imports (alpha):支持從任何 URL 導入包(比如CDN),無需通過npm安裝。

    我們可以通過?npm i [email protected]?安裝最新版的?Next.js。

    Rust 編譯器

    Next.js 12?現在默認啟用了 Rust 編譯器,這使它大概提高了3倍的刷新速度和5倍的構建速度。

    這其實也是 Rust 邁出的一大步,因為它的穩定性現在在世界上最大的代碼庫之一上面得到的驗證。

    Rust 編譯器

    在編譯方便,使用?Rust?進行編譯比?Babel?快了?17?倍,另外他們對?webpack?進行了大量的改進,包括優化快速刷新和按需引入。

    Next.js 團隊為了從 Babel 遷移到 Rust 費了不小的功夫,比如他們實現了一個新的?Rust CSS?解析器?styled-jsx。

    在壓縮方面,Rust?編譯器比?Terser?壓縮的速度要快 7 倍,壓縮是可選的:

    // next.config.js
    
    module.exports = {
      swcMinify: true
    }

    值得注意的是,Next.js?的?Rust?編譯器是基于?SWC?實現的。

    swc 是一個用 Rust 寫的高性能 TypeScript / JavaScript 轉譯器,類似于 babel。

    swc 是一個用 Rust 寫的高性能 TypeScript / JavaScript 轉譯器

    為此,Next.js?還專門把?SWC?作者?DongYoon Kang?和?Parcel?的核心貢獻者?Maia Teegarden?挖過去了。

    Middleware

    Next.js 12 在這個版本引入了中間件的概念,這就類似于 Koa 框架里面的中間件,它能讓你通過代碼來實現更靈活的操作,而不只是通過那些煩人的配置。

    Middleware

    在中間件里,你可以拿到用戶的完整請求,然后你就可以對請求進行重寫、重定向、添加 Header 等操作。

    中間件里也支持例如?fetch?這樣的標準運行時?Web API。

    如果想要在 Next.js 中使用中間件,你可以創建一個?pages/_middleware.js?文件:

    // pages/_middleware.js
    
    export function middleware(req, ev) {
      return new Response('Hello, world!')
    }

    React 18 支持

    Next.js?團隊一直在和?Facebook?團隊保持著緊密的合作, 雖然現在?React 18?只發布了?alpha?版本,在?Next.js 12?中依然為它提供了支持。

    npm install [email protected] [email protected]

    你只需要開啟一些實驗配置就可以使用?React 18?中的?Suspense、全自動批處理、startTransition?這些 API。

    流式服務端渲染

    React 18?中的并發渲染包括對服務器端?Suspense?和?SSR?流式渲染的支持,你可以通過開啟下面的配置啟用:

    // next.config.js
    module.exports = {
      experimental: {
        concurrentFeatures: true
      }
    }

    React Server Component

    React Server Component

    React Server Component?就是讓組件擁有在服務端渲染的能力,從而解決?用戶體驗、可維護性、性能?這個不可能的三角問題。

    Server Component 的主要兩點如下:

    • 運行在服務端的組件只會返回 DSL 信息,而不包含其他任何依賴,因此 Server Component 的所有依賴 npm 包都不會被打包到客戶端。
    • 可以訪問服務端任何 API,也就是讓組件擁有了 Nodejs 能擁有的能力,你理論上可以在前端組件里干任何服務端才能干的事情。
    • Server Component 與 Client Component 無縫集成,可以通過 Server Component 無縫調用 Client Component。
    • Server Component 會按需返回信息,在當前邏輯下,走不到的分支邏輯的所有引用都不會被客戶端引入。比如 Server Component 雖然引用了一個巨大的 npm 包,但某個分支下沒有用到這個包提供的函數,那客戶端也不會下載這個巨大的 npm 包到本地。
    • 由于返回的不是 HTML,而是一個 DSL,所以服務端組件即便重新拉取,已經產生的 State 也會被維持住。比如說 A 是 ServerComponent,其子元素 B 是 Client Component,此時對 B 組件做了狀態修改比如輸入一些文字,此時觸發 A 重新拉取 DSL 后,B 已經輸入的文字還會保留。
    • 可以無縫與 Suspense 結合,并不會因為網絡原因導致連 Suspense 的 loading 都不能及時展示。
    • 共享組件可以同時在服務端與客戶端運行。

    你可以通過下面的配置開啟:

    // next.config.js
    module.exports = {
      experimental: {
        concurrentFeatures: true,
        serverComponents: true
      }
    }

    ES Modules

    ES Modules?為?JavaScript?帶來了官方的、標準化的模塊系統。目前所有主流瀏覽器以及Node.js?都對它提供了支持。

    使用?ES Modules?可以大大的減少模塊依賴解析的時間,并且可以減小包體積。

    從?Next.js 11.1?開始,Next?添加了對?ES Modules?優先于?CommonJS?模塊的實驗性支持。在?Next.js 12?中,默認開啟,但是現在也仍然支持導入僅提供?CommonJS?的?NPM?包。

    URL imports

    從?Next.js 12?開始,我們可以直接通過?URL?導入任何一個包,Next.js?能夠像處理本地依賴一樣處理遠程?HTTP(S)?資源。

    import confetti from 'https://cdn.skypack.dev/canvas-confetti'

    如果檢測到?URL imports?,Next.js?會生成一個?next.lock?文件來跟蹤遠程資源。URL imports?導入的包會在本地緩存一份,所以我們也不用擔心沒有網不能用。

    我們只需要將允許導入的 url 前綴添加到配置文件中就可以了:

    module.exports = {
      experimental: {
        urlImports: ['https://cdn.skypack.dev']
      }
    }

    支持 AVIF 圖片

    內置的圖像優化?API?現在支持?AVIF?格式了,與?WebP?相比,圖像會小?20%。

    支持 AVIF 圖片

    與?WebP?相比,AVIF?格式可能需要更長的時間來優化,所以我們可以通過配置?next.config.js?的?images.formats?屬性來進行選擇性啟用。

    module.exports = {
      images: {
        formats: ['image/avif', 'image/webp']
      }
    }

    另外,對于不同瀏覽器的兼容情況,Next.js?會根據瀏覽器的嗅探情況,自動選擇用?AVIF?或?Webp。

    更多詳情請關注 Next.js 官方博客:傳送門

    「點點贊賞,手留余香」

    1

    給作者打賞,鼓勵TA抓緊創作!

    微信微信 支付寶支付寶

    還沒有人贊賞,快來當第一個贊賞的人吧!

    聲明:
    1. 本站所有文章教程及資源素材均來源于網絡與用戶分享或為本站原創,僅限用于學習和研究。
    2. 如果內容損害你的權益請聯系客服QQ:1642748312給予處理。
    碼云筆記 » Next.js 12 重大發布!打造現代化前端框架

    發表回復

    IT互聯網行業相關廣告投放 更專業 更精準

    立即查看 聯系我們
    亚洲 自拍 另类小说综合图区