NextJS 14的發佈不僅僅是一個簡單的更新，它代表了對開發者體驗和應用速度的全新關註。對於使用React的開發者來說，NextJS 14承諾帶來更快速、更愉快的開發體驗。無論是新項目的開始，還是現有項目的升級，NextJS 14都值得一試。

今天，我將向大傢介紹一些關於NextJS的概念，這些可能是許多開發者所不知道的。你可以利用這些概念來優化你的應用，並改善開發者體驗。

1. 路由分組：整理雜亂的文件結構（Route Groups）

在開發大型Web應用時，文件夾結構可能會變得復雜混亂，特別是在處理路由時。NextJS提供了一種稱為路由分組的功能，可以幫助你更有效地組織路由結構。

混亂的文件結構：

在沒有使用路由分組的情況下，你可能會在pages文件夾中看到許多雜亂無章的路由文件，這使得找到特定路由變得困難。

使用路由分組整理：

通過使用路由分組，你可以將相關的路由放在同一個文件夾（即路由組文件夾）下。這樣，你就可以根據不同主題或功能輕松地找到相關路由。

例如，你可以創建一個名為auth的路由組文件夾，然後將所有與認證相關的路由（如登錄、註冊）放在這個文件夾下。

路由分組的優勢

清晰的文件結構：通過路由分組，你的項目結構將更加清晰有序。
易於維護：分組後的結構使得維護特定功能或模塊的路由更加容易。
不影響URL結構：值得註意的是，路由分組不會在URL中添加文件夾名稱。例如，即使有一個名為auth的分組文件夾，URL仍然是http://localhost:3000/sign-in，而不是http://localhost:3000/auth/sign-in。

2. 靜態元數據（Static Metadata）

Next.js提供了一個元數據API，允許開發者定義應用程序的元數據（例如，在HTML的head元素中的meta和link標簽），這對於提升搜索引擎優化（SEO）和網頁分享性非常有幫助。

元數據API的使用

你可以在頁面組件（如page.tsx）或佈局組件（如layout.tsx）中使用元數據API。

import type { Metadata } from 'next'
export const metadata: Metadata = {
  title: 'Hero's Blog',
  description: 'Blog created by Hero',
}

3. 動態元數據（Dynamic Metadata）

在Next.js中，你可以使用generateMetadata函數來獲取需要動態值的元數據。這對於提高網站的SEO得分非常有效。

動態元數據的實現

import type { Metadata } from "next";
type Props = {
    params: {
        id: string
    }
};
export const generateMetadata = ({ params }: Props): Metadata => {
    return {
        title: `Product ${params.id}`
    }
};
export default function FavouriteProductDetails({ params }: Props) {
    return <h1>Favourite Product Details {params.id}</h1>
}

在這個示例中，我們定義了一個generateMetadata函數，它根據傳入的params（在這個例子中是產品ID）動態生成元數據。這樣，每個產品詳情頁都可以擁有獨特的標題，有助於提升SEO效果。

元數據的排序

Next.js在處理元數據時，會按照從根路徑到最終頁面的路徑順序來評估元數據。例如：

app/layout.tsx（根佈局）
app/favourite/layout.tsx（嵌套的博客佈局）
app/favourite/[slug]/page.tsx（博客頁面）

這種結構確保了元數據可以從最頂層佈局繼承下來，同時也可以在更深層次的頁面中進行定制和覆蓋。

使用動態元數據的優勢

SEO提升：通過為每個頁面提供獨特且相關的元數據，可以顯著提高頁面在搜索引擎中的可見度。
個性化體驗：動態元數據允許根據頁面內容或用戶行為提供更個性化的頁面標題和描述。
靈活性：動態生成元數據的能力提供了高度的靈活性，使得開發者可以針對不同的頁面和情境調整元數據。

通過動態元數據的應用，Next.js 14為開發者提供了更多的控制權，使他們能夠針對每個頁面精確地優化SEO，從而提升用戶體驗和網站的整體表現。

4. 私有路由

在Next.js中，私有路由指的是那些不能被用戶通過網站直接訪問的文件夾，即那些不會直接提供給客戶端的Web頁面。

實現私有路由的方法

1. 創建獨立的組件目錄

將組件放置在app目錄之外的單獨目錄中。這樣做可以確保這些組件不會被當作頁面直接訪問。

例如，你可以創建一個名為components的目錄來存放所有的共享組件。

2. 在app目錄下的任意目錄中創建_components文件夾

在app目錄的任何子目錄中創建一個以下劃線開頭的文件夾（如_components），這樣的文件夾和其中的文件不會被Next.js當作頁面來處理。

例如，在app目錄下的favourite目錄中創建一個_components文件夾：

