NextJS 14的发布不仅仅是一个简单的更新，它代表了对开发者体验和应用速度的全新关注。对于使用React的开发者来说，NextJS 14承诺带来更快速、更愉快的开发体验。无论是新项目的开始，还是现有项目的升级，NextJS 14都值得一试。
今天，我将向大家介绍一些关于NextJS的概念，这些可能是许多开发者所不知道的。你可以利用这些概念来优化你的应用，并改善开发者体验。
在开发大型Web应用时，文件夹结构可能会变得复杂混乱，特别是在处理路由时。NextJS提供了一种称为路由分组的功能，可以帮助你更有效地组织路由结构。
在没有使用路由分组的情况下，你可能会在pages文件夹中看到许多杂乱无章的路由文件，这使得找到特定路由变得困难。
通过使用路由分组，你可以将相关的路由放在同一个文件夹（即路由组文件夹）下。这样，你就可以根据不同主题或功能轻松地找到相关路由。
例如，你可以创建一个名为auth的路由组文件夹，然后将所有与认证相关的路由（如登录、注册）放在这个文件夹下。
在app目录的任何子目录中创建一个以下划线开头的文件夹（如_components），这样的文件夹和其中的文件不会被Next.js当作页面来处理。
例如，在app目录下的favourite目录中创建一个_components文件夹：
在特定目录中创建文件，这些文件不会直接作为页面提供给客户端，除非它们被显式地添加到page.tsx文件中。
在Next.js中，动态路由可以通过在括号内添加省略号[...segmentName]来扩展为捕获所有后续的段。
例如，路径/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作为参数，并将其转换为字符串显示在页面上。
你可能想知道是否有办法解决/docs这个路由的404错误。答案是肯定的，你可以通过一些方法来解决这个问题，答案在下面，请继续往下看
在Next.js中，通过将参数放在双方括号中：[[...segmentName]]，可以使捕获所有段成为可选的。
例如，路由/docs/[[...slug]]/page.tsx不仅会匹配/docs/topic、/docs/topic/10等路由，还会匹配/docs本身。
在网站上，你可能注意到当前正在查看的页面链接往往有特殊的样式或覆盖层。这是一种提升用户体验的常用方法。今天，我将介绍如何实现这一功能。
首先，在components目录中创建一个名为Navbar.tsx的文件。这将是一个客户端组件，因为用户将与导航栏互动。在文件顶部添加“use client”指令，并从next/navigation中导入一个名为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> )}当用户点击其中一个链接时，该链接的文本颜色会改变，这表明了用户当前所处的页面。例如，点击“Sign In”链接后，文本颜色变化，从而增强了用户体验。
确保你要使用的路由URL已经存在，否则会出现404错误。
通过以上步骤，你可以在Next.js应用中创建一个具有活动状态样式的导航栏，这不仅让用户界面看起来更加友好，还能提高用户的导航体验。
随着NextJS 14的发布，我们见证了前端开发领域的一次重大变革。这个版本不仅加强了对开发者体验的关注，还通过诸如路由分组、动态元数据、私有路由、可选的捕获所有段以及活动链接等功能，大幅提升了应用的性能和可用性。这些创新特性不仅简化了复杂应用的开发和维护，也为最终用户带来了更加流畅和直观的浏览体验。NextJS 14的这些优化措施，无疑将助力开发者构建更加高效、更加用户友好的现代Web应用。作为React开发者，掌握并应用这些新特性，将是我们适应和引领前端技术潮流的关键。让我们拥抱NextJS 14，共同开启前端开发的新篇章！
本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-80889-0.html分享七个你可能不知道的 Next.js 14 小技巧
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： 利用生成对抗性网络进行欺诈检测
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
