Next.js 9.1

今天，我們很高興宣布 Next.js 9.1 版本，並支援 src 和 public 目錄。

此版本的新功能

• src 目錄支援：pages 目錄現在可以巢狀於 src 資料夾下，支援更廣泛的應用程式設定。
• public 目錄支援：定義要掛載在應用程式 URL 根目錄下的檔案 (例如 favicon.ico)。

此版本預覽功能

• 內建 CSS 支援：應用程式很快就可以匯入全域 CSS，並利用開發熱重載和進階的生產最佳化、編譯和 polyfill。
• 靜態錯誤頁面：靜態匯出預期的錯誤頁面 (例如 404)，以獲得更好的可用性 (CDN)。
• Module / Nomodule：為在常青瀏覽器上執行的終端使用者提供更小的 JavaScript 套件。
• 改進的套件拆分：向您的終端使用者傳送更少的位元組，從而改善 TTI 和頁面轉換速度。大型函式庫區塊也在跨部署中長期快取。

一如既往，我們力求確保所有這些優點都向後相容。您只需執行以下命令即可更新

npm i next@latest react@latest react-dom@latest

如果您的應用程式使用的 Next.js 版本早於 9，您可以參考升級指南，了解您可能需要升級的變更。

自上次主要版本發布以來，我們很高興看到像 TikTok、Hilton、Elastic、Realtor 和 JW Player 等公司使用 Next.js 發布產品。查看範例展示以了解更多資訊！

src 目錄支援

Next.js 有一個特殊的 pages 目錄，其中每個檔案都會成為一個單獨的路由，遵循慣例優於設定的方法，此目錄必須位於 Next.js 應用程式的根目錄中。

在與使用 Next.js 的公司交談並檢查一些閉源程式碼庫後，我們確立了開發人員想要的一個常見模式是為他們的程式碼建立一個 src 目錄，並將 pages 目錄也放在其中。

從 Next.js 9.1 開始，現在可以建立 src/pages 目錄，而不是在應用程式的根目錄中建立 pages 目錄。

使用 src 目錄是選用的，適用於您的公司已經有此標準的情況。

public 目錄支援

除了 pages 目錄外，Next.js 還有另一個名為 static 的特殊目錄，其中的檔案會對應到 /static 路由。

例如，static/my-image.png 將會對應到 /static/my-image.png。

自 Next.js 的第一個版本以來，此慣例一直運作良好，並且沒有特別的問題。

但是，隨著時間的推移，我們確立了 /static 並未涵蓋 Web 應用程式中所需的一切。例如，robots.txt 必須從網域的根目錄提供。

從 Next.js 9.1 開始，我們將推出一個名為 public 的新目錄。

public 目錄中的任何檔案都會對應到網域的根目錄。

例如，public/robots.txt 將會對應到 /robots.txt。

由於 public 也涵蓋了 static 目錄的使用案例，因此我們決定棄用 static 目錄，改為建立具有相同功能的 public/static 資料夾。

一如既往，我們力求向後相容性，因此 static 目錄將繼續運作，但會顯示棄用訊息。

即將推出

以下功能目前處於實驗性標記下，將在最終實作準備就緒後發布。

內建 CSS 支援

目前，Next.js 內建了一個名為 styled-jsx 的 CSS-in-JS 解決方案。此解決方案非常適合為個別 React 元件設定樣式。

但是，在與公司交談時，我們發現通常需要重複使用一些現有的樣式或基於 CSS 的設計系統。

一般而言，這表示需要加入 next-css 外掛程式以新增 CSS 匯入支援。

我們發現大約 50% 的 Next.js 使用者在其應用程式中加入了此外掛程式。

由於這種廣泛的使用情況，我們正在新增對 CSS 匯入的內建支援，並具有開發中的樣式自動重新載入和生產最佳化功能，這些功能以前在 next-css 外掛程式中是不可能的。

初始實作目前正在生產 Next.js 應用程式上進行測試。

將首先推出全域 CSS 匯入

// Global styles can be imported from _app.js
import '../styles/global.css';
import App from 'next/app';
 
export default App;

在全域 CSS 匯入之後，我們將透過 .module.css 擴展名推出對 CSS 模組的支援

// Scoped styles are imported through .module.css
import styles from '../styles/index.module.css';
 
export default function HomePage() {
  return <h1 className={styles.heading}>Hello World</h1>;
}

這將使我們能夠在使用 CSS 匯入時提供明顯更好的開發人員體驗。

您可以閱讀更多關於 GitHub 上的 RFC 的正在進行的工作。

靜態錯誤頁面

Next.js 有一個特殊的頁面，用於在發生錯誤時呈現，此頁面在內部稱為 /_error。使用者可以透過建立匯出 React 元件的 pages/_error.js 檔案來自訂此頁面。

