關(guān)于 Next.js ，你不知道的事情
NextJS 14 不僅僅是一次更新，它是對開發(fā)人員體驗和速度的重新關(guān)注?？傮w而言，NextJS 14 承諾為 React 開發(fā)人員帶來更快、更愉快的開發(fā)之旅。無論您是重新開始還是升級現(xiàn)有項目，它都絕對值得一試。
今天，我將向您介紹一些大多數(shù)開發(fā)人員不知道的 NextJS 概念，您可以使用它們來優(yōu)化您的應(yīng)用程序并改善開發(fā)人員體驗。
1. Route Groups 路由組
圖片
您的文件夾結(jié)構(gòu)是否混亂？很難找到具體路由？因此，可以使用 Next JS 提供的 Route Group 功能來組織它們。
讓我們使用 Route Group 來組織此文件夾結(jié)構(gòu)。
圖片
現(xiàn)在，您可以通過將不同主題的路由保存在 Route Group 文件夾下來輕松查找它們。
Route Group 不會在 URL 中添加其文件夾名稱
URL 中沒有 (auth)。
URL 中沒有 (auth)。
2. Static Metadata 靜態(tài)元數(shù)據(jù)
Next.js 有一個元數(shù)據(jù) API，可用于定義應(yīng)用程序元數(shù)據(jù)（例如 HTML head 元素內(nèi)的 meta 和 link 標簽），以改進 SEO 和網(wǎng)絡(luò)共享性。
您可以在 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. Dynamic Metadata 動態(tài)元數(shù)據(jù)
您可以使用 generateMetadata 函數(shù)來處理需要動態(tài)值的 fetch 元數(shù)據(jù)。
它用于增加和增強您網(wǎng)站的 SEO 分數(shù)。
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>Favouraite Product Details {params.id}</h1>
}
圖片
圖片
正如您在上面看到的，網(wǎng)站的標題正在動態(tài)更改。
元數(shù)據(jù)的排序
元數(shù)據(jù)按順序評估，從根數(shù)據(jù)段開始，直到最接近最終 page.tsx 數(shù)據(jù)段的數(shù)據(jù)段。例如
- app/layout.tsx （根布局）
- app/favourite/layout.tsx （嵌套博客布局）
- app/favourite/[slug]/page.tsx （博客頁面）
4. Private Routes 私有路由
您可能會想什么是私有路由？它們是只有管理員才能訪問的東西嗎？不，私有路由是指任何用戶都無法直接通過網(wǎng)站訪問的文件夾。只是不直接向客戶端提供的網(wǎng)頁。
這可以通過以下方法來實現(xiàn)：
- 在 app 目錄之外創(chuàng)建一個單獨的 components 目錄。
圖片
- 在 app 目錄下的任意目錄中，創(chuàng)建 _components 文件夾。（可以給出任何名稱，是的，這是一個下劃線，你沒看錯）
圖片
- 在目錄中創(chuàng)建不同的文件，除非添加到 page.tsx 文件，否則這些文件不會直接提供給客戶端。
圖片
5. Catch-all Segments
通過在括號 [...segmentName] 內(nèi)添加省略號，可以擴展動態(tài)分段以捕獲所有后續(xù)分段
例如， /docs/[...slug]/page.tsx 將匹配 /docs/topic ，但也匹配 /docs/topic/1 等等。但如果 URL 為 /docs ，則會出現(xiàn)頁面未找到錯誤。
圖片
404 error 404錯誤
404 error 404錯誤
圖片
圖片
這是代碼片段：app/docs/[...slug]/page.tsx
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>
)
}你們可能想知道我們可以修復(fù) 404 錯誤嗎？??
如果我說是的話怎么辦??！是的，您可以修復(fù)該錯誤。
向下滾動查看解決方案！
6. 可選的 Catch-All Segments
通過將參數(shù)置于雙方括號中，可將全局段作為可選參數(shù)：[[...segmentName]]。
例如，除了 /docs/topic 、 /docs/topic/10 之外， /docs/[[...slug]]/page.tsx 還將匹配 /docs 。
不再有錯誤！
不再有錯誤！
catch-all 和可選的 catch-all 段之間的區(qū)別在于，如果是可選的，則不帶參數(shù)的路由也會匹配（上例中的 /docs ）。
7. Active Links
有沒有想過，您在屏幕上瀏覽的網(wǎng)站鏈接是如何疊加的？
今天我將告訴您如何實現(xiàn)該功能并增強用戶體驗。
因此，讓我們首先在 components 目錄中創(chuàng)建一個 Navbar.tsx 。
由于這將是一個客戶端組件，因為用戶將與導(dǎo)航欄交互，因此在文件頂部添加 "use client" 指令。還從 next/navigation 導(dǎo)入鉤子名稱 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>
)
}首先，通過創(chuàng)建鏈接常量，我們定義了導(dǎo)航欄中需要的鏈接。將它們映射到您的頁面上，您的頁面就會看起來像這樣：
圖片
單擊任意一個鏈接即可看到魔法！
圖片
正如您所看到的，當(dāng)我單擊“登錄”鏈接時，文本的顏色發(fā)生了變化！太簡單了:)
注意：確保要使用的路由 URL 已經(jīng)存在，否則會出現(xiàn) 404 錯誤。
https://javascript.plainenglish.io/things-you-dont-know-about-next-js-02ee54cb5b7f
