隨著現(xiàn)代Web應(yīng)用的發(fā)展，用戶界面變得越來(lái)越復(fù)雜，同時(shí)用戶對(duì)應(yīng)用的響應(yīng)速度和互動(dòng)性有著更高的期待。在這樣的背景下，Next.js 作為一個(gè)前沿的React框架，提供了一系列高級(jí)功能來(lái)滿足開(kāi)發(fā)者的需求。

Metadata：在Next.js項(xiàng)目中優(yōu)化SEO

在當(dāng)今這個(gè)信息爆炸的時(shí)代，擁有一個(gè)高可見(jiàn)度的網(wǎng)站已成為許多企業(yè)和個(gè)人的追求。搜索引擎優(yōu)化（SEO）是實(shí)現(xiàn)這一目標(biāo)的重要手段。為了讓你的Next.js應(yīng)用更好地被搜索引擎發(fā)現(xiàn)，Next.js引入了一個(gè)非常實(shí)用的功能——元數(shù)據(jù)API。通過(guò)這個(gè)API，你可以為每個(gè)頁(yè)面定義元數(shù)據(jù)，確保當(dāng)你的頁(yè)面被分享或索引時(shí)顯示準(zhǔn)確、相關(guān)的信息。

1. 靜態(tài)元數(shù)據(jù)的配置

靜態(tài)元數(shù)據(jù)是指在構(gòu)建時(shí)確定的有關(guān)頁(yè)面的信息，并且在運(yùn)行時(shí)不會(huì)改變。這些元數(shù)據(jù)與特定頁(yè)面相關(guān)聯(lián)，可以包括標(biāo)題和描述等數(shù)據(jù)。例如，如果你有一個(gè)關(guān)于頁(yè)面，你可以這樣配置它的靜態(tài)元數(shù)據(jù)：

//src/app/about/page.tsx

export const metadata = {
  title: "關(guān)于我",
};

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

通過(guò)這種方式，當(dāng)你的“關(guān)于我”頁(yè)面被搜索引擎索引或被分享到社交媒體時(shí)，其標(biāo)題會(huì)正確地顯示為“關(guān)于我”。

2. 動(dòng)態(tài)生成的元數(shù)據(jù)

與靜態(tài)元數(shù)據(jù)不同，動(dòng)態(tài)元數(shù)據(jù)允許你根據(jù)運(yùn)行時(shí)的動(dòng)態(tài)數(shù)據(jù)或條件生成頁(yè)面的元數(shù)據(jù)。這對(duì)于那些內(nèi)容經(jīng)常變化或依賴(lài)于用戶輸入的頁(yè)面非常有用。比如，你有一個(gè)展示產(chǎn)品詳情的頁(yè)面，可以這樣配置其元數(shù)據(jù)：

import { Metadata } from "next";

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

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

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

甚至，你可以使用異步函數(shù)來(lái)生成元數(shù)據(jù)，這在你需要從數(shù)據(jù)庫(kù)或API獲取數(shù)據(jù)時(shí)特別有用：

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

3. 元數(shù)據(jù)規(guī)則

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

4. title metadata

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

當(dāng)你在layout.tsx文件中定義元數(shù)據(jù)時(shí)，title字段提供了幾個(gè)有趣的選項(xiàng)來(lái)增加靈活性：

//layout.tsx

export const metadata: Metadata = {
  title: {
    absolute: "",
    default: "",
    template: "%s | 網(wǎng)站名稱(chēng)",
  },
  description: "",
};

• absolute：這是一個(gè)備選項(xiàng)，用于設(shè)置一個(gè)絕對(duì)的標(biāo)題，通常在這里不會(huì)設(shè)置值。
• default：這個(gè)值將作為默認(rèn)標(biāo)題，即如果子路由沒(méi)有指定自己的標(biāo)題，那么就會(huì)使用這個(gè)默認(rèn)值。
• template：這是一個(gè)模板字符串，子路由的標(biāo)題名將替換%s。這樣，你可以很容易地為站點(diǎn)中的每個(gè)頁(yè)面添加一個(gè)統(tǒng)一的后綴或前綴，比如網(wǎng)站名稱(chēng)或者是一個(gè)關(guān)鍵的標(biāo)識(shí)符。

這個(gè)功能特別適合那些頁(yè)面結(jié)構(gòu)復(fù)雜、需要精細(xì)控制每個(gè)頁(yè)面標(biāo)題的網(wǎng)站。通過(guò)在不同級(jí)別（全局布局、頁(yè)面布局、單獨(dú)頁(yè)面）精心設(shè)計(jì)title的設(shè)置，可以確保無(wú)論用戶進(jìn)入網(wǎng)站的哪個(gè)部分，都能通過(guò)標(biāo)題快速了解內(nèi)容，并通過(guò)模板確保網(wǎng)站的整體品牌一致性得到維護(hù)。

