next.js高危漏洞赔偿吗

好， next j s 官方文档的这个 demo 教程，那第一章我们来创建我们的这个项目。 首先呢，我们先打开我们的呃命令行终端，那在这呢，我使用的是 windows 操作系统，所以我在这呢使用这个 windows 加 r 回车，然后打开了运行对话框，再输入 c m d 回车，打开我的命令行。 在呃命令行之后呢，我个人习惯呢，是让他在一个干净的目录下边去创建项目，所以我在这呢地冒号回车切换到地盘。 然后呢，因为有的时候我们可能之前在 d 盘的某个目录，所以我 cd 反斜线回车，这样呢，就让我呃到达了 d 盘的根目路啊，那接下来我们再去按照官网当中的那个 命令去创建我们的练习项目。好，那么呢，官方文档当中的这个命令行呢，它比较长啊，呃，为的是让我们把更多的精力放在这个呃 nix j s 的核心功能上面。好，那接下来我们来看一下这个命令。 首先呢，第一部分，它是我们创建 nix j s 项目的基本命令啊，这个应该是说啊不可少的。那第二部分呢，就是我们要创建项目就需要给项目指定一个名称， 当然这个项目名称呢，也是呃我们将要创建项目的这个目录的名称。那接下来呢，我们 nix js 呢，呃，支持很多的这个包管理工具啊，那在这呢，呃，这个命令当中 指定了使用 n p m 作为包管理工具。接下来这个命令行参数呢是，呃指定一个项目模板，项目模板存在的意义呢？就是说，呃，我们不是说从零到一去创建项目，而是呃 使用一个模板去创建，呃这个目的呢，也就是说让我们我们把大量的这个学习的精力 放在耐克斯 gs 的核心功能上边啊，而不是说去啊写一些 css 啊，啊，写一些这个 ts 类型啊之类的东西，所以呢， 这个是呆默教程当中给我们提前准备了呃一些呃内容啊。好，那接下来呢，我们把这个命令直接 啊复制到命令行，然后回车，那我们就是呃去创建项目。呃，其实从命令行当中我们也可以看到，他是从这个 github 这个仓库把我们这个项目模板呃拉取下来的啊，好， 那么呢，在拉举完成之后，我们还是在命令行当中，那么我们 c d 啊， c d 到这个项目当中，然后呢再使用我们常用的这个 v s 扣的编辑器，把这个啊下载下来的这个 demo 项目我们先去看一下。 呃，这个呢，我们在编辑器当中呢看到的是这个样子，那当然呢，他有目录，有文件，有很多啊，那我们在这呢主要的看哪些文件呢啊？在这我们官方文档当中也给做了一个提取经验啊。好， 那首先呢我们第一个目录就是我们这个 app 目录， app 目录呢，我管他叫主目录，相当于我们在其他的项目当中的 src 目录，那也就是说我们之后编写的大量的代码都是在这个目录当中啊，那当然以及他的子目录当中， 在 a p p 这个目录下边呢，它有一个 l i b， 也就是 library 的这么一个目录，那在这呢它主要呃用来存放呢，呃，比如说我们一些工具函数啊，以及我们用于获取数据的啊，接口函数啊。 好，那接下来呢？嗯，还有什么呢？还有就是我们的 ui 目录，那 ui 呢？一般来说我们在这个项目当中用于存放，呃，这个组件文件 件啊，好，那再往下呢，就是我们的这个 public 科目录， public 科目录用于存放我们项目当中的静态资源，那静态资源，比如说我们啊地方第三方的 c s s 文件，那比如说我们这个， 呃页面当中要用到的图片啊，等等等等。啊。好，下边还有一个呢，这个是 scripts 这么一个目录，在这个目录当中呢，会存放一些脚本文件， 那在我们这个 demo 的项目当中啊，呃，他有一个文件呢，呃，脚本文件其实是 js， 用于，呃在我们这个将要使用的这个数据库当中去添加一些供我们操作练习的这个数据库记录啊，是，是这么一个功能。 好，那最后一个呢，就是我们的这个配置文件啊， next j s 啊， next 点 config， 点 j s。 好，这就是我们这个 demo 的主要的目录结构啊。好， 那在这个我们这个 demo 项目当中呢，呃呃，有一些文件也还是给我们提供啊，提供好了，或者说预先准备了，比如说我们现在看到的这个叫做，呃，在 l i b 下边啊，呃， place holder data 点 j s 这一个 啊，这个呢是在我们连接数据库之前，那么我们可能要做一些啊，数据展示的一些练习，那所以呢，这个项目已经提前给我们准备好了一些模拟的 数据，除了这个模拟的数据呢，因为我们的 max j s 它默认情况下是呃支持或者说使用 t s 的啊。啊，那为了照顾说我们有一些同学呢，这个 t s 不是很好啊， 另外呢，也就是说把我们的这个精力还是主要放在 nice g s 本身，所以这个单目项目当中同样给我们啊预先定义好了一些 t s 类型啊， 好，这个文件，嗯，也是在 lib 这个目录下边啊，那这两个文件我们只需要指导一下，然后我们用的时候呢，就是在从这个相应的这个文件当中直接导入就可以了。好，那么我们继续。呃，我们刚才只是看 看了这个 demo 项目的目录结构，以及看了两个文件，但是现在我们这个项目呢，还不能去运行啊，因为我们只是啊下载了一个模板嘛，那模板这个项目呢，需要依赖，所以我们在这呢还需要执行 npmi 啊，好， 去安装这个依赖，安装完这个依赖之后呢，然后我们去把这个项目跑起来，就是执行这个 n p m r d e v。 好，呃，那在执行完 n p m 软 d e v 之后，我们可以看到它大概的提示啊，这儿写的是 next j s 十四点零点二啊， 当然那个你的那个版本可能和我这个商务险不一样啊，同样呢提示我们，嗯，可以在浏览器地址栏输入 logo 号 三千，那么查看我们的这个项目的啊，一个刚创建之后的样子。 好，那么在这呢，我就是在浏览器输入了这个地址，然后看到了这个页面在这呢，我稍微吐槽一下啊，就是，呃，默认的这么一个新的项目页呢， 它这个箭头啊比较大，你可能看不到，所以我在这呢摁了 f 十二，把这个页面缩小，我们看到这个页面的啊，完整的这个样子啊， 我们之后的学习练习就是在这么一个啊啊半成品的一个项目的基础上，然后去学习他的核心技能。 好，那接下来呢，就是我们去查看这第一章的啊，或者说阅读第一章的英文 文文档。好，那接下来呢，我们来进入啊，我们这个 demo 项目的第一章啊，好，那第一章呢？我稍微把这个字再大一点啊，啊，在这呢，我们首先是来开始，然后呢创建一个新的项目。 好啊，那去创建一个 next 的应用项目，那首先呢是打开你的终端， 然后呢通过 cd 命令切换到啊指令的这个目录区。哪个目录呢？ folder 文件夹目录啊， 是你希望的想把你这个项目放在哪哪个目录，那你就切换到哪个目录去啊，然后我们去执行下边的这个命令啊，那 下边这个命令呢？我，呃在刚才也解释了啊，那这个是我们的基本的命令，然后呢项目的名称啊，这里是使用 npm。 好，以及我们有一个项目模板啊，在这个项目模板的基础上去做这个练习。 好，然后这啊这个命令使用的是啊这个 create next a p p。 啊，这么一个啊，那它相当于什么呀？相当于一个啊，命令行接口工具，命令行接口工具啊，它呢帮我们去 建立这个 next j s 的应用啊，当然是为你哈好，嗯，然后呢在上边的这个命令当中，那么你也使用了这个 example 啊，这么一个标志，那他的这个标志呢，就是让我们去，呃，在这个课程当中呢，是使用这一个模板啊， 好，再往来，那在这呢，我们就是浏览我们的这个项目，也就是我们刚才执行命令完的那个项目。 呃，那在这呢是 unlike， 呃，这个教程，那这个是不像这个一些教程那样，那怎么样呢？那就是，呃让你去写代码，呃。从哪从什么 程度去写呢？从这个零去开始写代码，也就是说我们当前的这个教程不会让你从零去开始啊，写代码啊，然后后边呃 watch off， 那更多的这个代码啊，更多的这个，这个 或者说叫许多吧啊，就是这个课程当中的许多代码，那我们是已经写完了啊，已经为你写完了啊。 好，那这样做是为什么呢？那这个这样做的好处啊？那是它反应乐 reflect 真实世界的这个 开发的这么一个状况啊，那就是我们在实际工作中开发呢，就是这样，一应该是有一部分代码已经创建好了，或者说已经写好了， 那 where 就是你 likely， 就是你更像于说你在工作的时候已经有 了一个，或者说你在工作的时候，呃使用一个已存在的代码仓库啊，那我们就是他的意思就是我们在实际开发当中肯定是，呃有之前的代码积累，有仓库，我们一部分代码就直接从代码仓库拿过来用就好了啊。 好，然后下边啊，我们的目标啊是什么呢？是帮助你聚焦于啊，学习 主要功能啊，学习 nix j s 的主要功能。哎，这是我们呃的主要目的，让你聚焦在这啊，那所以呢？是 result how to， 呃就没有必要去写所有的应用成 程序代码啊，就是把大部分的精力啊，主要精力集中在我们这个耐克斯 gs 的主要特征，上边啊，好，然后下边 那在安装完成之后，那么呢你去呃打开你的这个项目啊，用这个编辑器去打开，并且呢跳转到这个项目目录当中啊，这个项目目录当中，那在这呢，他执行了 cd 命令， 然后啊，那让我们花一些时间 spend 啊 sometime 去浏览这个项目， 然后下边呢是 folder structure 目录结构， 你可能会啊，或者说应该是你将 注意到啊，注意到，注意到的东西是什么呢？啊，这个这个项目有下列的目录结构啊， folder structure 啊，这是这些，然后下边是文字的一个说明，首先是 app 这个目录， 它包含了所有的路由组件，然后呢还有就是你的这个应用逻辑啊， 这个是啊，你将在或者说你大多数的工作的位置啊，或者说从这这个 from 哎，怎么翻译好呢？就意思就是说你之后的大量代码都肯定是在这个 a p p 这个目录 里边的啊，好，再往下 a b b 下边这 l 呃 l i b， 那这儿呢是包含呃函数，那是被用于你这个应用当中的，这个函数 好放在这 l i b 里边，然后比如啊，可用的可重用的工具函数，然后呢以及数据获取的函数，那就是我们封装的这个接口啊， 再往下，呃 a p p u i 那 u i 这儿呢？包含了所有的呃 u i 组件，那就是你这个应用当中所有的 u i 组件，那比如说我们可能会有一个 car 的组件啊，这个表格组件 表单组价啊，那后边这句啊，呃 to save time， 那就是为了节省时间啊，那我们已经替你准备了这个相应的样式 啊，这个组件为你，哈哈，对，就是就是给你准备了这个这个组件以及这个样式了啊，也不需要你去写，因为我们的焦点还是在主要的这个。呃，耐克斯 gs 的功能上边啊， 好啊，下边 public 目录 public， 然后包含所有的静态资源啊，就是你这个 for your application 啊，就是你这个应用当中的啊，比如说图片啊，好，然后呢？这个 scripts 啊， scripts 呢？包含 a seating script。 那怎么翻译？叫种子文件还是什么？那其实他的目的就是，呃被用于，呃 populate 填充你的这个数据库，在后面的章节当中啊， 我们操作数据库的时候，那执行这个一个这个目录里边一个脚本文件，那么就让我们数据库里边呃，有这个数据了， 好，再往下。呃配置文件，那就是 config files， 呃，然后呢？呃你也会，你可能也会，或者说你将也也能看到 注意到。呃配置文件，那比如说这个配置文件啊，好，那它在哪呢？在我们的这个根部录下啊，就是 your application 在，在这，嗯，那他多数的这个相关的这些配置文件，因为不光是他啊，还有其他的这个配置文件，那都呃是被创建好了的，并且那个 pre 肯定是提前或者说预备预先配置好了。就是，呃什么时候呢？就是在你去创建这个项目的时候，那许多文件呢？就被创建并且被提前预设好啊，预先配置好了啊， 所以呢，你，你将怎么样？你将不需要去修改他们啊？在这个课程当中你不需要去修改他们啊，然后 feel free， 那么就是随意去浏览这些 目录，然后呢？呃，别担心啊。什么别担心啊啊？如果你一点都不知道说这个代码是干啥的啊？如果你不知道这个， 如果你仍然 it， 如果你仍然不知道这些代码是干啥的，那也 don't worry 啊。别担心 好下边啊， place 啊， place holder data， 那什么占位数据？呃，那在这呢是，呃，当你去创建这个用户界面的时候，那这个占位数据是有用的 it helps 啊，它是有用的， 你去使用或者说你去拥有一些占位数据啊，怎么样呢？哎是有 用到啊是是这个意思啊啊？那如果呃数据库或者接口还没有， not yet 还没有，还不能使用 available 可用，对吧？还不可用的情况下，那 他当然是 helps 啊。好，那你可以怎么办啊？你可以 use place holder data 啊，使用这个占位数据，那这个占位数据可能是，呃 jason 的格式啊，那 也可能是呃 javascribe 的对象的这个形式啊 啊？或者呢？呃我们使用第三方的这个服 物啊，比如说啊 mock api 来模拟这个数据。呃在这个项目当中，那我们呢已经提供了一些。呃模拟数据或站位数据。在哪啊？在这个 play the holder data 这个里边 啊那呃这个数据里边呢？每一个 g s 对象啊，在这个文件当中，呃 represents 那是代表着一个表啊，代表着一个 table， 代表着你数据库当中的一个 table 啊，那举个例子，呃这个呢，就是我们的 invices table， 那就是我们它代表了数据库当中的那个发票表啊啊？当然他这是说，呃 javascribe abject 这个 abject 呢是呃广义的 abject 啊，你比如说他这说 invices， 那你说他是对象吗？啊？那他是一个数组，我们可以说数组就是对象啊，他这意思，所以，呃，所以说是 它代表着我们数据库当中的一个表啊，一个 table， 好，再往下，呃， in this chapter， 那就是在这一节啊， 呃，不是不是这意思啊，英姿 chapter， 那就是在这个章节，哪个章节呢？啊？这个建立数据库那个章节，你将使用这些数据去填充你的这个数据库啊， 就把这些数据库真实的写到你那个数据库里边去啊， populate it， 那填充它使用，呃，使用一些初始数据，另外啊， type script， type script， 呃，你可能也注意到了，那很多或者说大多数文件都有一个 t s 或者 t s x 的后缀 啊，那这个呢？是因为我们的这个项目，呃，是 is written 音是基于啊，或者说是用 t s 去写的啊。 啊，我们想，呃去创建一个这个课程，想通过创建这个课程来反映一个，呃，当代的 web 场景 啊，应用一个景象，嗯，其实直接翻译就是说，我们就是想让你，呃同学们知道说，呃，现在，嗯，实际的这个，这个 项目开发是一个什么样的状况啊？所以这个是 land space 啊，什么景象啊？这样 好。然后呢？呃， it's ok， 什么？ it's ok？ 如果你不会呃 typescribe， 那也是没有问题的。 然后呢？呃，我们将会提供这个 ts 代码片段， s snips 啊，当需要的时候啊，那就是当这个课程讲到一些部分的时候，他会提供啊，然后呢？ for now。 那么 当下，那咱们可以 take a look， 看一下哪个文件呢？看一下这个文件啊， definitions 啊，这个文件，那这里呢，我们手工的去定义了一些类型啊，那这这个呢？并且啊，或者说他将 被这些类型被返回啊？从哪返回？从数据库返回啊？嗯，这个其实我的理解是说当我们从数据库拿，嗯， 拿数据的时候啊，我们从这个从数据库拿数据拿出来数据应该有一个类型，那所以呢，我们去手工的定义了这些类型啊，是这样啊，然后 for example， 那这 这个 invises 发票这个表，那具有下边的这个类型啊，在这个文件当中这也是定义好了，那就是说我们从数据库读取发票信息的话，他会有这些内容，那么在这呢，我们手工的去呃定义了这个类型啊， 这不需要我们作为学习者定义啊，而是说这个项目模板当中已经定义好了，好再往下啊，那，呃，这他说的是，那通过使用 ts 呢？那我们可你可以去确保，呃， 嗯，没有什么，呃，不会发生什么意外啊，你不会意外的传递错误的数据格式给你的这个组件或者是数据库啊，你要 是有了这个 ts 的话，你就不会意外的啊，传错误的数据格式啊，错误的类型啊，给给组件或数据库啊，那比如说呢，你就不会错误的说把一个字符串 而不是数值传递给我们的这个发票 amount 这个属性， 因为 amont 肯定是金额嘛，那你应该是一个 number， 对不对？那那你要是给传了一个字符串，那这个肯定就是 这个叫什么？这个就是 accident 啊，就是这是一个事故啊，或者说这是一个意外，那么他这句话是说确保你不会发生这个意外，那就是说如果你使用了那个 ts， 你就不会说有这样的一一个意外啊，那其实更准 准确的说是你有了这么一个意外呢，那当时就报错啊，让我们提前的发现错误 啊，再往下啊，那如果你是一个 typescribe 的开发者啊，那我们呢？啊，我们这个虽然这个手工的去定义了这个数据类型， but 啊，那更好的这个安全什么类型啊？应该我们推荐使用这个 prisma。 这这这这一个啊，那这个可能当中没有去说这个 pricema， 在我之后的可能当中会介绍它啊，然后呢，这个 pricema 呢，它会自动的去生成 类型啊，基于你这个数据库的 schema， schema 也本身也是定义了一个结构啊，它会根据这个结构去 生成对应的 ts 类型，它是这个意思啊啊，然后呢，我们的耐克斯 gs， 那么也会呃去检测啊，如果是检测什么啊？如果你在项目当中使用了 ts， 并且安装了相应的必要的包 啊，以，而且呢进行了配置，那么呢，我们的 nice 这个项目啊，这个这个框架，他也会去这个这个进行一个检测啊，或者说检测到 呃 come with， 那么也会呃，使用 type script plugging， 呃，在你的这个编辑器当中去帮助你去自动完成啊编， 并且确保这个类型安全啊，这这句话我还真翻译的不是很好啊。 然后下边啊，下边呢，那就是执行啊，运行我们的这个服务啊，那这个服务呢？那首先执行 npmi 啊，那去安装这个项目的依赖啊，拍给这摘损啊， 这个一来包啊，好，执行完。然后呢？呃，再执行啊，呃，再遵循下边的这个命令，那就是 npm 专第一位去执，呃，开启我们的这个 开发服务器，或者说临时服务器， n p m r n， d， e， v。 啊，那么执行完 n p m r n， d， e， v 之后，那你就呃 snas 让你的这个启动起来了。在哪启动？ 在端口三千的位置，然后呢，让我们查看一下他是否工作了。那怎么查看？那就是在这打开啊，在浏览器当中打开这个地址，你就敲呗。啊， 好，然后呢，那你的这个主页应该，呃 should look like， 像这样啊，你的主页应该像这样，那就是这个样子啊，其实这个样子因为他下边有一个箭头你看不见啊，所以我在 ppt 演示的时候我摁了 f 十二。啊， 好， ok 啊，那这样就就完成了啊，啊，那你已经完成了这个第一章，然后呢？ congratulations， 恭喜啊，你已经创建了一个啊 next j s 的， 呃，项目啊，当然是用呃这个像模板去创建的，并且把它这个跑了起来。啊，好好，那本节视频呢，我们就到这里，那如果你觉得这节视频对你有帮助的话，那欢迎给我留言点赞。

