Next.js 面試掌握：基本問題（第 3 部分）

Next.js 面試指南：成功的 100 個問題和答案

透過 Next.js 面試指南：成功的 100 個問題和答案，釋放您掌握 Next.js 的全部潛力？無論您是剛開始作為開發人員，還是希望將自己的技能提升到新水平的經驗豐富的專業人士，這本綜合電子書都旨在幫助您在Next.js 面試中取得好成績，並成為一名自信的、做好工作準備的人開發商。本指南涵蓋了廣泛的 Next.js 主題，確保您為可能遇到的任何問題做好充分準備。這本電子書探討了伺服器端渲染 (SSR)、靜態網站產生 (SSG) 等關鍵概念) ?、增量靜態再生 (ISR) ⏳、應用程式路由器 ?️、資料擷取 ? 等等。每個主題都得到了透徹的解釋，提供了真實的例子以及最常見面試問題的詳細答案。除了回答問題之外，該指南還重點介紹了優化 Next.js 應用程式、提高效能並確保可擴展性的最佳實踐。隨著 Next.js 的不斷發展，我們也深入研究了 React 18、並發渲染和 Suspense 等尖端功能。這可以確保您始終了解最新進展，為您提供面試官正在尋找的知識。本指南的與眾不同之處在於它的實用方法。它不僅涵蓋理論，還提供可直接應用於您的專案的可行見解。也詳細探討了安全性、SEO 最佳化和部署實踐，以確保您為完整的開發生命週期做好準備。無論您是在準備頂級科技公司的技術面試還是尋求建立更有效率的系統，可擴展的應用程序，本指南將幫助您提高 Next.js 技能並在競爭中脫穎而出。讀完本書後，您將準備好自信地解決任何 Next.js 面試問題，從基本概念到專家級挑戰。為自己配備知識，成為出色的 Next.js 開發人員？並自信地踏入下一個職業機會！

在此範例中，next/image 元件會自動最佳化和調整影像，以獲得更好的效能和反應能力。

26. Next.js 中的重寫是什麼，它們是如何運作的？

在 Next.js 中，重寫 用於更改傳入請求的目標 URL，而不會更改瀏覽器中顯示的 URL。此功能對於創建更清晰、更用戶友好的 URL、將流量重定向到外部 API 或在客戶端與伺服器端以不同的方式建構 URL 非常有用。

重寫如何運作：

• 設定：重寫在非同步重寫函數中的 next.config.js 檔案中定義，該函數會傳回重寫規則陣列。
• 目標 URL 更改：當使用者看到像 /blog/post 這樣的 URL 時，請求可以重寫為內部或外部 URL，例如 /api/post。
• 隱藏重定向：與重定向不同，重寫將原始 URL 保留在瀏覽器中，為使用者提供無縫體驗。

重寫範例：

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/blog/:slug',
        destination: '/api/post/:slug' // proxies the request to /api/post/:slug
      },
    ];
  },
};

在此範例中，當使用者導航到 /blog/awesome-post 時，請求實際上由 /api/post/awesome-post 處理，而 /blog/awesome-post 在瀏覽器中仍然可見。

重寫使用案例：

• API 代理程式：重寫 URL 將其路由到外部 API，而不暴露實際的 API 端點。
• 自訂 URL 結構：將使用者友善的 URL 對應到複雜的底層路由，簡化導航。
• 多語言路由：重寫路徑以提供不同語言的內容，而不會改變可見的 URL 結構。

27. next.config.js 檔案是什麼，它的作用是什麼？

next.config.js 檔案是 Next.js 專案中的核心設定檔。它控制 Next.js 應用程式的各種設置，包括建置設定、環境變數、路由和其他最佳化。該檔案允許開發人員修改 Next.js 預設值，從而可以根據專案的要求進行自訂。

next.config.js 的關鍵角色：

1. 自訂建置：
   • 輸出目錄：您可以變更建置和靜態匯出的輸出路徑。
   • Webpack 配置：它允許擴充或覆蓋 Webpack 配置，啟用自訂模組處理或載入器設定。