舉個(gè)例子，如果你的一個(gè)頁(yè)面沒(méi)有指定特定的標(biāo)題，那么它就會(huì)使用default中的值。而當(dāng)頁(yè)面指定了自己的標(biāo)題時(shí)，template中定義的模式就會(huì)發(fā)揮作用，自動(dòng)將頁(yè)面的標(biāo)題和網(wǎng)站名稱(chēng)進(jìn)行組合，形成一個(gè)既清晰又具有品牌特色的標(biāo)題展示。

這種靈活性和自動(dòng)化的結(jié)合，不僅使得SEO優(yōu)化變得簡(jiǎn)單，而且還能在提升用戶體驗(yàn)的同時(shí)，加強(qiáng)網(wǎng)站品牌的影響力。

通過(guò)精心設(shè)計(jì)每個(gè)頁(yè)面的元數(shù)據(jù)，不僅可以提高網(wǎng)站的搜索引擎排名，還能提升用戶體驗(yàn)，增加點(diǎn)擊率。在社交媒體時(shí)代，一個(gè)吸引人的頁(yè)面標(biāo)題和描述可以大大增加內(nèi)容的分享率。而Next.js提供的元數(shù)據(jù)API，讓這一切變得簡(jiǎn)單而直接。

Navigation：使用 Link 組件進(jìn)行導(dǎo)航

在構(gòu)建一個(gè)動(dòng)態(tài)且互動(dòng)性強(qiáng)的網(wǎng)站時(shí)，頁(yè)面間的導(dǎo)航是不可或缺的一環(huán)。Next.js 為此提供了非常便利的解決方案——Link 組件和 useRouter 鉤子，讓客戶端導(dǎo)航變得既簡(jiǎn)單又高效。

Link 組件是 Next.js 中用于實(shí)現(xiàn)路由跳轉(zhuǎn)的主要方式，它基于 HTML 的 <a> 元素進(jìn)行了擴(kuò)展，使得在 Next.js 應(yīng)用中的路由之間進(jìn)行導(dǎo)航變得非常簡(jiǎn)便。使用 Link 組件時(shí)，你只需要導(dǎo)入它并指定 href 屬性為目標(biāo)路徑即可：

import Link from "next/link";

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

Navigation：程序化導(dǎo)航

有時(shí)候，我們需要在代碼中根據(jù)某些條件或邏輯來(lái)動(dòng)態(tài)導(dǎo)航到不同的頁(yè)面，這時(shí)就可以使用 Next.js 提供的 useRouter 鉤子。useRouter 允許你訪問(wèn)路由對(duì)象，通過(guò)這個(gè)對(duì)象，你可以控制應(yīng)用的路由行為，例如進(jìn)行頁(yè)面跳轉(zhuǎn)。

以下是一個(gè)使用 useRouter 進(jìn)行程序化導(dǎo)航的示例：

import { useRouter } from "next/router";

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

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

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

在這個(gè)例子中，當(dāng)用戶點(diǎn)擊“下單”按鈕時(shí)，handleClick 函數(shù)會(huì)被觸發(fā)，然后應(yīng)用會(huì)使用 router.push("/") 代碼來(lái)跳轉(zhuǎn)到首頁(yè)。這種方式非常適合在用戶完成某些操作后需要自動(dòng)跳轉(zhuǎn)頁(yè)面的場(chǎng)景。

無(wú)論是通過(guò) Link 組件還是 useRouter 鉤子進(jìn)行導(dǎo)航，Next.js 都為開(kāi)發(fā)者提供了極大的便利和靈活性。通過(guò)這些工具，你可以輕松地在你的應(yīng)用中實(shí)現(xiàn)復(fù)雜的導(dǎo)航邏輯，為用戶提供流暢且富有互動(dòng)性的網(wǎng)頁(yè)體驗(yàn)。

Templates（模板）

在構(gòu)建現(xiàn)代Web應(yīng)用時(shí)，開(kāi)發(fā)者常常需要在多個(gè)頁(yè)面之間共享某些布局或樣式。Next.js的模板（Templates）功能就是為此而生。模板類(lèi)似于布局（Layouts），它們都可以包裹每個(gè)子布局或頁(yè)面。但模板和布局在功能上有一定的差異，特別是在處理頁(yè)面導(dǎo)航時(shí)。

模板的特性

當(dāng)用戶在共享同一模板的不同路由之間導(dǎo)航時(shí)，模板會(huì)呈現(xiàn)一些獨(dú)特的行為：