3. 在目錄中創建不直接提供給客戶端的文件

在特定目錄中創建文件，這些文件不會直接作為頁面提供給客戶端，除非它們被顯式地添加到page.tsx文件中。

5. 捕獲所有段（Catch-all Segments）

在Next.js中，動態路由可以通過在括號內添加省略號[...segmentName]來擴展為捕獲所有後續的段。

示例說明

例如，路徑/docs/[...slug]/page.tsx不僅會匹配/docs/topic，還會匹配/docs/topic/1等更深層次的路由。但是，如果URL是/docs，它會返回一個404錯誤。

代碼片段

import React from 'react';
type Params = {
    params: {
        slug: string[]
    }
};
export default function SlugPage({ params: { slug } }: Params) {
    return (
        <div>
            <h1>Viewing Custom Slug Page</h1>
            <span>URL Contains: {slug.toString()} </span>
        </div>
    );
}

在這個代碼片段中，我們定義了一個SlugPage組件，它接收slug作為參數，並將其轉換為字符串顯示在頁面上。

解決404錯誤

你可能想知道是否有辦法解決/docs這個路由的404錯誤。答案是肯定的，你可以通過一些方法來解決這個問題，答案在下面，請繼續往下看

6. 可選的捕獲所有段（Optional Catch-All Segments）

在Next.js中，通過將參數放在雙方括號中：[[...segmentName]]，可以使捕獲所有段成為可選的。

例如，路由/docs/[[...slug]]/page.tsx不僅會匹配/docs/topic、/docs/topic/10等路由，還會匹配/docs本身。

可選的捕獲所有段與普通捕獲所有段的區別

普通捕獲所有段：必須包含至少一個參數，例如/docs/topic。
可選的捕獲所有段：可以匹配沒有任何參數的路由，例如/docs。

7. 活動鏈接（Active Links）

在網站上，你可能註意到當前正在查看的頁面鏈接往往有特殊的樣式或覆蓋層。這是一種提升用戶體驗的常用方法。今天，我將介紹如何實現這一功能。

創建一個導航欄組件

首先，在components目錄中創建一個名為Navbar.tsx的文件。這將是一個客戶端組件，因為用戶將與導航欄互動。在文件頂部添加“use client”指令，並從next/navigation中導入一個名為usePathname的鉤子。

示例代碼

"use client";
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import React from 'react';
type Links = {
    title: string,
    url: string
};
export default function Navbar() {
    const links: Links[] = [
        {
            title: "Sign In",
            url: "/sign-in"
        },
        {
            title: "Favourite",
            url: "/favourite/1"
        },
    ];
    const pathname = usePathname();
    return (
        <div className='flex space-x-4'>
            {links.map(({ title, url }: Links) => {
                const isActive = pathname.startsWith(url);
                return <Link
                    className={isActive ? "font-bold text-emerald-500" : "text-white"}
                    key={title}
                    href={url}>
                    {title}
                </Link>
            })}
        </div>
    )
}

解釋代碼

定義鏈接：通過創建一個名為links的常量來定義你想要在導航欄中顯示的鏈接。
映射鏈接：使用map方法遍歷links數組，並為每個鏈接生成一個Link組件。
活動鏈接樣式：使用usePathname鉤子獲取當前的路徑。然後通過比較當前路徑和鏈接的url，決定是否為該鏈接應用活動狀態的樣式。

效果

當用戶點擊其中一個鏈接時，該鏈接的文本顏色會改變，這表明了用戶當前所處的頁面。例如，點擊“Sign In”鏈接後，文本顏色變化，從而增強了用戶體驗。

註意事項

確保你要使用的路由URL已經存在，否則會出現404錯誤。

通過以上步驟，你可以在Next.js應用中創建一個具有活動狀態樣式的導航欄，這不僅讓用戶界面看起來更加友好，還能提高用戶的導航體驗。

結束

隨著NextJS 14的發佈，我們見證了前端開發領域的一次重大變革。這個版本不僅加強了對開發者體驗的關註，還通過諸如路由分組、動態元數據、私有路由、可選的捕獲所有段以及活動鏈接等功能，大幅提升了應用的性能和可用性。這些創新特性不僅簡化了復雜應用的開發和維護，也為最終用戶帶來了更加流暢和直觀的瀏覽體驗。NextJS 14的這些優化措施，無疑將助力開發者構建更加高效、更加用戶友好的現代Web應用。作為React開發者，掌握並應用這些新特性，將是我們適應和引領前端技術潮流的關鍵。讓我們擁抱NextJS 14，共同開啟前端開發的新篇章！

分享 7 個你可能不知道的 Next.js 14 小技巧