nextjs13临时笔记

news2024/11/25 10:46:51

动态路由

  • 文件夹以中括号命名[id]
-pages:
--list:
---[id]:
----index.jsx(访问路径/list/1 即这种形式/list/:id)
---index.jsx(访问路径/list)


[...params]

gpt接口分析

初始化项目

npm install next react react-dom
# or
yarn add next react react-dom
# or
pnpm add next react react-dom

  • 初始化成功,基本结构如下

  • package.json如下

  • 项目使用nextjs13版本,所以本示例以/app目录为准
Note: Next.js 13 introduces the app/ directory (beta). This new directory has support for layouts, nested routes, and uses Server Components by default. Inside app/, you can fetch data for your entire application inside layouts, including support for more granular nested layouts (with colocated data fetching).

注意：Next.js 13 引入了 app/ 目录（测试版）。这个新目录支持布局、嵌套路由，并默认使用服务器组件。在 app/ 内，您可以在布局内为整个应用程序获取数据，包括支持更细粒度的嵌套布局（使用共存数据获取）。

Good to know: Previous Next.js data fetching methods such as getServerSideProps, getStaticProps, and getInitialProps are not supported in the new app directory.

温馨提示：新的 app 目录不支持以前的 Next.js 数据获取方法，例如 getServerSideProps 、 getStaticProps 和 getInitialProps 。
  • 具体文件约定可看
    • https://beta.nextjs.org/docs/routing/fundamentals#file-conventions

路由

  • 比较重要的就是这个路由了
    • 官方文档:https://beta.nextjs.org/docs/routing/defining-routes

提示： .js 、 .jsx 或 .tsx 文件扩展名可用于特殊文件。

基础路由

  • 在 app 目录中，文件夹用于定义路由。每个文件夹代表一个映射到 URL 段的路由段。要创建嵌套路由，您可以将文件夹相互嵌套。

  • 一个特殊的 page.js 文件用于使路由段可公开访问。

  • 大概就是这种意思

路由组

  • 官方文档:https://beta.nextjs.org/docs/routing/defining-routes#convention

  • 有时候我们有很多路由,比如home,homeuser,homedetail,如果是基础路由,就是直接建立在外面了,但是为了表示层级关系,就会建立在一个路径下,也就是without affecting the URL path

  • 具体方法:将文件夹名称通过括号括起来即可,即(分组的名称)

比如我需要将home,homeuser,homedetail,收集在一个文件夹当中,就可以这样子做
-app
--(home)
	---home
		----page.tsx
	---homeuser
		----page.tsx
	---homedetail
		----page.tsx

动态路由

  • 官方文档

    • https://beta.nextjs.org/docs/routing/defining-routes#dynamic-segments

  • 官方以一个博客文章为例,说明了动态路由的创建和传参

例如，一个简单的博客可以包含以下路由 app/blog/[slug]/page.js ，其中 [slug] 是博客文章的动态分段。
路由访问urlparams对象
app/blog/[slug]/page.js/blog/a{ slug: 'a' }
app/blog/[slug]/page.js/blog/b{ slug: 'b' }
app/blog/[slug]/page.js/blog/c{ slug: 'c' }
  • 我们就可以这样建立目录,当然,slug单词不满意的话就可以换一个单词,换单词后,params对象的key也会改变.我这里就换一个单词.换为item

获取params参数

  • 也就是我们在react或vue当中定义的/home/:id这种params参数

方法一

  • params 属性会传递给 layout 、 page 、 route 和 generateMetadata 函数。所以可以这样子获取参数
import React from 'react';

const Blog = ({params}) => {
    console.log('获取的params参数和query参数',params);
    return (
        <div>
            我是博客 1,2,3,4,5,6,7,.... 页面显示的内容
        </div>
    );
};

export default Blog;

方法二:useParams

  • 和react获取调用的hooks一样,只不过我们顶部需要添加use client
"use client"
import React from 'react';
import { useParams } from "next/navigation";

const Blog = () => {
    const params = useParams();
    //输出{item: '1'}
    console.log('获取的params参数',params);
    return (
        <div>
            我是博客 1,2,3,4,5,6,7,.... 页面显示的内容
        </div>
    );
};

export default Blog;

获取query参数

  • 也就是我们访问页面的时候/search?name=李白&age=100&sex=男这种name,age,sex参数

方法一

import React from 'react';

const Blog = ({params}) => {
    console.log('获取的params参数和query参数',params);
    return (
        <div>
            我是博客 1,2,3,4,5,6,7,.... 页面显示的内容
        </div>
    );
};

