隨著現代Web應用的發展，用戶界面變得越來越復雜，同時用戶對應用的響應速度和互動性有著更高的期待。在這樣的背景下，Next.js 作為一個前沿的React框架，提供了一系列高級功能來滿足開發者的需求。

Metadata：在Next.js項目中優化SEO

在當今這個信息爆炸的時代，擁有一個高可見度的網站已成為許多企業和個人的追求。搜索引擎優化（SEO）是實現這一目標的重要手段。為了讓你的Next.js應用更好地被搜索引擎發現，Next.js引入了一個非常實用的功能——元數據API。通過這個API，你可以為每個頁面定義元數據，確保當你的頁面被分享或索引時顯示準確、相關的信息。

1. 靜態元數據的配置

靜態元數據是指在構建時確定的有關頁面的信息，并且在運行時不會改變。這些元數據與特定頁面相關聯，可以包括標題和描述等數據。例如，如果你有一個關于頁面，你可以這樣配置它的靜態元數據：

//src/app/about/page.tsx

export const metadata = {
  title: "關于我",
};

export default function About() {
  return <h1>關于我</h1>;
}

通過這種方式，當你的“關于我”頁面被搜索引擎索引或被分享到社交媒體時，其標題會正確地顯示為“關于我”。

2. 動態生成的元數據

與靜態元數據不同，動態元數據允許你根據運行時的動態數據或條件生成頁面的元數據。這對于那些內容經常變化或依賴于用戶輸入的頁面非常有用。比如，你有一個展示產品詳情的頁面，可以這樣配置其元數據：

import { Metadata } from "next";

type Props = {
  params: {
     productId: string;
  };
};

export const generateMetadata = ({ params }: Props ): Metadata => {
  return {
      title: `產品 ${params.productId} 的詳情`,
  };
};

export default function ProductDetails({ params }: Props) {
    return <h1>產品 {params.productId} 的詳情</h1>;
}

甚至，你可以使用異步函數來生成元數據，這在你需要從數據庫或API獲取數據時特別有用：

export const generateMetadata = async ({ params }: Props): Promise<Metadata> => {
    const title = await new Promise((resolve) => {
      setTimeout(() => {
        resolve(`產品 ${params.productId}`);
      }, 100);
  });
  return { title: `產品 ${title} 的詳情`, };
};

3. 元數據規則

• layout.tsx 和 page.tsx 文件都可以導出元數據。如果在布局中定義，則適用于該布局中的所有頁面；如果在頁面中定義，則僅適用于該頁面。
• 元數據按順序讀取，從根級別到最終頁面級別。
• 如果同一路由的多個位置有元數據，它們會被合并，但頁面元數據會替換布局元數據（如果它們有相同的屬性）。

4. title metadata

關于元數據中的title屬性，這是一個非常關鍵的部分，它直接影響到你的頁面在搜索引擎中的顯示標題以及用戶在瀏覽器標簽頁中看到的內容。title可以是一個字符串或者是一個對象，這取決于你想如何控制標題的顯示。

當你在layout.tsx文件中定義元數據時，title字段提供了幾個有趣的選項來增加靈活性：

//layout.tsx

export const metadata: Metadata = {
  title: {
    absolute: "",
    default: "",
    template: "%s | 網站名稱",
  },
  description: "",
};

• absolute：這是一個備選項，用于設置一個絕對的標題，通常在這里不會設置值。
• default：這個值將作為默認標題，即如果子路由沒有指定自己的標題，那么就會使用這個默認值。
• template：這是一個模板字符串，子路由的標題名將替換%s。這樣，你可以很容易地為站點中的每個頁面添加一個統一的后綴或前綴，比如網站名稱或者是一個關鍵的標識符。

這個功能特別適合那些頁面結構復雜、需要精細控制每個頁面標題的網站。通過在不同級別（全局布局、頁面布局、單獨頁面）精心設計title的設置，可以確保無論用戶進入網站的哪個部分，都能通過標題快速了解內容，并通過模板確保網站的整體品牌一致性得到維護。

舉個例子，如果你的一個頁面沒有指定特定的標題，那么它就會使用default中的值。而當頁面指定了自己的標題時，template中定義的模式就會發揮作用，自動將頁面的標題和網站名稱進行組合，形成一個既清晰又具有品牌特色的標題展示。

這種靈活性和自動化的結合，不僅使得SEO優化變得簡單，而且還能在提升用戶體驗的同時，加強網站品牌的影響力。

通過精心設計每個頁面的元數據，不僅可以提高網站的搜索引擎排名，還能提升用戶體驗，增加點擊率。在社交媒體時代，一個吸引人的頁面標題和描述可以大大增加內容的分享率。而Next.js提供的元數據API，讓這一切變得簡單而直接。

Navigation：使用 Link 組件進行導航

