[TOC] > [中文手冊](https://nextjscn.org/docs) ## 安裝 ``` npx create-next-app@latest ``` ## app目錄和pages目錄 `pages`?目錄: * **文件系統路由**:?`pages`?目錄一直以來是 Next.js 中基于文件的路由系統的核心。每個文件都與一個路由自動對應起來。 * **固定布局**: 在?`pages`?目錄中，布局通常是通過每個頁面組件或通過 \_app.js 文件來共享的，并沒有內建的方式來支持嵌套布局。 * **數據獲取**: 頁面組件可以導出?`getStaticProps`?和?`getServerSideProps`?函數，用于在構建時或每次請求時進行數據獲取。 `app`?目錄 **[推薦]**: * **文件系統路由**:?`app`?目錄保留了這種路由方式，但增加了對嵌套路由和布局的支持。 * **嵌套布局**:?`app`?目錄內，可以通過文件結構來直接定義嵌套布局，讓開發者能夠為某個子路由或者整個應用定義布局組件。 * **`page`?組件**:?`app`?目錄引入了?`page`?組件概念，這些組件可以定義它們自己的數據獲取需求，并且能夠在布局中嵌套。 * **增強的數據獲取**:?`app`?目錄允許使用新的?`fetch`?函數直接在組件中定義數據獲取，以SSR的方式將數據發送到客戶端。 > 推薦使用 app 布局 > 如果你創建了一個 app 目錄，Next.js 將會優先使用 app 目錄中的路由和邏輯。如果某個路由在 app 目錄沒有對應的頁面，Next.js 將回退到 pages 目錄查找。 > 以下內容默認都是 app 布局 ## src 目錄 如果需要 src ,只需要把 app 或 pages 移動到 src 即可