• 重新掛載組件：每次導(dǎo)航到新路由時(shí)，即使新舊路由共享相同的模板，該模板的一個(gè)新實(shí)例也會(huì)被掛載。
• DOM元素重建：模板中的DOM元素會(huì)在每次導(dǎo)航時(shí)被重新創(chuàng)建，而不是復(fù)用。
• 狀態(tài)不保留：由于模板重新掛載，任何在模板中維持的狀態(tài)都將丟失，每次導(dǎo)航都是從新的狀態(tài)開(kāi)始。
• 效果重新同步：React的效果（effects）會(huì)在每次導(dǎo)航時(shí)重新同步，意味著例如useEffect中的代碼會(huì)在每次模板掛載時(shí)執(zhí)行。

定義模板

定義模板非常簡(jiǎn)單，你只需要?jiǎng)?chuàng)建一個(gè)默認(rèn)導(dǎo)出的React組件，這個(gè)組件可以從template.js或template.tsx文件中導(dǎo)出。這個(gè)組件通常會(huì)接受children作為其屬性，并在其內(nèi)部渲染這些子元素：

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

模板使用場(chǎng)景

模板特別適合于那些需要在多個(gè)頁(yè)面之間共享相同布局，但又希望在每次頁(yè)面跳轉(zhuǎn)時(shí)能夠完全重置狀態(tài)和DOM的場(chǎng)景。這可以確保用戶在不同頁(yè)面間導(dǎo)航時(shí)，能夠獲得一致且干凈的體驗(yàn)，而不必?fù)?dān)心前一個(gè)頁(yè)面的狀態(tài)影響到當(dāng)前頁(yè)面。

通過(guò)明智地使用模板，你可以在保持代碼組織和復(fù)用性的同時(shí)，為用戶提供流暢且一致的瀏覽體驗(yàn)。

loading.tsx

loading.tsx 文件在 Next.js 應(yīng)用中扮演著特別的角色，它允許開(kāi)發(fā)者為特定路由段創(chuàng)建加載狀態(tài)，這些加載狀態(tài)在內(nèi)容加載時(shí)展示給用戶。使用 loading.tsx 可以有效地提升用戶體驗(yàn)，特別是在網(wǎng)絡(luò)環(huán)境較差或內(nèi)容較多需要較長(zhǎng)時(shí)間加載的場(chǎng)景下。

創(chuàng)建加載狀態(tài)

在 loading.tsx 文件中，你可以定義一個(gè)或多個(gè)加載狀態(tài)的 React 組件。這些組件可以是簡(jiǎn)單的動(dòng)畫(huà)，如旋轉(zhuǎn)的加載指示器，或者更復(fù)雜的占位符布局，如骨架屏。

// loading.tsx

export default function Loading() {
    return (
        <div className="loading-container">
            <p>內(nèi)容加載中，請(qǐng)稍候...</p>
            {/* 這里可以添加加載動(dòng)畫(huà)或圖標(biāo) */}
        </div>
    );
}

使用加載狀態(tài)

當(dāng)用戶導(dǎo)航到一個(gè)新的路由段，而這個(gè)路由段的內(nèi)容還在加載時(shí)，你定義的加載狀態(tài)會(huì)立即顯示給用戶。這提供了一個(gè)視覺(jué)反饋，讓用戶知道應(yīng)用正在響應(yīng)其操作，并且內(nèi)容正在積極加載中。這樣可以避免用戶在看到空白頁(yè)面時(shí)感到困惑或者認(rèn)為應(yīng)用出現(xiàn)了問(wèn)題。

提升用戶體驗(yàn)

利用 loading.tsx 實(shí)現(xiàn)的加載狀態(tài)可以大大提升應(yīng)用的用戶體驗(yàn)：

• 減少等待感：通過(guò)立即提供反饋，用戶感知到的等待時(shí)間會(huì)減少，即使實(shí)際加載時(shí)間沒(méi)有變短。
• 增強(qiáng)應(yīng)用感知速度：快速響應(yīng)用戶操作的應(yīng)用給人的感覺(jué)更快，即使是在加載較重的內(nèi)容時(shí)也不例外。
• 保持用戶參與：加載狀態(tài)可以是創(chuàng)造性的，提供額外的視覺(jué)元素或信息，保持用戶的參與度，避免他們?cè)诩虞d過(guò)程中離開(kāi)。

在設(shè)計(jì)加載狀態(tài)時(shí)，重要的是要保持它的簡(jiǎn)潔和與應(yīng)用整體風(fēng)格的一致性。加載狀態(tài)不僅是一種功能性需求，也是提升品牌體驗(yàn)和應(yīng)用專(zhuān)業(yè)度的機(jī)會(huì)。

error.tsx

