当前位置：首页 > 科技 > 软件

关于 Next.js ，你不知道的事情

来源：责编：时间：2024-02-06 10:14:57 324观看

导读NextJS 14 不仅仅是一次更新，它是对开发人员体验和速度的重新关注。总体而言，NextJS 14 承诺为 React 开发人员带来更快、更愉快的开发之旅。无论您是重新开始还是升级现有项目，它都绝对值得一试。今天，我将向您介绍一些

NextJS 14 不仅仅是一次更新，它是对开发人员体验和速度的重新关注。总体而言，NextJS 14 承诺为 React 开发人员带来更快、更愉快的开发之旅。无论您是重新开始还是升级现有项目，它都绝对值得一试。

今天，我将向您介绍一些大多数开发人员不知道的 NextJS 概念，您可以使用它们来优化您的应用程序并改善开发人员体验。

1. Route Groups 路由组

图片

您的文件夹结构是否混乱？很难找到具体路由？因此，可以使用 Next JS 提供的 Route Group 功能来组织它们。

让我们使用 Route Group 来组织此文件夹结构。

图片

现在，您可以通过将不同主题的路由保存在 Route Group 文件夹下来轻松查找它们。

Route Group 不会在 URL 中添加其文件夹名称

URL 中没有 (auth)。

2. Static Metadata 静态元数据

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',}

3. Dynamic Metadata 动态元数据

您可以使用 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 数据段的数据段。例如

app/layout.tsx （根布局）
app/favourite/layout.tsx （嵌套博客布局）
app/favourite/[slug]/page.tsx （博客页面）

4. Private Routes 私有路由

您可能会想什么是私有路由？它们是只有管理员才能访问的东西吗？不，私有路由是指任何用户都无法直接通过网站访问的文件夹。只是不直接向客户端提供的网页。

这可以通过以下方法来实现：

在 app 目录之外创建一个单独的 components 目录。

图片

在 app 目录下的任意目录中，创建 _components 文件夹。（可以给出任何名称，是的，这是一个下划线，你没看错）

图片

在目录中创建不同的文件，除非添加到 page.tsx 文件，否则这些文件不会直接提供给客户端。

图片

5. Catch-all Segments

通过在括号 [...segmentName] 内添加省略号，可以扩展动态分段以捕获所有后续分段

例如， /docs/[...slug]/page.tsx 将匹配 /docs/topic ，但也匹配 /docs/topic/1 等等。但如果 URL 为 /docs ，则会出现页面未找到错误。

图片

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 错误吗？

本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-74676-0.html关于 Next.js ，你不知道的事情

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：面试官：如何防止短信盗刷和短信轰炸？

下一篇：科技昨夜今晨 0229：16.98 万元起，比亚迪汉唐荣耀版车型上市；长安回应收购高合；小米汽车回应“3 月 28 日正式发布”，具体时间会通过官方渠道公告

标签：

热门焦点

鸿蒙OS 4.0公测机型公布：甚至连nova6都支持

华为全新的HarmonyOS 4.0操作系统将于今天下午正式登场，官方在发布会之前也已经正式给出了可升级的机型产品，这意味着这些机型会率先支持升级享用。这次的HarmonyOS 4.0支持
小米降噪蓝牙耳机Necklace分享：听一首歌读懂一个故事

在今天下午的小米Civi 2新品发布会上，小米还带来了一款新的降噪蓝牙耳机Necklace，我们也在发布结束的第一时间给大家带来这款耳机的简单分享。现在大家能见到最多的蓝牙耳机
容量越大越不坏？24万块硬盘故障率报告公布这些产品零故障

8月5日消息，云存储服务商Backblaze发布了最新的硬盘故障率报告，年故障率有所上升。Backblaze发布的硬盘季度统计数据，其中包括故障率等重要方面。这些结
线程通讯的三种方法！通俗易懂

线程通信是指多个线程之间通过某种机制进行协调和交互，例如，线程等待和通知机制就是线程通讯的主要手段之一。在 Java 中，线程等待和通知的实现手段有以下几种方式：Object 类下
Rust中的高吞吐量流处理

作者 | Noz编译 | 王瑞平本篇文章主要介绍了Rust中流处理的概念、方法和优化。作者不仅介绍了流处理的基本概念以及Rust中常用的流处理库，还使用这些库实现了一个流处理程序
JavaScript学习 -AES加密算法

引言在当今数字化时代，前端应用程序扮演着重要角色，用户的敏感数据经常在前端进行加密和解密操作。然而，这样的操作在网络传输和存储中可能会受到恶意攻击的威胁。为了确保数据
从零到英雄：高并发与性能优化的神奇之旅

作者 | 波哥审校 | 重楼作为公司的架构师或者程序员，你是否曾经为公司的系统在面对高并发和性能瓶颈时感到手足无措或者焦头烂额呢？笔者在出道那会为此是吃尽了苦头的，不过也得
三星获批量产iPhone 15全系屏幕：苹果史上最惊艳直屏

按照惯例，苹果将继续在今年9月举办一年一度的秋季新品发布会，有传言称发布会将于9月12日举行，届时全新的iPhone 15系列将正式与大家见面，不出意外的话
iQOO Neo8 Pro评测：旗舰双芯加持最强性能游戏旗舰

【Techweb评测】去年10月，iQOO推出了一款Neo7手机，该机搭载了联发科天玑9000+，配备独显芯片Pro+，带来了同价位段最佳的游戏体验，一经上市便受到了诸多用