NextJS 14的發(fā)布不僅僅是一個(gè)簡(jiǎn)單的更新，它代表了對(duì)開(kāi)發(fā)者體驗(yàn)和應(yīng)用速度的全新關(guān)注。對(duì)于使用React的開(kāi)發(fā)者來(lái)說(shuō)，NextJS 14承諾帶來(lái)更快速、更愉快的開(kāi)發(fā)體驗(yàn)。無(wú)論是新項(xiàng)目的開(kāi)始，還是現(xiàn)有項(xiàng)目的升級(jí)，NextJS 14都值得一試。

今天，我將向大家介紹一些關(guān)于NextJS的概念，這些可能是許多開(kāi)發(fā)者所不知道的。你可以利用這些概念來(lái)優(yōu)化你的應(yīng)用，并改善開(kāi)發(fā)者體驗(yàn)。

1. 路由分組：整理雜亂的文件結(jié)構(gòu)（Route Groups）

在開(kāi)發(fā)大型Web應(yīng)用時(shí)，文件夾結(jié)構(gòu)可能會(huì)變得復(fù)雜混亂，特別是在處理路由時(shí)。NextJS提供了一種稱為路由分組的功能，可以幫助你更有效地組織路由結(jié)構(gòu)。

混亂的文件結(jié)構(gòu)：

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

使用路由分組整理：

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

例如，你可以創(chuàng)建一個(gè)名為auth的路由組文件夾，然后將所有與認(rèn)證相關(guān)的路由（如登錄、注冊(cè)）放在這個(gè)文件夾下。

路由分組的優(yōu)勢(shì)：

• 清晰的文件結(jié)構(gòu)：通過(guò)路由分組，你的項(xiàng)目結(jié)構(gòu)將更加清晰有序。
• 易于維護(hù)：分組后的結(jié)構(gòu)使得維護(hù)特定功能或模塊的路由更加容易。
• 不影響URL結(jié)構(gòu)：值得注意的是，路由分組不會(huì)在URL中添加文件夾名稱。例如，即使有一個(gè)名為auth的分組文件夾，URL仍然是http://localhost:3000/sign-in，而不是http://localhost:3000/auth/sign-in。

2. 靜態(tài)元數(shù)據(jù)（Static Metadata）

Next.js提供了一個(gè)元數(shù)據(jù)API，允許開(kāi)發(fā)者定義應(yīng)用程序的元數(shù)據(jù)（例如，在HTML的head元素中的meta和link標(biāo)簽），這對(duì)于提升搜索引擎優(yōu)化（SEO）和網(wǎng)頁(yè)分享性非常有幫助。

元數(shù)據(jù)API的使用

你可以在頁(yè)面組件（如page.tsx）或布局組件（如layout.tsx）中使用元數(shù)據(jù)API。

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

3. 動(dòng)態(tài)元數(shù)據(jù)（Dynamic Metadata）

在Next.js中，你可以使用generateMetadata函數(shù)來(lái)獲取需要?jiǎng)討B(tài)值的元數(shù)據(jù)。這對(duì)于提高網(wǎng)站的SEO得分非常有效。

動(dòng)態(tài)元數(shù)據(jù)的實(shí)現(xiàn)

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>
}

在這個(gè)示例中，我們定義了一個(gè)generateMetadata函數(shù)，它根據(jù)傳入的params（在這個(gè)例子中是產(chǎn)品ID）動(dòng)態(tài)生成元數(shù)據(jù)。這樣，每個(gè)產(chǎn)品詳情頁(yè)都可以擁有獨(dú)特的標(biāo)題，有助于提升SEO效果。

元數(shù)據(jù)的排序

Next.js在處理元數(shù)據(jù)時(shí)，會(huì)按照從根路徑到最終頁(yè)面的路徑順序來(lái)評(píng)估元數(shù)據(jù)。例如：

• app/layout.tsx（根布局）
• app/favourite/layout.tsx（嵌套的博客布局）
• app/favourite/[slug]/page.tsx（博客頁(yè)面）

這種結(jié)構(gòu)確保了元數(shù)據(jù)可以從最頂層布局繼承下來(lái)，同時(shí)也可以在更深層次的頁(yè)面中進(jìn)行定制和覆蓋。

使用動(dòng)態(tài)元數(shù)據(jù)的優(yōu)勢(shì)

• SEO提升：通過(guò)為每個(gè)頁(yè)面提供獨(dú)特且相關(guān)的元數(shù)據(jù)，可以顯著提高頁(yè)面在搜索引擎中的可見(jiàn)度。
• 個(gè)性化體驗(yàn)：動(dòng)態(tài)元數(shù)據(jù)允許根據(jù)頁(yè)面內(nèi)容或用戶行為提供更個(gè)性化的頁(yè)面標(biāo)題和描述。
• 靈活性：動(dòng)態(tài)生成元數(shù)據(jù)的能力提供了高度的靈活性，使得開(kāi)發(fā)者可以針對(duì)不同的頁(yè)面和情境調(diào)整元數(shù)據(jù)。

通過(guò)動(dòng)態(tài)元數(shù)據(jù)的應(yīng)用，Next.js 14為開(kāi)發(fā)者提供了更多的控制權(quán)，使他們能夠針對(duì)每個(gè)頁(yè)面精確地優(yōu)化SEO，從而提升用戶體驗(yàn)和網(wǎng)站的整體表現(xiàn)。

4. 私有路由

在Next.js中，私有路由指的是那些不能被用戶通過(guò)網(wǎng)站直接訪問(wèn)的文件夾，即那些不會(huì)直接提供給客戶端的Web頁(yè)面。

