关于 Next.js ，你不知道的事情-28资讯网—

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

2024-02-06 10:14:57 软件 366观看

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

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

声明：本网页内容旨在传播知识，不代表本站观点，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。

显示全文