Next.js 是一個基於 React（一個用來構建用戶界面的流行庫）之上而構建的 JavaScript 框架。這意味着你可以使用 React 來構建應用程序，而 Next.js 提供了更多的工具和功能來使這個過程更簡單。
Next.js 的主要優點之一是它支持服務器端渲染。這意味着服務器可以爲頁面生成 HTML 並將它發送到客戶端，而不是在客戶端使用 JavaScript 生成 HTML。這可以提升性能和應用程序的 SEO（搜索引擎優化）。
Next.js 還包括一些在構建和部署 Web 應用程序時非常有用的其他功能。例如，它具有自動代碼拆分功能，應用程序只會加載當前頁面所需的代碼，而不是一次性加載所有代碼。這可以提升應用程序的性能。Next.js 還有一個內置的開發服務器和用來部署應用程序到生產環境的工具鏈。
通過上面的介紹，你對 Next.js 應該有了更多瞭解。現在讓我們一起看看 Next.js 13 又帶來了哪些新功能。
Next.js 13 有哪些新功能?
Next.js 13 是集成 React 的兩個身份（UI 庫和框架）的第一次全面嘗試。那麼，它有哪些新功能？
1. 可選的 App 目錄用於基於文件的路由
Next.js 最佳特性之一就是基於文件的路由。它可以使用項目目錄結構來指定路由，而不是在諸如 react-router 之類的程序中處理複雜的路由設置。通過在目錄頁中增加入口點，你可以創建一個新路徑。
Next.js 13 通過新目錄更新了文件路由。可選的 app 目錄引入了新的佈局結構以及一些新功能和改進。
由於新的路由機制，目錄結構發生了微小的變化。路由中的每個路徑都有一個包含 page.js 文件的專用目錄，這個 page.js 文件是 Next.js 13 中的內容入口點。
路由上的差異
由於採用了新的結構，我們現在可以在每個路徑目錄中包含其它文件。例如，page.js 針對一個路由：
layout.js — 一個路徑及其子路徑系統。
loading.js — 一個基於 React 的即時加載系統。
基於底層機制和 error.js，如果主組件不能加載，則會顯示一個異常組件。
我們現在可以在路徑目錄中定位源文件，因爲每個路徑就是它的目錄。
2. React 服務器端組件
Next.js 新版本中最令人興奮的就是對 React 服務器端組件的擴展支持。服務器端組件使我們可以在服務器端運行和渲染 React 組件，從而實現更快的交付、更小的 JavaScript 包以及開銷更少的客戶端渲染。
此外，根據生成路由所需的數據類型，服務器端組件會在構建時或運行時自動緩存來提高性能。
結合服務器端組件和客戶端組件，你可以將服務器端組件用於程序中快速加載、非交互性的部分，將客戶端組件用於交互、瀏覽器 API 和其它功能。
在爲 Next.js 應用程序構建客戶端組件時，你可以在文件頂部使用'use client'指令將其指定爲客戶端組件。如果你使用了任何第三方包，則可能需要創建一個客戶端包裝器。
3. 異步組件和數據獲取
此外，Next.js 13 引入了異步組件，這是一種爲服務器端渲染的組件收集數據的新方案。當使用異步組件時，我們可以通過 async & await 使用 Promises 來渲染系統。
當從返回 Promise 的外部服務或 API 請求數據時，我們將組件聲明爲 async 並等待響應：
async func getData() {
const res = await fetch ('https://api.shamim.com/...');
return res.json();
}
export default async function About() {
const name = await getData();
return '...';
}
下面的例子演示了 Next.js 12 從第三方服務獲取數據的方法：
export default function About({data}) {
return '...';
}
function getServerSideProps(){
// Fetch data from external API
const res = await fetch(https://.../data)
const data = await res.json()
// Pass data to the page via props return
return {
props: { data }
}
}
這種方式簡化了 API 請求，並且在新版本中非常直觀且易於理解。
4. 流式加載
以前，用戶可能需要等待生成完整的頁面。現在，服務器會在生成 UI 小片段時直接傳送給客戶端。這意味着較大的片段不會阻礙較小的片段。當然，到目前爲止，該功能只支持 app 目錄，而且這一點看起來不會改變。
這項新功能給具有強信號網絡連接或快速 Wi-Fi 的人所帶來的好處比不上給那些弱信號網絡連接的人帶來的好處。事實上，它們所帶來的好處比你想象的要多得多。更快的站點加載時間將提升用戶體驗，這點是非常棒的。
5. Turbopack
Next.js 13 版本中引入的最後一個重要變化是一個名爲 Turbopack 的新 JavaScript 包，它被稱爲“Webpack 的繼任者”。Webpack 是最常用的 JavaScript 構建工具之一，功能強大且可配置，但有時會非常慢且複雜。
Turbopack 是由 Webpack 的創建者開發，用 Rust 創建，其速度有望比最初的 Webpack 快 700 倍（比更現代的替代品 Vite 快 10 倍）。
其他升級next/image
Next.js 中的新 Image 組件包括更少的客戶端 JavaScript、樣式和配置，改進了可訪問性。在代碼層面的變化，next/legacy/image 導入變成了 next/image，next/future/image 導入變成了 next/image。有一個 codemod 可以用來進行快速遷移。
- next/font
你可以將 Google Fonts（或者任何其它自定義字體）與 @next/font 一起使用，無需瀏覽器提交任何查詢。除了其它靜態資源外，CSS 和字體文件都是在構建時下載。
- next/link
這是一種新穎的字體系統，通過提供自動字體優化、集成自定義字體以及所有這些功能無需使用任何外部網絡請求，從而提高了效率和隱私。
結論
Next.js 13 無疑包含了幾個很酷的功能和顯著的更新。但是由於它的很多功能給人感覺是未完成的半成品，所以只能算是一個預覽測試版本。甚至最新的 React 中一些尖端功能（這些功能被大量使用但仍處於 RFC 階段）也經常不包括在內。
雖然我不建議在生產環境中使用 Next.js 13，但你上手應該試一試。
原文鏈接：https://blog.bitsrc.io/why-next-js-13-is-a-game-changer-2167658d9de2