實(shí)現(xiàn)私有路由的方法

創(chuàng)建獨(dú)立的組件目錄

將組件放置在app目錄之外的單獨(dú)目錄中。這樣做可以確保這些組件不會(huì)被當(dāng)作頁(yè)面直接訪問(wèn)。

例如，你可以創(chuàng)建一個(gè)名為components的目錄來(lái)存放所有的共享組件。

在app目錄下的任意目錄中創(chuàng)建_components文件夾

在app目錄的任何子目錄中創(chuàng)建一個(gè)以下劃線開(kāi)頭的文件夾（如_components），這樣的文件夾和其中的文件不會(huì)被Next.js當(dāng)作頁(yè)面來(lái)處理。

例如，在app目錄下的favourite目錄中創(chuàng)建一個(gè)_components文件夾：

在目錄中創(chuàng)建不直接提供給客戶端的文件

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

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

在Next.js中，動(dòng)態(tài)路由可以通過(guò)在括號(hào)內(nèi)添加省略號(hào)[...segmentName]來(lái)擴(kuò)展為捕獲所有后續(xù)的段。

示例說(shuō)明

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

代碼片段

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

在這個(gè)代碼片段中，我們定義了一個(gè)SlugPage組件，它接收slug作為參數(shù)，并將其轉(zhuǎn)換為字符串顯示在頁(yè)面上。

解決404錯(cuò)誤

你可能想知道是否有辦法解決/docs這個(gè)路由的404錯(cuò)誤。答案是肯定的，你可以通過(guò)一些方法來(lái)解決這個(gè)問(wèn)題，答案在下面，請(qǐng)繼續(xù)往下看

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

在Next.js中，通過(guò)將參數(shù)放在雙方括號(hào)中：[[...segmentName]]，可以使捕獲所有段成為可選的。

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

可選的捕獲所有段與普通捕獲所有段的區(qū)別

• 普通捕獲所有段：必須包含至少一個(gè)參數(shù)，例如/docs/topic。
• 可選的捕獲所有段：可以匹配沒(méi)有任何參數(shù)的路由，例如/docs。

7. 活動(dòng)鏈接（Active Links）

在網(wǎng)站上，你可能注意到當(dāng)前正在查看的頁(yè)面鏈接往往有特殊的樣式或覆蓋層。這是一種提升用戶體驗(yàn)的常用方法。今天，我將介紹如何實(shí)現(xiàn)這一功能。

創(chuàng)建一個(gè)導(dǎo)航欄組件

首先，在components目錄中創(chuàng)建一個(gè)名為Navbar.tsx的文件。這將是一個(gè)客戶端組件，因?yàn)橛脩魧⑴c導(dǎo)航欄互動(dòng)。在文件頂部添加“use client”指令，并從next/navigation中導(dǎo)入一個(gè)名為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>
    )
}

解釋代碼

• 定義鏈接：通過(guò)創(chuàng)建一個(gè)名為links的常量來(lái)定義你想要在導(dǎo)航欄中顯示的鏈接。
• 映射鏈接：使用map方法遍歷links數(shù)組，并為每個(gè)鏈接生成一個(gè)Link組件。
• 活動(dòng)鏈接樣式：使用usePathname鉤子獲取當(dāng)前的路徑。然后通過(guò)比較當(dāng)前路徑和鏈接的url，決定是否為該鏈接應(yīng)用活動(dòng)狀態(tài)的樣式。

效果

當(dāng)用戶點(diǎn)擊其中一個(gè)鏈接時(shí)，該鏈接的文本顏色會(huì)改變，這表明了用戶當(dāng)前所處的頁(yè)面。例如，點(diǎn)擊“Sign In”鏈接后，文本顏色變化，從而增強(qiáng)了用戶體驗(yàn)。

注意事項(xiàng)

確保你要使用的路由URL已經(jīng)存在，否則會(huì)出現(xiàn)404錯(cuò)誤。

通過(guò)以上步驟，你可以在Next.js應(yīng)用中創(chuàng)建一個(gè)具有活動(dòng)狀態(tài)樣式的導(dǎo)航欄，這不僅讓用戶界面看起來(lái)更加友好，還能提高用戶的導(dǎo)航體驗(yàn)。

結(jié)束

隨著NextJS 14的發(fā)布，我們見(jiàn)證了前端開(kāi)發(fā)領(lǐng)域的一次重大變革。這個(gè)版本不僅加強(qiáng)了對(duì)開(kāi)發(fā)者體驗(yàn)的關(guān)注，還通過(guò)諸如路由分組、動(dòng)態(tài)元數(shù)據(jù)、私有路由、可選的捕獲所有段以及活動(dòng)鏈接等功能，大幅提升了應(yīng)用的性能和可用性。這些創(chuàng)新特性不僅簡(jiǎn)化了復(fù)雜應(yīng)用的開(kāi)發(fā)和維護(hù)，也為最終用戶帶來(lái)了更加流暢和直觀的瀏覽體驗(yàn)。NextJS 14的這些優(yōu)化措施，無(wú)疑將助力開(kāi)發(fā)者構(gòu)建更加高效、更加用戶友好的現(xiàn)代Web應(yīng)用。作為React開(kāi)發(fā)者，掌握并應(yīng)用這些新特性，將是我們適應(yīng)和引領(lǐng)前端技術(shù)潮流的關(guān)鍵。讓我們擁抱NextJS 14，共同開(kāi)啟前端開(kāi)發(fā)的新篇章！