export default Blog;

方法二:useSearchParams

  • 和react获取调用的hooks一样,只不过我们顶部需要添加use client
"use client"
import React from 'react';
import { useSearchParams } from "next/navigation";

const Blog = () => {
    const params = useSearchParams();
    //输出 李白 100 男
    console.log('获取的query参数',params.get('name'),params.get('age'),params.get('sex'))
    return (
        <div>
            我是博客 1,2,3,4,5,6,7,.... 页面显示的内容
        </div>
    );
};

export default Blog;

(todo)路由回退

(todo)页面加载时获取数据并渲染(也就用户访问这个页面才开始生成页面)

  • 可以看看bilibili视频
    • https://www.bilibili.com/video/BV1Sb41197i2/
    • 需要注意,获取路由参数在nextjs13已经不是博主所示的了
  • 这个就省略,大多都是这种形式, 就不多说明了
    • 坏处就是爬虫不喜欢这种~

(todo)构建时获取数据预生成静态页面(也就是预先生成好静态页面)

  • 可以看看bilibili视频

    • https://www.bilibili.com/video/BV1B54y1g7dp/

  • 需要注意,获取路由参数在nextjs13已经不是博主所示的了

    • 好处就是爬虫喜欢这种形式~

  • 官方说明:

    • https://beta.nextjs.org/docs/data-fetching/generating-static-params

  • generateStaticParams

包含全部params参数和params可选操作

  • 通过在括号 [...folderName] 内添加省略号，可以将动态段扩展为包含所有后续段。

    • 官方文档:https://beta.nextjs.org/docs/routing/defining-routes#catch-all-segments

  • 例如

    • app/shop/[...slug]/page.js 将匹配 /shop/clothes ，
    • 也匹配 /shop/clothes/tops 、 /shop/clothes/tops/t-shirts 等。

  • 路由访问情况和匹配情况如下

路由访问urlparams对象
app/shop/[...slug]/page.js/shop/a{ slug: ['a'] }
app/shop/[...slug]/page.js/shop/a/b{ slug: ['a', 'b'] }
app/shop/[...slug]/page.js/shop/a/b/c{ slug: ['a', 'b', 'c'] }
  • 如果后缀是可选的,比如我可以直接访问/shop,而不携带params参数,就需要再添加一个中括号[[...slug]]
    • 官方文档:https://beta.nextjs.org/docs/routing/defining-routes#optional-catch-all-segments
路由访问urlparams对象
app/shop/[[...slug]]/page.js/shop{}
app/shop/[[...slug]]/page.js/shop/a{ slug: ['a'] }
app/shop/[[...slug]]/page.js/shop/a/b{ slug: ['a', 'b'] }
app/shop/[[...slug]]/page.js/shop/a/b/c{ slug: ['a', 'b', 'c'] }

(todo)路由拦截

(并行路由)路由插槽

  • 官方文档可看
    • https://beta.nextjs.org/docs/routing/parallel-routes
  • 并行路由是使用命名槽创建的。插槽是使用 @文件名 约定定义的。
例如，以下文件结构为视频分析仪表板定义了两个显式槽， @audience 和 @views ：

dashboard
├── @audience
│   ├── demographics
│   │   └── page.js
│   ├── subscribers
│   │   └── page.js
│   └── page.js
├── @views
│   ├── impressions
│   │   └── page.js
│   ├── view-duration
│   │   └── page.js
│   └── page.js
├── layout.js
└── page.js

上面的文件夹结构意味着 /dashboard/layout.js 布局组件现在接受插槽 @audience 和 @views 作为 props 并且可以与 children prop 并行渲染它们：

function AudienceNav() {
  return <nav>...</nav>;
}

function ViewsNav() {
  return <nav>...</nav>;
}

export default function Layout({
  children,
  audience,
  views,
}: {
  children: React.ReactNode;
  audience: React.ReactNode;
  views: React.ReactNode;
}) {
  return (
    <>
      <h1>Tab Bar Layout</h1>
      {children}

      <h2>Audience</h2>
      <AudienceNav />
      {audience}

      <h2>Views</h2>
      <ViewsNav />
      {views}
    </>
  );
}
  • 示例就比较简单了

并行路由当中的条件路由

  • 并行路由 可用于实现条件路由。例如，您可以根据当前用户类型呈现 @user 和 @team 路由：
import { getCurrentUserType } from 'lib/user';

