NextJS 14 不仅仅是一次更新，它是对开发人员体验和速度的重新关注。总体而言，NextJS 14 承诺为 React 开发人员带来更快、更愉快的开发之旅。无论您是重新开始还是升级现有项目，它都绝对值得一试。
今天我将向您介绍一些大多数开发人员不知道的 NextJS 概念，您可以使用它们来优化您的应用程序并改善开发人员体验。
图片
您的文件夹结构是否混乱？很难找到具体路由？因此，可以使用 Next JS 提供的 Route Group 功能来组织它们。
让我们使用 Route Group 来组织此文件夹结构。
图片
现在，您可以通过将不同主题的路由保存在 Route Group 文件夹下来轻松查找它们。
Route Group 不会在 URL 中添加其文件夹名称
URL 中没有 (auth)。
URL 中没有 (auth)。
Next.js 有一个元数据 API，可用于定义应用程序元数据（例如 HTML head 元素内的 meta 和 link 标签），以改进 SEO 和网络共享性。
您可以在 page.tsx 或 layout.tsx 中使用元数据 API
import type { Metadata } from 'next' export const metadata: Metadata = { title: 'Hero's Blog', description: 'Blog created by Hero',}您可以使用 generateMetadata 函数来处理需要动态值的 fetch 元数据。
它用于增加和增强您网站的 SEO 分数。
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>}
图片
图片
正如您在上面看到的，网站的标题正在动态更改。
元数据按顺序评估，从根数据段开始，直到最接近最终 page.tsx 数据段的数据段。例如
您可能会想什么是私有路由？它们是只有管理员才能访问的东西吗？不，私有路由是指任何用户都无法直接通过网站访问的文件夹。只是不直接向客户端提供的网页。
这可以通过以下方法来实现：
图片
图片
图片
通过在括号 [...segmentName] 内添加省略号，可以扩展动态分段以捕获所有后续分段
例如， /docs/[...slug]/page.tsx 将匹配 /docs/topic ，但也匹配 /docs/topic/1 等等。但如果 URL 为 /docs ，则会出现页面未找到错误。
图片
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> )}你们可能想知道我们可以修复 404 错误吗？
本文链接：http://www.28at.com/showinfo-26-74195-0.html关于 Next.js 你不知道的事情
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： 创建线程的几种方式？你知道吗？
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号