在構建一個動態且互動性強的網站時，頁面間的導航是不可或缺的一環。Next.js 為此提供了非常便利的解決方案——Link 組件和 useRouter 鉤子，讓客戶端導航變得既簡單又高效。

Link 組件是 Next.js 中用于實現路由跳轉的主要方式，它基于 HTML 的 <a> 元素進行了擴展，使得在 Next.js 應用中的路由之間進行導航變得非常簡便。使用 Link 組件時，你只需要導入它并指定 href 屬性為目標路徑即可：

import Link from "next/link";

<Link href="/blog">博客</Link>

Navigation：程序化導航

有時候，我們需要在代碼中根據某些條件或邏輯來動態導航到不同的頁面，這時就可以使用 Next.js 提供的 useRouter 鉤子。useRouter 允許你訪問路由對象，通過這個對象，你可以控制應用的路由行為，例如進行頁面跳轉。

以下是一個使用 useRouter 進行程序化導航的示例：

import { useRouter } from "next/router";

const MyComponent = () => {
  const router = useRouter();

  const handleClick = () => {
    console.log("下單");
    router.push("/"); // 使用 router.push 方法跳轉到首頁
  };

  return (
    <button onClick={handleClick}>下單</button>
  );
}

在這個例子中，當用戶點擊“下單”按鈕時，handleClick 函數會被觸發，然后應用會使用 router.push("/") 代碼來跳轉到首頁。這種方式非常適合在用戶完成某些操作后需要自動跳轉頁面的場景。

無論是通過 Link 組件還是 useRouter 鉤子進行導航，Next.js 都為開發者提供了極大的便利和靈活性。通過這些工具，你可以輕松地在你的應用中實現復雜的導航邏輯，為用戶提供流暢且富有互動性的網頁體驗。

Templates（模板）

在構建現代Web應用時，開發者常常需要在多個頁面之間共享某些布局或樣式。Next.js的模板（Templates）功能就是為此而生。模板類似于布局（Layouts），它們都可以包裹每個子布局或頁面。但模板和布局在功能上有一定的差異，特別是在處理頁面導航時。

模板的特性

當用戶在共享同一模板的不同路由之間導航時，模板會呈現一些獨特的行為：

• 重新掛載組件：每次導航到新路由時，即使新舊路由共享相同的模板，該模板的一個新實例也會被掛載。
• DOM元素重建：模板中的DOM元素會在每次導航時被重新創建，而不是復用。
• 狀態不保留：由于模板重新掛載，任何在模板中維持的狀態都將丟失，每次導航都是從新的狀態開始。
• 效果重新同步：React的效果（effects）會在每次導航時重新同步，意味著例如useEffect中的代碼會在每次模板掛載時執行。

定義模板

定義模板非常簡單，你只需要創建一個默認導出的React組件，這個組件可以從template.js或template.tsx文件中導出。這個組件通常會接受children作為其屬性，并在其內部渲染這些子元素：

export default function Template({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>
}

模板使用場景

模板特別適合于那些需要在多個頁面之間共享相同布局，但又希望在每次頁面跳轉時能夠完全重置狀態和DOM的場景。這可以確保用戶在不同頁面間導航時，能夠獲得一致且干凈的體驗，而不必擔心前一個頁面的狀態影響到當前頁面。

通過明智地使用模板，你可以在保持代碼組織和復用性的同時，為用戶提供流暢且一致的瀏覽體驗。

loading.tsx

loading.tsx 文件在 Next.js 應用中扮演著特別的角色，它允許開發者為特定路由段創建加載狀態，這些加載狀態在內容加載時展示給用戶。使用 loading.tsx 可以有效地提升用戶體驗，特別是在網絡環境較差或內容較多需要較長時間加載的場景下。

創建加載狀態

在 loading.tsx 文件中，你可以定義一個或多個加載狀態的 React 組件。這些組件可以是簡單的動畫，如旋轉的加載指示器，或者更復雜的占位符布局，如骨架屏。

// loading.tsx

export default function Loading() {
    return (
        <div className="loading-container">
            <p>內容加載中，請稍候...</p>
            {/* 這里可以添加加載動畫或圖標 */}
        </div>
    );
}

使用加載狀態

當用戶導航到一個新的路由段，而這個路由段的內容還在加載時，你定義的加載狀態會立即顯示給用戶。這提供了一個視覺反饋，讓用戶知道應用正在響應其操作，并且內容正在積極加載中。這樣可以避免用戶在看到空白頁面時感到困惑或者認為應用出現了問題。

提升用戶體驗

利用 loading.tsx 實現的加載狀態可以大大提升應用的用戶體驗：

• 減少等待感：通過立即提供反饋，用戶感知到的等待時間會減少，即使實際加載時間沒有變短。
• 增強應用感知速度：快速響應用戶操作的應用給人的感覺更快，即使是在加載較重的內容時也不例外。
• 保持用戶參與：加載狀態可以是創造性的，提供額外的視覺元素或信息，保持用戶的參與度，避免他們在加載過程中離開。

在設計加載狀態時，重要的是要保持它的簡潔和與應用整體風格的一致性。加載狀態不僅是一種功能性需求，也是提升品牌體驗和應用專業度的機會。

error.tsx

在構建現代web應用時，有效地管理和響應錯誤是至關重要的。Next.js 通過文件系統層次結構中的 error.tsx 文件，為開發者提供了一種靈活而強大的方式來創建和管理錯誤UI，以及處理特定路由段的錯誤。

創建針對性的錯誤UI

通過在應用的不同路由級別添加 error.tsx 文件，你可以為這些路由定制特定的錯誤處理UI。這種方法使得在用戶遇到錯誤時，能夠展示更具體、更友好的錯誤消息和恢復選項，而不是一個通用的錯誤頁面。

// 使用 'use client' 來指明這些錯誤組件必須是客戶端組件

'use client';

import { useEffect } from 'react';

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // 將錯誤記錄到錯誤報告服務中
    console.error(error);
  }, [error]);

  return (
    <div>
      <h2>出錯了！</h2>
      <button onClick={() => reset()}>
        重試
      </button>
    </div>
  );
}