export default async function Layout({
  children,
  user,
  team,
}: {
  children: React.ReactNode;
  user: React.ReactNode;
  team: React.ReactNode;
}) {
  const userType: 'user' | 'team' = getCurrentUserType();

  return (
    <>
      {/* Render the user or team slot depending on the current user type */}
      {userType === 'user' ? user : team}
      {children}
    </>
  );
}

拦截路由(不是鉴权!)

  • 拦截路由允许您在当前布局中加载新路由，同时屏蔽浏览器 URL，这在保持当前页面的上下文很重要时非常有用。例如，在编辑一项任务时查看所有任务，在侧边模式中打开购物车，或在动态消息中展开照片。
    • 拦截路由不是鉴权,相当于改变url后原有页面不会丢失,而是会保持,效果有点像对话框
    • 拦截路由可以使用 (..) 约定定义，类似于相对路径 ../ 。您还可以使用 (...) 约定创建相对于 app 目录的路径。

作用

  • 拦截路由允许您在当前布局中加载新路由，同时屏蔽浏览器 URL，这在保持当前页面的上下文很重要时非常有用。例如，在编辑一项任务时查看所有任务，在侧边模式中打开购物车，或在动态消息中展开照片。

demo和文档

  • github:https://github.com/kishore-gunnam/nextjs-intercepting-routes-example

  • 在线演示:https://nextjs-intercepting-routes-example.vercel.app/products(需要魔法)

  • 文档

    • 官方文档:https://beta.nextjs.org/docs/routing/intercepting-routes

顺带一提

  • 使用路由组和拦截路由一起使用,会出现访问不了拦截路由的问题,不知道什么情况

示例

  • 目录结构
feed
├── @modal
│   └── (..)photo
│       └── [id]
│           └── page.tsx
│		└──default.tsx
├── page.tsx
└── layout.tsx
photo
└── [id]
    └── page.tsx

目录结构

大概就是这个意思,和上面的demo是一样意思

layout.js

  • layout.js可以理解为一个布局方式,可以为每一个路由建立一个layout.js文件,当然也要注意layout.js组件的body,和html标签,否则,组件卸载的很容易有如下报错

    • Warning: You are mounting a new body component when a previous one has not first unmounted. It is an error to render more than one body component at a time and attributes and children of these components will likely fail in unpredictable ways. Please only render a single instance of <body> and if you need to mount a new one, ensure any previous ones have unmounted first.

  • 可以看看此在线示例:

    • 示例:https://202210260735-nextjs-with-turbopack.vercel.app/layouts/electronics (需要魔法)
    • github地址:https://github.com/kevinold/202210260735-nextjs-with-turbopack

  • 这个在线实例我们可以看成下图这样子

  • 大概这种

  • 规则如下
    • 各个路由页面的layout.js是独立的,不是共享的(/app下的layout.js就是一个全局是layout)
    • 要创建多个根布局，请删除顶级 layout.js 文件，并在每个路由组中添加一个 layout.js 文件。这对于将应用程序划分为具有完全不同的 UI 或体验的部分非常有用。 <html> 和 <body> 标签需要添加到每个根布局。

(todo)路由路径整理归类

文档

  • https://nextjs.org/blog/next-13#new-app-directory-beta
  • https://beta.nextjs.org/docs/routing/fundamentals
  • https://nextjs.org/blog/layouts-rfc

临时

  • (…)是不是在当前文件夹进行插槽使用,也就是使用当前文件夹下的layout布局 ???还不知道
  • (…)则使用的是app下的layout ???还不知道
  • 注意下面这二个跳转是不一样的哦,一个开头存在/,一个则不存在,错误的
#下面这意思是在当前后面拼接url
#比如我在/home,点击下面这个跳转,那么就会跳转到/home/cart/1
<Link href={`cart/1`}>拦截路由</Link>
 

#下面这意思是以此url为起始点
#比如我在/home,点击下面这个跳转,那么就会跳转到/cart/1
<Link href={`/cart/1`}>拦截路由</Link>
  • 认证可以用need-auth

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/447880.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

WPF教程（六）--依赖属性（2）--属性值优先级与继承

WPF教程（六）--依赖属性（2）--属性值优先级与继承

一、 依赖属性的优先级 由于WPF 允许我们可以在多个地方设置依赖属性的值&#xff0c;所以我们就必须要用一个标准来保证值的优先级别。比如下面的例子中&#xff0c;我们在三个地方设置了按钮的背景颜色&#xff0c;那么哪一个设置才会是最终的结果呢&#xff1f;是Black、Re…
阅读更多...
[oeasy]python0136_接收输入_input函数_字符串_str