为什么 next js 在国外那么火？国外很多网站都在使用它，比如拆 gpd 的 pc 端，我认为就是这七点。一、服务器渲染和静态声称 next js 提供了服务器渲染 s s r 和静态生成 s s g。 的能力，这意味着您可以创建具有出色性能和搜索引擎优化的网站。 s s r 可以在服务器上动态生成页面内容，而 s s g 则可以在构建时生成静态 atm 文件，提供快速加载速度。 二、 v x 集成 next j s 是建立在 v x 框架之上的，这使得它非常适合 v x 开发者。它提供了一组有用的工具和功能，可以简化 v x 应用的开发和部署。 三、路由系统 next g s 具有强大而直观的路由系统，使得在应用中管理和导航页面变得非常容易。它支持动态路由，让您能够轻松地处理带有动态参数的 u r l。 四、自动代码拆分 next g s 会自动将页面拆分 分为较小的代码快，从而减小初始加载时的包大小。这有助于提高页面加载性能并改善用户体验。五、社区和生态系统 nex g s 拥有庞大的活跃社区，因此您可以轻松找到文档、视力插件和解决方案。这个生态系统的健康和活跃度也有助于推动 nex g s 的发展和创新。 六、部署和扩展性 next j s 可以部署到各种托管服务，包括 for soil， netfi， a w s， google club 等等。这种灵活性使得开发人员能够轻松地将应用程序部署到各种环境中，并根据需要进行扩展。 七、支持 type sweep next j s 对 type sweep 提供了很好的支持，这使得它成为选择 type sweep 的开发团队的强大工具。