隔離錯誤影響

將 error.tsx 文件放置于應用的不同級別，能夠幫助你更精確地控制錯誤的影響范圍。例如，在特定的路由段出現錯誤時，只有那部分內容會展示錯誤信息，應用的其他部分仍然可以正常工作。這樣既提高了應用的魯棒性，也優化了用戶體驗。

錯誤恢復功能

在 error.tsx 中，你可以提供恢復功能，如重試按鈕，允許用戶嘗試從錯誤中恢復，而無需重新加載整個頁面。這種快速響應錯誤并嘗試恢復的能力，對于保持應用的交互性和用戶滿意度至關重要。

嵌套路由中的錯誤處理

通過在嵌套的文件夾結構中不同級別放置 error.tsx 文件，你可以實現更細粒度的錯誤處理。這意味著，你可以為應用中的不同部分定制不同的錯誤處理策略和UI，使錯誤處理更加靈活和用戶友好。

這種方法利用了Next.js的文件系統路由和組件模型，提供了一種既簡潔又強大的錯誤處理機制，幫助開發者構建更加可靠和用戶友好的應用。

Parallel Routes（插槽）

Next.js 的并行路由是一種高級路由機制，允許在同一布局中同時渲染多個頁面，極大地增強了頁面布局和內容管理的靈活性。通過使用名為“插槽（slots）”的功能，開發者可以以模塊化的方式組織內容。

定義插槽

要定義一個插槽，我們使用 @folder 命名約定。然后，每個插槽作為屬性傳遞給其對應的 layout.tsx 文件。

以儀表盤為例，你可以使用并行路由同時渲染用戶、收入和通知頁面：

// dashboard/layout.tsx

export default function DashboardLayout({
    children,
    users,
    revenue,
    notifications
}: {
    children: React.ReactNode;
    users: React.ReactNode;
    revenue: React.ReactNode;
    notifications: React.ReactNode;
}) {
    return (
      <>
        <div>{children}</div>
        <div>{users}</div>
        <div>{revenue}</div>
        <div>{notifications}</div>
      </>
    );
}

并行路由的一個優勢是它們能夠將單個布局劃分為各種插槽，使代碼更易于管理。

獨立的路由處理

布局的每個插槽，例如用戶分析或收入指標，都可以有自己的加載和錯誤狀態。在不同頁面部分以不同速度加載或遇到獨特錯誤的場景中，這種細粒度的控制尤其有益。

路由內的子導航

你的儀表盤的每個插槽都可以實質上作為一個小應用程序運行，完備自己的導航和狀態管理。這在諸如儀表盤這樣的復雜應用中特別有用，不同部分服務于不同的目的。

//dashboard/@notifications/page.tsx

export default function Notifications() {
  return (
    <div>通知</div>
    <Link href="/dashboard/">歸檔</Link>
  );
};

//dashboard/@notifications/archieved/page.tsx

export default function ArchivedNotifications() {
  return (
    <div>歸檔通知</div>
    <Link href="/dashboard/">默認</Link>
  );
};

這種結構不僅提升了代碼的模塊化和可讀性，而且還增強了用戶界面的交互性，使用戶能夠在儀表盤的不同部分之間流暢地導航，同時各部分能夠獨立地加載和處理數據。這樣的設計思想，為構建復雜且高效的Web應用提供了新的可能性。

結束

通過今天的分享，我們了解了Next.js并行路由的強大之處，以及它如何使我們能夠構建更加動態和響應式的Web應用。這項技術不僅提高了應用的性能和用戶體驗，還讓代碼的組織和維護變得更加高效。