在 Next.js 中，middleware.js、_app.js、_document.js 和 index.js 這幾個檔案負責不同的功能，也有不同的執行順序。
對剛接觸 Next.js 的人來說，理解它們的作用和載入時機，能夠幫助你在正確的位置寫入適當的代碼，讓應用程式更穩定、更好維護。
整體執行順序
執行順序，需要分兩種情境來看，如下:
1. 當用戶請求 https://example.com/ 時的執行順序：
middleware.js（攔截請求，可能重新導向或修改headers）。_document.js（建立 HTML 結構）。_app.js（管理全域狀態與 CSS）。index.js（渲染實際頁面內容）。
2. 已經在某個頁面，點選其他頁面時的切換 CSR（客戶端切換頁面）的執行順序：
middleware.js不會執行。_document.js不會重新載入。_app.js仍然存在（不重新載入）。index.js（載入新的頁面內容）。
middleware.js 說明
middleware.js 主要用來攔截每個請求，並進行修改(如請求或響應頭 header)，例如身份驗證、重定向等。
簡單解釋：
這就像是 機場的安檢站，在乘客登機前（進入應用），先檢查護照與行李（身份驗證、請求修改），決定是否讓乘客登機（請求放行），或轉搭其他航班（重定向、跳轉到指定頁面），或者拒絕登機（攔截請求，拒絕訪問）。
載入時機：
在每個請求進入應用程式時首先執行，並在路由匹配和處理之前運行。
_document.js 說明
定義 HTML 文件的基本結構，例如 <html> 和 <body>。
簡單解釋：
想像它是一個 HTML 模板，讓你可以在所有頁面加上共同的標籤、字型載入等。
這就像 飛機的機身設計，決定所有飛機的基本框架，例如座位佈局（HTML 結構），但不負責具體的航班資訊（頁面內容）。
載入時機：
只在伺服器端執行，用來生成完整的 HTML 框架，在瀏覽器加載頁面時不會重新執行。
_app.js 說明
負責全局的頁面初始化，例如佈局、狀態管理、主題設定等。
簡單解釋：
這就像 登機閘口，確保每位乘客（使用者）登機前（進入頁面）都經過必要的流程，例如登機證檢查（權限驗證）、行李統一標準（全局樣式）、提醒航班資訊（共享狀態）。
載入時機：
在每個頁面加載時執行，可用於共用的佈局（Header、Footer）或狀態管理（如 Redux Provider）。
根目錄 index.js 說明
定義網站首頁的內容和邏輯。
簡單解釋：
預設的首頁，就如同你在網址輸入 https://example.com/ ，在沒有其他設定的前提下，預設最終就是執行 index.js
載入時機：
只有在訪問 / 時才會執行，負責首頁的內容渲染。
結論
以上就是點單的整理與解說，方便新手用戶理解。
發表迴響