K60至尊版剛預(yù)熱 一加Ace2 Pro正面硬剛
Redmi這邊剛?cè)缁鹑巛钡男麄髁薑60 Ultra的各種技術(shù)和硬件配置，作為競品的一加也坐不住了。一加中國區(qū)總裁李杰發(fā)布了兩條微博，表示在自家的一加Ace2上早就已經(jīng)采用了和PixelWo
NextJS 14的發(fā)布不僅僅是一個簡單的更新，它代表了對開發(fā)者體驗(yàn)和應(yīng)用速度的全新關(guān)注。對于使用React的開發(fā)者來說，NextJS 14承諾帶來更快速、更愉快的開發(fā)體驗(yàn)。無論是新項(xiàng)目的開始，還是現(xiàn)有項(xiàng)目的升級，NextJS 14都值得一試。
今天，我將向大家介紹一些關(guān)于NextJS的概念，這些可能是許多開發(fā)者所不知道的。你可以利用這些概念來優(yōu)化你的應(yīng)用，并改善開發(fā)者體驗(yàn)。
在開發(fā)大型Web應(yīng)用時，文件夾結(jié)構(gòu)可能會變得復(fù)雜混亂，特別是在處理路由時。NextJS提供了一種稱為路由分組的功能，可以幫助你更有效地組織路由結(jié)構(gòu)。
在沒有使用路由分組的情況下，你可能會在pages文件夾中看到許多雜亂無章的路由文件，這使得找到特定路由變得困難。
通過使用路由分組，你可以將相關(guān)的路由放在同一個文件夾（即路由組文件夾）下。這樣，你就可以根據(jù)不同主題或功能輕松地找到相關(guān)路由。
例如，你可以創(chuàng)建一個名為auth的路由組文件夾，然后將所有與認(rèn)證相關(guān)的路由（如登錄、注冊）放在這個文件夾下。
在app目錄的任何子目錄中創(chuàng)建一個以下劃線開頭的文件夾（如_components），這樣的文件夾和其中的文件不會被Next.js當(dāng)作頁面來處理。
例如，在app目錄下的favourite目錄中創(chuàng)建一個_components文件夾：
在特定目錄中創(chuàng)建文件，這些文件不會直接作為頁面提供給客戶端，除非它們被顯式地添加到page.tsx文件中。
在Next.js中，動態(tài)路由可以通過在括號內(nèi)添加省略號[...segmentName]來擴(kuò)展為捕獲所有后續(xù)的段。
例如，路徑/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作為參數(shù)，并將其轉(zhuǎn)換為字符串顯示在頁面上。
你可能想知道是否有辦法解決/docs這個路由的404錯誤。答案是肯定的，你可以通過一些方法來解決這個問題，答案在下面，請繼續(xù)往下看
在Next.js中，通過將參數(shù)放在雙方括號中：[[...segmentName]]，可以使捕獲所有段成為可選的。
例如，路由/docs/[[...slug]]/page.tsx不僅會匹配/docs/topic、/docs/topic/10等路由，還會匹配/docs本身。
在網(wǎng)站上，你可能注意到當(dāng)前正在查看的頁面鏈接往往有特殊的樣式或覆蓋層。這是一種提升用戶體驗(yàn)的常用方法。今天，我將介紹如何實(shí)現(xiàn)這一功能。
首先，在components目錄中創(chuàng)建一個名為Navbar.tsx的文件。這將是一個客戶端組件，因?yàn)橛脩魧⑴c導(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> )}當(dāng)用戶點(diǎn)擊其中一個鏈接時，該鏈接的文本顏色會改變，這表明了用戶當(dāng)前所處的頁面。例如，點(diǎn)擊“Sign In”鏈接后，文本顏色變化，從而增強(qiáng)了用戶體驗(yàn)。
確保你要使用的路由URL已經(jīng)存在，否則會出現(xiàn)404錯誤。
通過以上步驟，你可以在Next.js應(yīng)用中創(chuàng)建一個具有活動狀態(tài)樣式的導(dǎo)航欄，這不僅讓用戶界面看起來更加友好，還能提高用戶的導(dǎo)航體驗(yàn)。
隨著NextJS 14的發(fā)布，我們見證了前端開發(fā)領(lǐng)域的一次重大變革。這個版本不僅加強(qiáng)了對開發(fā)者體驗(yàn)的關(guān)注，還通過諸如路由分組、動態(tài)元數(shù)據(jù)、私有路由、可選的捕獲所有段以及活動鏈接等功能，大幅提升了應(yīng)用的性能和可用性。這些創(chuàng)新特性不僅簡化了復(fù)雜應(yīng)用的開發(fā)和維護(hù)，也為最終用戶帶來了更加流暢和直觀的瀏覽體驗(yàn)。NextJS 14的這些優(yōu)化措施，無疑將助力開發(fā)者構(gòu)建更加高效、更加用戶友好的現(xiàn)代Web應(yīng)用。作為React開發(fā)者，掌握并應(yīng)用這些新特性，將是我們適應(yīng)和引領(lǐng)前端技術(shù)潮流的關(guān)鍵。讓我們擁抱NextJS 14，共同開啟前端開發(fā)的新篇章！
本文鏈接：http://www.www897cc.com/showinfo-26-80889-0.html分享七個你可能不知道的 Next.js 14 小技巧
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號