2. 環境變數：
   • next.config.js 通常用於定義不同環境的環境變數（例如，開發與生產）。這對於以結構化方式設定 API URL、身份驗證金鑰或其他敏感資訊非常有用。
3. 國際化 (i18n)：
   • 該文件提供了 i18n 配置，用於設定多語言網站的語言區域設定、預設語言和 URL 結構。
4. 路由自訂：
   • 重寫：定義重寫以更改傳入請求的目的地，啟用自訂 URL 結構或 API 代理，而無需暴露真實端點。
   • 重定向：設定 URL 重定向以自動將使用者從一個路徑重新路由到另一個路徑。
   • Headers：設定自訂標頭，例如與安全相關的標頭（例如 Content-Security-Policy）以增強應用程式安全性。
5. 效能最佳化：
   • 您可以控制特定的 Next.js 最佳化，例如啟用 React 嚴格模式、設定影像最佳化和微調壓縮選項。
   • 靜態和動態頁面最佳化：next.config.js 允許設定靜態網站產生（SSG）、伺服器端渲染（SSR）和增量靜態重新產生（ISR）。
6. 實驗特性：
   • Next.js 經常引入可以透過 next.config.js 啟用的實驗性功能。例如，您可以在早期版本中啟用並發功能或 App Router 的實驗配置來嘗試新功能。

next.config.js 範例：

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/blog/:slug',
        destination: '/api/post/:slug' // proxies the request to /api/post/:slug
      },
    ];
  },
};

在此範例中：

• reactStrictMode 透過啟用 React 的嚴格模式來改善錯誤偵測。
• 環境變數設定用於存取API。
• 國際化 配置了多個區域設定。
• 重寫和重定向修改URL在應用程式內的路由方式。
• 影像域指定用於最佳化從外部來源載入的映像。

next.config.js 檔案在自訂和最佳化 Next.js 應用程式中發揮著至關重要的作用，使開發人員能夠廣泛控制應用程式行為、建置和部署設定。

28. Next.js 如何處理影像最佳化？

Next.js 透過 提供內建的影像最佳化元件，旨在透過根據使用者的裝置和螢幕尺寸自動最佳化影像來提高效能和載入時間。此功能允許圖像快速加載而不犧牲質量，從而增強用戶體驗和 SEO。

Next.js 影像最佳化的工作原理：

1. 自動調整大小：
   • ;組件偵測裝置的螢幕尺寸並提供適當尺寸的影像。這減少了下載的數據量，尤其是在較小的螢幕上。
2. 響應式與版面選項：
   • 透過填滿、響應式和內在等屬性，您可以指定影像在各種螢幕尺寸上的表現方式。該組件可以無縫處理響應式影像，從而更輕鬆地建立適應不同裝置的佈局。
3. 自動格式轉換：
   • Next.js 在瀏覽器支援的情況下以現代格式（例如 WebP）提供圖像。 WebP 檔案通常比傳統 JPEG 或 PNG 格式更小且載入速度更快，從而減少了頁面載入時間。
4. 延遲載入：
   • 圖像預設是延遲加載的，這意味著它們僅在出現在視口中時加載。這減少了初始頁面載入時間，特別是對於包含許多圖像的頁面。
5. 快取：
   • Next.js 快取最佳化的影像，以避免對每個請求進行重新最佳化，從而減少伺服器負載並提高速度。快取的圖像儲存在伺服器本機或 CDN（內容分發網路）（如果配置）中。
6. 支援外部影像：
   • Next.js 可讓您透過設定 next.config.js 中的domains 選項從外部網域載入映像。這對於從 CDN 或其他外部來源載入映像非常有用。

的關鍵屬性元件：

