K60至尊版剛預(yù)熱 一加Ace2 Pro正面硬剛
Redmi這邊剛?cè)缁鹑巛钡男麄髁薑60 Ultra的各種技術(shù)和硬件配置，作為競(jìng)品的一加也坐不住了。一加中國(guó)區(qū)總裁李杰發(fā)布了兩條微博，表示在自家的一加Ace2上早就已經(jīng)采用了和PixelWo
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)在，您可以通過(guò)將不同主題的路由保存在 Route Group 文件夾下來(lái)輕松查找它們。
Route Group 不會(huì)在 URL 中添加其文件夾名稱
URL 中沒(méi)有 (auth)。
URL 中沒(méi)有 (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èn)的東西嗎？不，私有路由是指任何用戶都無(wú)法直接通過(guò)網(wǎng)站訪問(wèn)的文件夾。只是不直接向客戶端提供的網(wǎng)頁(yè)。
這可以通過(guò)以下方法來(lái)實(shí)現(xiàn)：
圖片
圖片
圖片
通過(guò)在括號(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://m.www897cc.com/showinfo-26-74195-0.html關(guān)于 Next.js 你不知道的事情
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wè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)