應用程序目錄在 Next.js 13 中的工作原理
Next.js 13 引入了一個使用 app 目錄的新路由系統。Next.js 12 已經提供了一種通過基於文件的路由來處理路由的簡單方法。將組件添加到 pages 文件夾會自動使其成為路由。在這個新版本中，基於文件系統的路由器帶有內置的佈局設置、模板嵌套路由、加載 UI、錯誤處理以及對服務器組件和流的支持。
本文解釋了這些新功能及其重要性。
Next.js 入門 13
通過在終端中運行以下命令來創建您自己的 Next.js 13 項目。
npx create-next-app@latest next13 --experimental-app
這應該使用新的應用程序目錄創建一個名為 next13 的新文件夾。
了解新的應用程序目錄
Next.js 12 使用pages目錄進行路由，但在 Next.js 13 中它被替換為app/目錄。pages /目錄在 Next 13 中仍然有效以允許增量採用。您只需要確保您不會在同一路徑的兩個目錄中創建文件，因為您會收到錯誤消息。
這是應用程序目錄的當前結構。
在 app 目錄中，您使用文件夾來定義路由，這些文件夾中的文件用於定義 UI。還有一些特殊文件，例如：
- page.tsx – 用於為特定路由創建 UI 的文件。
- layout.tsx – 它包含路由的佈局定義，可跨多個頁面共享。它們非常適合導航菜單和側邊欄。在導航時，佈局會保留狀態並且不會重新呈現。這意味著當您在共享佈局的頁面之間導航時，狀態保持不變。需要注意的一件事是，必須有一個最頂層佈局（根佈局）包含整個應用程序共享的所有 HTML 和 body 標籤。
- template.tsx –模板類似於佈局，但它們不保留狀態，並且每次用於創建頁面時都會重新呈現。模板非常適合每次安裝組件時都需要運行特定代碼的情況，例如，進入和退出動畫。
- error.tsx –此文件用於處理應用程序中的錯誤。它用 React 錯誤邊界類包裝一個路由，這樣當該路由或其子路由發生錯誤時，它會嘗試通過呈現用戶友好的錯誤頁面來從錯誤中恢復。
- loading.tsx –當路由 UI 在後台加載時，加載 UI 會立即從服務器加載。加載 UI 可以是微調器或骨架屏幕。路由內容加載後，它會替換加載 UI。
- not-found.tsx –當 Next.js 遇到該頁面的 404 錯誤時呈現未找到的文件。在 Next.js 12 中，您必須手動創建和設置 404 頁面。
- head.tsx –該文件指定了它在其中定義的路由段的 head 標記。
如何在 Next.js 13 中創建路由
如前所述，路由是使用app/目錄中的文件夾創建的。在此文件夾中，您必須創建一個名為page.tsx的文件，用於定義該特定路由的 UI。
例如，要創建路徑為/products的路由，您需要創建一個app/products/page.tsx文件。
對於像/products/sale這樣的嵌套路由，將文件夾相互嵌套，使文件夾結構看起來像app/products/sale/page.tsx。
除了一種新的路由方式之外，應用程序目錄支持的其他有趣功能是服務器組件和流媒體。
在應用程序目錄中使用服務器組件
app 目錄默認使用服務器組件。這種方法減少了在服務器上呈現組件時發送到瀏覽器的 JavaScript 數量。這提高了性能。
有關更深入的解釋，請參閱這篇關於 Next.js 中不同渲染方法的文章。
服務器組件意味著您可以安全地訪問環境機密，而不會將它們暴露在客戶端。例如，您可以使用process.env。
您也可以直接與後端交互。無需使用getServerSideProps或getStaticProps，因為您可以在服務器組件中使用 async/await 來獲取數據。
考慮這個從 API 獲取數據的異步函數。
async function getData() {
try{
const res = await fetch('https://api.example.com/...');
return res.json();
} catch(error) {
throw new Error('Could not fetch data')
}
}
可以直接在頁面調用，如下：
export default async function Page() {
const data = await getData();
return <div></div>;
}
服務器組件非常適合呈現非交互式內容。如果您需要使用 React 掛鉤、事件偵聽器或僅限瀏覽器的 API，請在任何導入之前通過在組件頂部添加“使用客戶端”指令來使用客戶端組件。
App目錄中的增量流組件
流式處理是指將部分 UI 逐步發送到客戶端，直到呈現所有組件。這允許用戶在呈現其餘內容的同時查看部分內容。為了給用戶更好的體驗，渲染一個像微調器一樣的加載組件，直到服務器完成渲染內容。您可以通過兩種方式執行此操作：
- 創建將為整個路線段呈現的loading.tsx文件。
export default function Loading() {
return <p>Loading...</p>
}
- 使用 React Suspense 邊界包裝單個組件並指定後備 UI。
import { Suspense } from "react";
import { Products } from "./Components";
export default function Sale() {
return (
<section>
<Suspense fallback={<p>Products...</p>}>
<Products />
</Suspense>
</section>
);
}
在呈現 Products 組件之前，用戶將看到“Products…”。就用戶體驗而言，這比空白屏幕更好。
升級到 Next.js 13
新的 app 目錄絕對是對以前 pages 目錄的改進。它包括特殊文件，如佈局、頭部、模板、錯誤、未找到和加載，這些文件在渲染路由時處理不同的狀態，而無需手動設置。
此外，app 目錄還支持流媒體和服務器組件，從而提高性能。雖然這些功能對用戶和開發人員都非常有用，但其中大部分目前處於測試階段。
但是，您仍然可以升級到 Next.js 13，因為頁面目錄仍然有效，然後按照您自己的節奏開始使用應用程序目錄。
發佈留言