姐妹听说过韩语忘分吗？有这么一个团体，每次回归必碰大物 tomorrow by together t x t 第一次回归 x g 完整的 twins 搜索一技绝全海爷 solo 第二次回归 oh my god 再加上两首呢 i 用 sugar 合作这边磨鞋 candy 第三次回归，谁与谁倒霉的 blackpink n c t u seventeen 一次次回归 n c t g 正规衣装回归 exper next level b t s butter 第五次回归 straight case 姻缘爸爸第六次回归 seven tee 自家对大这次回归太阳经理合作 ip 还王健尔合作哦，就是说他们是有点悬悬在身上的。

hello， 大家好，今天我们来讲一下，在内饰 gs 项目中，你可能不需要使用 used date， 甚至说在某些场景下面，我们根本就不应该使用 used date。 我们来看这样一个页面， 这是一个电商的产品页面呢，这卖衣服的， 我们把它代码展示出来，它这衣服我们可以选择颜色。呃，它的尺码。 好，现在是一个静态的布置啊，我们点击没有任何反应的，我们先使用 used 的来让他就是变成动态的啊。使用 used 的时候呢，我们这个页面 就是就要就是变成那个客户端酒店的，我们把这个变量改成 user 的，我们保存看一下。哦， 没有问题。然后我们将这个点击的时候改变一下这个值啊，好，点击这个颜色的时候呢，这个按钮上有个 unclick， 然后这个尺码上面也是个按钮，也有个 on click， 好，保存看一下。现在点击这个选择颜色时候他有变化，好，现在这样的话就有一个问题啊，当我们选择 蓝色是吧？我们想要把这件衣服呃，分享给我的那个某个好友，让他帮我参考一下这个衣服我穿起来怎么样啊？我会把这个链接复制给他，复制给他的时候，他那边进行访问的时候呢， 哎，他会反应到黑色这里啊，因为这个只是默认是黑色，因为这个状态丢失了，他只保存在我这边呢，保存在客户端呢， 所以这就很尴尬呀，啊，甚至说啊，我们可以想法把这个衣服啊给收藏起来， 我们下次再买，我们下次看的时候，你下次一刷新，他的衣服又变成了原来的样子，所以他没办法保存。你对某个商品选择了他一些那个变体的 时候呢，他状态会丢失，所以这时候不能使用。又时代的，我们使用浏览器有一个自带那个浏览器上面是可以保存状态的，就是用这个地址传参数啊，这种 很多网站都是这么做的，比如说我们打开百度啊，我们搜索 react， 那，那我们刷新这个页面的话，他还是 react， 对不对？他并不会说刷新时候这个页面就变成了这个百度的首页啊，或者说是某个默认值肯定是不对的， 所以这时候这时候我们就要用浏览器那个地址栏这个参数啊， 这里面，呃， rag 为我们提供了一个 hope 叫 huge search programs， 从这个 next 的 get in 这个包里面来，那这样的话我们就把这个 used 给去掉啊， 同时我们还要引入一个 link 标签呢， from next link， 我们把这个 use search problems 放到这来，把这个给删掉， 这是一个 hop 啊，下面这个注视，打开 它这个后口有一个就是 such palms， 有个 get 啊 get， 我们把颜色就取，就存到颜色里面去啊，如果他没有设置，我们就用黑色啊，然后尺码的话，我们为他选择一个 size， ok， 默认的设置好了。 好，我们对下面这个也要稍微改造一下，这个 button， 我们就使用这个另一个标签来啊， 那 unclear 的话，我们就改成那个 herriff， 我们用一个这个，然后问号写个 color 卡了，等于一个，等于当前这个循环里面一个卡了，然后按的一个，按的一个 size 啊， size， 这个时候我们要等于一个 is selected size size， 就保持它已经选好了 size， 我们把这个复制下来，下面这个这个八点一样的，我们要换成另一个标签，加一个 curve， 把它卡了，换成 lake， 卡了筛子，就让他使用这个筛子，他保证好，你放大看一下， 我们点进去就可以看到啊，蓝色尺码，我们注意这个浏览器这个地址栏呢，我们对这个页面进行刷新看一下啊，刷新也没有问题啊，我们复制这个链接啊，在新窗口中打开啊， 一样的，他也会定位到这里啊，就是因为他取了这个参数，我们把这个客户的 user 给去掉，会怎么样？这个时候不行的， 因为我们这里使用了这个 use such parames， 这是个 hook 啊，当我们使用了 hook 时候，我们就要使用客户端组电脑，所以这种用法 是在客户端的时候组建的时候，我们用这个 user search parames 就可以做到。当我们想要在服务端组件里面就是生物恐怖的时候，能不能做这个样的效果呢？一样的，可以啊，我们把这个 use colombia 给删掉，把这个 use search parames 也给删掉， 它这个 next g s 它服装怎样？嗯，这个函数，这里它有一个参数啊，我们从这里可以结构一个，就是 search params， 我们从这里结构出来， 因为我这里使用 ts 的话，你写一下吧，他说不存在，这个是存在的。好，我们就用这个， 他这个设计 party， 他这个就不是 get 了，他直接就能取到，这不就点他了，点一个，下一次保存看一下， 我们放大看一下，我们刷新的一样的，这是我们这个页面，我根本没有抓加这个 userclan 的，他是一个 seoul component 的，我们同样能达到这样效果 啊，现在这里有一个致命的问题，就这个地方我们不要用这种就是柱状拼接啊， 因为他没有办法过滤一些活法的参数啊，所以我们要用那个 ull 那个摁扣的一下啊，那就是怎么做呢？我们直接把这个 提取走，嗯，这里用一个变量，然后扭一个 url search parames， 下面传一个对象，把刚才那个这个 color 就是 color 啊， size 的话让他等于那个 selected size， 把它复制下来，下面同样的 color， but then select your color size to 使用这两种 size 好吃 一样的， ok 啊，为什么要这么做呢？不这么做的话，因为用户是可以对这个浏览器这个地址栏里面就是还是可以随便写一些嗯，乱七八糟的东西啊，就是有一些不合法的那个输入啊，所以我们要想用这个对他进行 过滤一下啊，对，大概就是这样了啊，好了，今天的分享就到这里啊，关注我，教你更多 nice 学习知识。