[oeasy]python0136_接收输入_input函数_字符串_str

输入变量 回忆上次内容 上次研究了 一行赋值多个变量 a b 5a, b 7, 8 还研究了 标识符的惯用法 python使用的是 snake_case蛇形命名法用下划线 分隔开小写字母的 方法这样就可以 更合理地 命名变量了 变量变量 能变的量我可以 手工输入变量的值 吗&#xff1f;&#x1f9…
阅读更多...
MongoDB 数据库数据导入 - 关于如何使用 csv 导入数据的命令方法、图形界面可视化导入方法

MongoDB 数据库数据导入 - 关于如何使用 csv 导入数据的命令方法、图形界面可视化导入方法

序言 兴趣使然&#xff0c;突发奇想&#xff0c;想到了就写&#xff0c;就当打发时间了。 一、使用 csv 导入数据的命令方法 csv文件路径问题&#xff0c;绝对路径和相对路径都可以 方法1 type 没有号&#xff0c;也是可以的&#xff0c;空格自动识别 将测试表.csv 文件导…
阅读更多...
pikachu靶场-csrf

pikachu靶场-csrf

csrf 跨站请求伪造&#xff08;英语&#xff1a;Cross-site request forgery&#xff09;&#xff0c;也被称为 one-click attack 或者 session riding&#xff0c;通常缩写为 CSRF 或者 XSRF&#xff0c; 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方…
阅读更多...
【C++ 六】内存分区、引用

【C++ 六】内存分区、引用

内存分区、引用 文章目录 内存分区、引用前言1 内存分区模型1.1 程序运行前1.2 程序运行后1.3 new 操作符 2 引用2.1 引用基本使用2.2 引用注意事项2.3 引用做函数参数2.4 引用做函数返回值2.5 引用本质2.6 常量引用 总结 前言 本文包含内存分区、引用基本使用、引用注意事项、…
阅读更多...
记一次完整的rc.local中启动python脚本报psutil找不到问题解决

记一次完整的rc.local中启动python脚本报psutil找不到问题解决

文章目录 1&#xff0c;问题1.1&#xff0c;rc.local1.2&#xff0c;watchdog.py 2&#xff0c;问题排查2.1&#xff0c;手动执行start.sh后功能正常2.2&#xff0c;开机启动后rc.local加载start.sh&#xff0c;然后start.sh启动python脚本报错2.3&#xff0c;怀疑是rc.local加…
阅读更多...
SAP S/4HANA不是ERP了？

SAP S/4HANA不是ERP了？

今天浏览了一下SAP官方帮助&#xff08;Help&#xff09;网站&#xff0c;有一个意外的发现&#xff0c;如上图&#xff1a;SAP S/4HANA和SAP ERP是分别显示的&#xff0c;这让我想起了前段时间一个朋友和我说&#xff1a;“S/4HANA现在都不叫ERP了&#xff0c;因为里面包括了超…
阅读更多...
【C++初阶】C++入门(一):命名空间C++的输入输出缺省参数函数重载

【C++初阶】C++入门(一):命名空间C++的输入输出缺省参数函数重载

​ ​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;数据结构 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录 1.什么是C1.1 C的发…
阅读更多...
最新Tuxera NTFS2023最新版Mac读写NTFS磁盘工具 更新详情介绍

最新Tuxera NTFS2023最新版Mac读写NTFS磁盘工具 更新详情介绍

Tuxera NTFS for Mac是一款Mac系统NTFS磁盘读写软件。在系统默认状态下&#xff0c;MacOSX只能实现对NTFS的读取功能&#xff0c;Tuxera NTFS可以帮助MacOS 系统的电脑顺利实现对NTFS分区的读/写功能。Tuxera NTFS 2023完美兼容最新版本的MacOS 11 Big Sur&#xff0c;在M1芯片…
阅读更多...
Python统计学：如何理解样本统计量？

Python统计学：如何理解样本统计量？

本期介绍样本统计量是怎么算的&#xff0c;并用Python来模拟随机抽样。用一个在鱼塘捞鱼的简单例子来理解样本均值的概念。 如何理解重复试验&#xff1f; 指能够在完全相同条件下进行多次的试验&#xff1b; 比如我们抛10枚硬币&#xff0c;用来计算正面出现的概率&#xff…
阅读更多...
4.7 贝塞尔曲线

4.7 贝塞尔曲线