在構(gòu)建現(xiàn)代web應(yīng)用時(shí)，有效地管理和響應(yīng)錯(cuò)誤是至關(guān)重要的。Next.js 通過(guò)文件系統(tǒng)層次結(jié)構(gòu)中的 error.tsx 文件，為開(kāi)發(fā)者提供了一種靈活而強(qiáng)大的方式來(lái)創(chuàng)建和管理錯(cuò)誤UI，以及處理特定路由段的錯(cuò)誤。

創(chuàng)建針對(duì)性的錯(cuò)誤UI

通過(guò)在應(yīng)用的不同路由級(jí)別添加 error.tsx 文件，你可以為這些路由定制特定的錯(cuò)誤處理UI。這種方法使得在用戶遇到錯(cuò)誤時(shí)，能夠展示更具體、更友好的錯(cuò)誤消息和恢復(fù)選項(xiàng)，而不是一個(gè)通用的錯(cuò)誤頁(yè)面。

// 使用 'use client' 來(lái)指明這些錯(cuò)誤組件必須是客戶端組件

'use client';

import { useEffect } from 'react';

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

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

隔離錯(cuò)誤影響

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

錯(cuò)誤恢復(fù)功能

在 error.tsx 中，你可以提供恢復(fù)功能，如重試按鈕，允許用戶嘗試從錯(cuò)誤中恢復(fù)，而無(wú)需重新加載整個(gè)頁(yè)面。這種快速響應(yīng)錯(cuò)誤并嘗試恢復(fù)的能力，對(duì)于保持應(yīng)用的交互性和用戶滿意度至關(guān)重要。

嵌套路由中的錯(cuò)誤處理

通過(guò)在嵌套的文件夾結(jié)構(gòu)中不同級(jí)別放置 error.tsx 文件，你可以實(shí)現(xiàn)更細(xì)粒度的錯(cuò)誤處理。這意味著，你可以為應(yīng)用中的不同部分定制不同的錯(cuò)誤處理策略和UI，使錯(cuò)誤處理更加靈活和用戶友好。

這種方法利用了Next.js的文件系統(tǒng)路由和組件模型，提供了一種既簡(jiǎn)潔又強(qiáng)大的錯(cuò)誤處理機(jī)制，幫助開(kāi)發(fā)者構(gòu)建更加可靠和用戶友好的應(yīng)用。

Parallel Routes（插槽）

Next.js 的并行路由是一種高級(jí)路由機(jī)制，允許在同一布局中同時(shí)渲染多個(gè)頁(yè)面，極大地增強(qiáng)了頁(yè)面布局和內(nèi)容管理的靈活性。通過(guò)使用名為“插槽（slots）”的功能，開(kāi)發(fā)者可以以模塊化的方式組織內(nèi)容。

定義插槽

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

以?xún)x表盤(pán)為例，你可以使用并行路由同時(shí)渲染用戶、收入和通知頁(yè)面：

// 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>
      </>
    );
}

并行路由的一個(gè)優(yōu)勢(shì)是它們能夠?qū)蝹€(gè)布局劃分為各種插槽，使代碼更易于管理。

獨(dú)立的路由處理

布局的每個(gè)插槽，例如用戶分析或收入指標(biāo)，都可以有自己的加載和錯(cuò)誤狀態(tài)。在不同頁(yè)面部分以不同速度加載或遇到獨(dú)特錯(cuò)誤的場(chǎng)景中，這種細(xì)粒度的控制尤其有益。

路由內(nèi)的子導(dǎo)航

你的儀表盤(pán)的每個(gè)插槽都可以實(shí)質(zhì)上作為一個(gè)小應(yīng)用程序運(yùn)行，完備自己的導(dǎo)航和狀態(tài)管理。這在諸如儀表盤(pán)這樣的復(fù)雜應(yīng)用中特別有用，不同部分服務(wù)于不同的目的。

//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/">默認(rèn)</Link>
  );
};

這種結(jié)構(gòu)不僅提升了代碼的模塊化和可讀性，而且還增強(qiáng)了用戶界面的交互性，使用戶能夠在儀表盤(pán)的不同部分之間流暢地導(dǎo)航，同時(shí)各部分能夠獨(dú)立地加載和處理數(shù)據(jù)。這樣的設(shè)計(jì)思想，為構(gòu)建復(fù)雜且高效的Web應(yīng)用提供了新的可能性。

結(jié)束

通過(guò)今天的分享，我們了解了Next.js并行路由的強(qiáng)大之處，以及它如何使我們能夠構(gòu)建更加動(dòng)態(tài)和響應(yīng)式的Web應(yīng)用。這項(xiàng)技術(shù)不僅提高了應(yīng)用的性能和用戶體驗(yàn)，還讓代碼的組織和維護(hù)變得更加高效。