6月iOS設(shè)備性能榜：M2穩(wěn)居榜首 A系列只能等一手3nm來(lái)救
沒有新品發(fā)布，自然iOS設(shè)備性能榜的上榜設(shè)備就沒有什么更替，僅僅只有跑分變化而產(chǎn)生的排名變動(dòng)，畢竟蘋果新品的發(fā)布節(jié)奏就是這樣的，一年下來(lái)也就幾個(gè)移動(dòng)端新品，不會(huì)像安卓廠商，一
NextJS 14 不僅僅是一次更新，它是對(duì)開發(fā)人員體驗(yàn)和速度的重新關(guān)注。總體而言，NextJS 14 承諾為 React 開發(fā)人員帶來(lái)更快、更愉快的開發(fā)之旅。無(wú)論您是重新開始還是升級(jí)現(xiàn)有項(xiàng)目，它都絕對(duì)值得一試。
今天，我將向您介紹一些大多數(shù)開發(fā)人員不知道的 NextJS 概念，您可以使用它們來(lái)優(yōu)化您的應(yīng)用程序并改善開發(fā)人員體驗(yàn)。
圖片
您的文件夾結(jié)構(gòu)是否混亂？很難找到具體路由？因此，可以使用 Next JS 提供的 Route Group 功能來(lái)組織它們。
讓我們使用 Route Group 來(lái)組織此文件夾結(jié)構(gòu)。
圖片
現(xiàn)在，您可以通過將不同主題的路由保存在 Route Group 文件夾下來(lái)輕松查找它們。
Route Group 不會(huì)在 URL 中添加其文件夾名稱
URL 中沒有 (auth)。
URL 中沒有 (auth)。
Next.js 有一個(gè)元數(shù)據(jù) API，可用于定義應(yīng)用程序元數(shù)據(jù)（例如 HTML head 元素內(nèi)的 meta 和 link 標(biāo)簽），以改進(jìn) 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',}您可以使用 generateMetadata 函數(shù)來(lái)處理需要?jiǎng)討B(tài)值的 fetch 元數(shù)據(jù)。
它用于增加和增強(qiáng)您網(wǎng)站的 SEO 分?jǐn)?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)站的標(biāo)題正在動(dòng)態(tài)更改。
元數(shù)據(jù)按順序評(píng)估，從根數(shù)據(jù)段開始，直到最接近最終 page.tsx 數(shù)據(jù)段的數(shù)據(jù)段。例如
您可能會(huì)想什么是私有路由？它們是只有管理員才能訪問的東西嗎？不，私有路由是指任何用戶都無(wú)法直接通過網(wǎng)站訪問的文件夾。只是不直接向客戶端提供的網(wǎng)頁(yè)。
這可以通過以下方法來(lái)實(shí)現(xiàn)：
圖片
圖片
圖片
通過在括號(hào) [...segmentName] 內(nèi)添加省略號(hào)，可以擴(kuò)展動(dòng)態(tài)分段以捕獲所有后續(xù)分段
例如， /docs/[...slug]/page.tsx 將匹配 /docs/topic ，但也匹配 /docs/topic/1 等等。但如果 URL 為 /docs ，則會(huì)出現(xiàn)頁(yè)面未找到錯(cuò)誤。
圖片
404 error 404錯(cuò)誤
404 error 404錯(cuò)誤
圖片
圖片
這是代碼片段：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 錯(cuò)誤嗎？
本文鏈接：http://www.tebozhan.com/showinfo-26-74676-0.html關(guān)于 Next.js ，你不知道的事情
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： 面試官：如何防止短信盜刷和短信轟炸？
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)