学习目标&#xff1a; 学习贝塞尔曲线可以遵循以下步骤&#xff1a; 1.了解基本概念和定义&#xff1a;学习贝塞尔曲线前需要了解贝塞尔曲线的基本概念和定义&#xff0c;如何定义一条贝塞尔曲线、控制点的概念以及贝塞尔曲线的几何性质等。 2.学习贝塞尔曲线的构造方法&…
阅读更多...
Django搭建一个简易GPT网站

Django搭建一个简易GPT网站

文章目录 环境安装创建主项目和应用程序在 settings.py 文件中注册应用程序在 views.py 文件中为应用程序创建视图配置应用程序的 URL创建和渲染模板KEY实现发送提示功能注意事项完整源码 环境安装 pip install django openai创建主项目和应用程序 处理完项目的环境后&#x…
阅读更多...
第二个机器学习应用：乳腺癌数据集在决策树模型上的挖掘

第二个机器学习应用：乳腺癌数据集在决策树模型上的挖掘

目录 决策树优化与可视化 1 决策树分类 2 决策树可视化 3 显示树的特征重要性 特征重要性可视化 决策树回归 1 决策树回归 决策树优化与可视化 1 决策树分类 from sklearn.datasets import load_breast_cancer from sklearn.tree import DecisionTreeClassifier from sk…
阅读更多...
基于C++开发的医院医学影像PACS 可二次开发，三维重建

基于C++开发的医院医学影像PACS 可二次开发，三维重建

医学影像PACS系统源码&#xff0c;集成三维影像后处理功能&#xff0c;包括三维多平面重建、三维容积重建、三维表面重建、三维虚拟内窥镜、最大/小密度投影、心脏动脉钙化分析等功能。系统功能强大&#xff0c;代码完整。有演示。 本套PACS系统专门针对医院工作流程设计的&am…
阅读更多...
分布式ID生成策略总结

分布式ID生成策略总结

1、UUID 2、数据库自增ID 2.1、主键表 2.2、ID自增步长设置 3、号段模式 4、Redis INCR 5、雪花算法 6、美团(Leaf) 7、百度(Uidgenerator) 8、滴滴(TinyID) 总结比较 背景 在复杂的分布式系统中&#xff0c;往往需要对大量的数据进行唯一标识&#xff0c;比如在对…
阅读更多...
springboot中的日志

springboot中的日志

作者&#xff1a;~小明学编程 文章专栏&#xff1a;spring框架 格言&#xff1a;热爱编程的&#xff0c;终将被编程所厚爱。 目录 为什么需要日志 如何使用日志功能 日志的打印 获取日志对象 使用日志对象打印日志 日志级别 为什么我们需要把日志分为如此多的种类呢&am…
阅读更多...
今天面试招了个25K的测试员，从腾讯出来的果然都有两把刷子···

今天面试招了个25K的测试员，从腾讯出来的果然都有两把刷子···

公司前段时间缺人&#xff0c;也面了不少测试&#xff0c;前面一开始瞄准的就是中级的水准&#xff0c;也没指望来大牛&#xff0c;提供的薪资在15-25k&#xff0c;面试的人很多&#xff0c;但平均水平很让人失望。看简历很多都是4年工作经验&#xff0c;但面试中&#xff0c;不…
阅读更多...
《系统架构设计》-07-面向领域的技术设计

《系统架构设计》-07-面向领域的技术设计

文章目录 1 实体与值对象1.1 实体对象1.1.1 唯一标识&#xff08;Identity&#xff09;1.1.2 可变性贫血模型充血模型 1.2 值对象1.3 示例&#xff08;识别实体和值对象&#xff09;1&#xff09;识别实体对象2&#xff09;提取值对象3&#xff09;挖掘实体的关键行为4&#xf…
阅读更多...
solidworks2022 - feature works 变灰的解决方法

solidworks2022 - feature works 变灰的解决方法

文章目录 solidworks2022 - feature works 变灰的解决方法概述实验feature works 变灰问题的重现备注END solidworks2022 - feature works 变灰的解决方法 概述 feature works 用于step文件转零件. 一般是不同版本的solidworks交换文件的方法. 今天突然发现, 我自己转出的ste…
阅读更多...
Spring框架使用总结

Spring框架使用总结

Spring框架使用 前言处理事务管理声明式事务&#xff1a;编程式事务&#xff1a; 框架核心常见注解 AOP&#xff08; 面向切面编程&#xff09;切面和通知有哪些类型&#xff1f;切面的类型通知类型AOP实现使用场景 IOC(管理所有的JavaBean)依赖注入&#xff08;DI&#xff09;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023