• src：圖片來源，可以是本地路徑，也可以是外部URL。
• 寬度和高度：定義影像的大小，靜態影像需要它來幫助 Next.js 最佳化佈局變化。
• 版面：控製影像的行為方式。選項包括：
  • fill：允許圖像縮放以填充其容器。
  • 響應式：提供根據視口寬度縮放的響應式影像。
  • 內在：調整影像的內在尺寸，但在這些尺寸的範圍內響應。
• 優先權：讓您優先載入關鍵影像，對於英雄影像或首屏內容很有用。

用法範例：

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/blog/:slug',
        destination: '/api/post/:slug' // proxies the request to /api/post/:slug
      },
    ];
  },
};

在 next.config.js 中設定影像最佳化：

在next.config.js中，您可以自訂影像最佳化設定。例如：

// next.config.js
module.exports = {
  reactStrictMode: true,
  env: {
    API_URL: process.env.API_URL,
  },
  i18n: {
    locales: ['en', 'es', 'fr'],
    defaultLocale: 'en',
  },
  async rewrites() {
    return [
      {
        source: '/blog/:slug',
        destination: '/api/posts/:slug',
      },
    ];
  },
  async redirects() {
    return [
      {
        source: '/old-blog/:slug',
        destination: '/blog/:slug',
        permanent: true,
      },
    ];
  },
  images: {
    domains: ['example.com'],
  },
};

Next.js 影像最佳化的優點：

• 減少頁面載入時間：透過提供更小的、最佳化的圖像，頁面載入時間顯著減少。
• 改善 SEO 和核心 Web Vitals：更快的影像載入時間可改善 LCP（最大內容繪製）等核心 Web Vitals 指標，進而影響 SEO。
• 自動延遲載入：最初僅載入視窗中的映像，從而加快頁面載入時間。

Next.js 影像最佳化是一項強大的功能，可以在幕後處理複雜的任務，以最少的開發人員精力提高效能。

29. Next.js的混合渲染是什麼？

Next.js 的混合渲染指的是能夠組合不同渲染策略的能力－靜態產生（SSG）、伺服器端渲染（SSR）、和客戶端渲染（CSR）——在同一個應用程式中。這種靈活性允許開發人員根據每個頁面或元件的特定要求使用最高效的渲染策略。

• 靜態產生（SSG）：頁面在建置時預先渲染。非常適合不經常更改的內容，例如行銷頁面。
• 伺服器端渲染（SSR）：根據每個請求渲染頁面，確保內容始終是最新的。對於經常更改的用戶特定數據或內容很有用。
• 客戶端渲染 (CSR)：在客戶端取得和渲染內容，通常用於不需要預先渲染的互動功能或資料。

透過 App Router，Next.js 也支援 增量靜態再生 (ISR)，其中靜態產生的頁面可以在運行時更新，而無需重建整個網站。這種混合渲染設定提供了一種平衡效能和資料新鮮度的通用方法。

30. Next.js 中混合渲染的主要好處是什麼？

Next.js 中混合渲染的主要好處包括：

1. 最佳化效能：透過使用 SSG 處理動態較少的內容，頁面載入速度更快並提高效能指標，例如 Core Web Vitals。 SSR 是為需要頻繁更新資料的頁面保留的，保證新鮮度而不影響整個網站。
2. SEO 彈性：受益於 SEO 的頁面可以使用 SSG 或 SSR，允許搜尋引擎索引完全呈現的 HTML。透過混合渲染，Next.js 應用程式可以逐頁優化 SEO。
3. 改進的使用者體驗：在預先渲染頁面中使用 CSR 進行互動元件可以創建更快的頁面載入速度，同時允許使用者進行動態互動。
4. 高效的資源使用：ISR 透過僅重新產生特定頁面而不是整個網站來最大限度地減少伺服器負載，從而更輕鬆地保持內容更新而不影響效能。
5. 可擴充性：混合渲染可讓您自訂不同類型頁面的渲染，使 Next.js 應用程式具有高度可擴充性。

以上是Next.js 面試掌握：基本問題（第 3 部分）的詳細內容。更多資訊請關注PHP中文網其他相關文章！