呈現的錯誤通常分為兩種情況：預期錯誤和非預期錯誤。

預期錯誤的範例是 404 頁面。

非預期錯誤的範例是，例如，在 getInitialProps 中或在呈現 React 樹狀結構時擲回錯誤，這會呈現 500。

我們計劃為預期錯誤新增自動靜態最佳化，因為一般而言，它們不必動態呈現。

如果使用者想要動態呈現這些頁面，可以選擇退出，但預設情況下 404 將會是靜態頁面。這減少了使用 server 目標時伺服器的負載，並降低了使用 serverless 目標時的成本。

使頁面靜態化的另一個好處是，在使用 CDN 時可以自動快取。

Google Chrome 合作

如Next.js 9 公告中所分享，Google Chrome 團隊正在投入資源來改進 Next.js，並且一直在努力進行多項工作，以大規模地提升所有 Next.js 應用程式的效能。

若要深入了解此合作，您可以閱讀Next.js 9 公告並觀看 Nicole Sullivan 在 React Rally 的演講。

Module / Nomodule

在 Next.js 中編寫程式碼時，您通常編寫「現代」JavaScript。您可以使用所有最新的穩定功能，Next.js 將自動確保透過使用 Babel 編譯程式碼來轉換或 polyfill 這些功能。

此時，許多這些 JavaScript 功能在大多數瀏覽器中都受到支援。但是，一般而言 (包括在 Next.js 中)，程式碼會以單個 JavaScript 套件的形式發布，該套件可在您的應用程式支援的所有瀏覽器上執行。

在 Next.js 的情況下，這表示將現代 JavaScript 編譯為與 Internet Explorer 11 相容的格式。

例如，目前，Next.js 必須為 async/await 語法提供 polyfill，因為程式碼可能會在不支援 async/await 的瀏覽器中執行，這會導致中斷。

為了避免在將現代 JavaScript 傳送到支援較新語法的瀏覽器時中斷較舊的瀏覽器，Next.js 將利用 module/nomodule 模式。module/nomodule 模式提供了一種可靠的機制，可將現代 JavaScript 提供給現代瀏覽器，同時允許較舊的瀏覽器回退到 polyfill 的 ES5 程式碼。

此新功能目前正在由多個大型 Next.js 應用程式在生產環境中進行測試，以收集真實世界的資料。這些測試的結果看起來很有希望，並且很快就會分享有關此變更的效能改進的更多詳細資訊。

我們看到的一個初始結果範例是 Natalie Marleny 對於在 Next.js 中啟用內建 module/nomodule 支援前後的套件大小的比較

改進的套件拆分

Next.js 目前有多個 JavaScript 套件，它會載入這些套件以使頁面具有互動性。最值得注意的是

• 頁面 JavaScript 套件。
• 包含通用 JavaScript 的檔案。
• Next.js 用戶端執行階段套件。
• 動態匯入 (通常透過 next/dynamic 新增)。

為了確保頁面具有互動性，必須載入所有這些套件，因為它們都相互依賴才能在瀏覽器中啟動 React。

由於啟動 React 需要載入這些套件，因此它們必須盡可能最佳化，並且不要從應用程式的其餘部分過度下載太多程式碼。

因此，有一個 commons 套件，其中包含頁面之間的通用 JavaScript。目前套件拆分策略的計算方式是基於比例啟發法，如果一個模組在所有頁面的 50% 中使用，則會將其標記為通用模組。

但是，應用程式可能由許多不同的部分組成。例如，行銷頁面、部落格和儀表板。如果行銷頁面的數量與儀表板相比很大，則通用計算將為行銷頁面產生更最佳化的結果。

我們的目標是在一個應用程式中同時最佳化這兩者。

Alex Castle 定義了一個新的分塊層級 (建立單獨的 JavaScript 檔案)，它允許更最佳化的通用分塊，其中包含多個檔案，尤其是在涉及許多頁面時。

與 module/nomodule 支援類似，改進的套件拆分正在由多個大型 Next.js 應用程式在生產環境中進行測試，以收集真實世界的資料。這些測試的結果以及有關此變更的效能改進的更多詳細資訊將很快在單獨的部落格文章中分享。

社群

我們對即將到來的變更感到興奮，這些變更將提高所有 Next.js 應用程式的效能。

此外，Next.js 社群仍在擴大

• 我們有超過 800 位貢獻者至少提交了 1 次 commit。
• 在 GitHub 上，該專案已獲得超過 41,350 次星號。
• 範例目錄有超過 210 個範例。

Next.js 社群現在有超過 11,250 位成員。加入我們！

我們感謝我們的社群以及所有外部回饋和貢獻，這些都幫助塑造了此版本的發布。