上篇文章分享了，路由中间件 - 捕获异常，这篇文章咱们分享：路由中间件 - Jaeger 链路追踪。 啥是链路追踪？...我理解链路追踪其实是为微服务架构提供服务的，当一个请求中，请求了多个服务单元，如果请求出现了错误或异常，很难去定位是哪个服务出了问题，这时就需要链路追踪。 咱们先看一张图： ?...Span 有哪些可以调用的 API ？ 见下图： ?...（sampler.type=remote） 这个是默认配置，可以通过配置从 Agent 中获取采样率的动态设置。...源码地址 https://github.com/xinliangnote/go-gin-api
上篇文章分享了，路由中间件 - Jaeger 链路追踪（理论篇）。 这篇文章咱们分享：路由中间件 - Jaeger 链路追踪（实战篇）。...API 调用了 5 个服务，其中 4 个 gRPC 服务，1 个 HTTP 服务，服务与服务之间又相互调用： Speak 服务，又调用了 Listen 服务 和 Sing 服务。...咱们要实现的就是查看 API 调用的链路。 关于一些理论的东西，大家可以去看看上篇文章或查阅一些资料，这篇文章就是实现怎么用。 OK，开整。...服务 cd go-gin-api && go run main.go 访问路由 http://127.0.0.1:9999/jaeger_test 效果 ?...API 源码地址 https://github.com/xinliangnote/go-gin-api Service 源码地址 https://github.com/xinliangnote/go-jaeger-demo
Next.js 路由（App Router） 在此路由中，有一个名为 getData 的函数，它向 GitHub API 发出异步请求并返回响应，然后可以使用 getData 函数提取该响应并将其提供给路由或页面...; Next.js 路由（Page Router） 在此路由中，有一个名为 getServerSideProps 的函数，它向 GitHub API 发出异步请求，并通过 data prop 将响应返回给路由或页面...default Page; Gatsby 路由 在此路由中，有一个名为 getServerData 的函数，它向 GitHub API 发出异步请求，并通过 data prop 将响应返回给路由或页面...在此路由中，从 Astro 的特殊“frontmatter”围栏 中向 GitHub API 发出异步请求。...一方面，在需要数据的组件中获取和访问数据很方便；但另一方面，如果你有几个组件都在同一路由上独立获取数据，这会对性能产生负面影响吗？
路由中的每个路径都有一个专门的目录，其中有一个page.js文件，作为Next.js 13的内容入口点。 路由方面的差异 由于采用了新的结构，我们现在可以在每个路径目录中包含额外的文件。...3.异步组件和数据获取 此外，Next.js 13引入了async组件，这是一种用于服务器渲染组件的数据收集的全新方法。...} 函数 getServerSideProps(){ // 从外部API获取数据 constres =await fetch(https://......总结 最近推出的Next.js 13带来了很多新功能和升级，如新路由、新的数据获取方式（React suspense）、Vercel字体、og图片生成、布局等[2]。...Next.js 13还具有其他新功能和升级，如文件基础路由的应用/目录[3]、React服务器组件、异步组件数据获取、流式传输、Turbopack等[3]。
之前讲过 next.js 中的 getServerSideProps，今天来讲一讲另一个很类似的 API：getStaticProps，以及和 getStaticProps 紧密相关的 getStaticPaths...json 文件获取数据进行渲染。...使用 getStaticPaths getStaticPaths 主要用于动态路由中的静态页面构建，简单说就是将一个动态路由通过 getStaticPaths 转换为多个静态页面。...，通过 getStaticPaths 我们可以定义该动态路由的匹配的路由值，通过 paths[number] 中的 params 参数和动态路由中的参数进行匹配。...调用 next build 命令，next.js 会进行页面数据的收集，检测到动态路由时会尝试调用 getStaticPaths 并获取其返回值。
可选的 App 目录用于基于文件的路由 Next.js 最佳特性之一就是基于文件的路由。它可以使用项目目录结构来指定路由，而不是在诸如 react-router 之类的程序中处理复杂的路由设置。...Next.js 13 通过新目录更新了文件路由。可选的 app 目录引入了新的布局结构以及一些新功能和改进。 由于新的路由机制，目录结构发生了微小的变化。...路由中的每个路径都有一个包含 page.js 文件的专用目录，这个 page.js 文件是 Next.js 13 中的内容入口点。...异步组件和数据获取 此外，Next.js 13 引入了异步组件，这是一种为服务器端渲染的组件收集数据的新方案。...点击底部阅读原文访问 InfoQ 官网，获取更多精彩内容！
/pages/index.tsx 文件 初始的目录结构如下： . ├── pages // 采用约定式路由（文件系统路由） │ ├── _app.tsx │ ├── api // API 目录.../pages 目录，Next.js 会自动识别并将对应文件注册的路由上 4.1 索引路由 Next.js 会自动将文件夹内的 “index” 文件注册为文件夹的主页 / 4.2 嵌套路由 Next.js...// parmas 即路由中的参数对象 const article = getContentById(parmas.id); return { props: {.../pages/api/hello.ts 文件，就是一个 API 页面，他的路由和页面路由相同 import type { NextApiRequest, NextApiResponse } from '...拓展更多 Next.js 还有更多细节和 API，需要深入了解的小伙伴可以参阅：Next.js API文档[18] 除了 Next.js，还有 Razzle.js[19] 也可以学习下。
为了让你的Next.js应用更好地被搜索引擎发现，Next.js引入了一个非常实用的功能——元数据API。...如果同一路由的多个位置有元数据，它们会被合并，但页面元数据会替换布局元数据（如果它们有相同的属性）。...而Next.js提供的元数据API，让这一切变得简单而直接。 二、Navigation：使用 Link 组件进行导航 在构建一个动态且互动性强的网站时，页面间的导航是不可或缺的一环。...Link 组件是 Next.js 中用于实现路由跳转的主要方式，它基于 HTML 的 元素进行了扩展，使得在 Next.js 应用中的路由之间进行导航变得非常简便。...嵌套路由中的错误处理 通过在嵌套的文件夹结构中不同级别放置 error.tsx 文件，你可以实现更细粒度的错误处理。
不同的是，根据依赖的前端框架的不同，生成的路由配置和实现不同：api 路由：Next.js：在 9.x 版本之后添加了此功能的支持，在 pages/api/ 文件夹下（为什么放在pages文件夹下有设计上的历史包袱...）的文件会作为 api 生效，不会进入 React 前端路由中。...命名规则相同，pages/api/article/[id].js -> /api/article/123。其文件导出模块与页面路由导出不同，但不是重点。...同时渲染数据的请求由于和路由组件联系紧密也都没有分离到另外的文件，不论是 Next.js 的路由文件同时导出各种数据获取函数还是 Nuxt.js 的在组件上直接增加 Vue options 之外的配置或函数...的中间件会对同级及下级路由产生影响，由中间件来决定影响范围，是两种完全相反的控制思路。
表单和数据变更 Next.js 9 引入了 API Routes，这是一种快速构建后端端点的方法，可以与前端代码一起使用。...= await createItem(data); res.status(200).json({ id }); } 然后，在客户端，可以使用 React 和 onSubmit 等事件处理程序来获取...API 路由： import { FormEvent } from 'react'; export default function Page() { async function onSubmit...此外，可以组合和重用不同的操作，包括在同一个路由中使用多个不同的操作。 缓存、重新验证、重定向等 服务端操作深度集成到整个 App Router 模型中。...使用redirect()重定向到不同的路由。
二、特性介绍 Next.js 具有以下几点特性： 默认支持服务端渲染 自动根据页面进行代码分割 简洁的客户端路由方案（基于页面） 基于 Webpack 的开发环境，支持热模块替换 可以跟 Express...四、路由 Next.js 没有路由配置文件，路由的规则跟 PHP 有点像。只要在 pages 文件夹下创建的文件，都会默认生成以文件名命名的路由。...app.getRequestHandler() app .prepare() .then(() => { const server = express() // 处理localhost:3000/p/12345路由的代码...如果需要获取 url 带过来的参数，可以从context.query里面取。...八、组件懒加载 Next.js 默认按照页面路由来分包加载。如果希望对一些特别大的组件做按需加载时，可以使用框架提供的next/dynamic工具函数。
相比于原本的 React，Next.js 提供了静态生成、服务端渲染等特性，同时自带前端路由，我们这次就主要用到 Next.js 的静态生成功能。...在 Next.js 中，pages 目录下，除了 api 文件夹下的内容和 _app.js，其他每个 js 文件导出的 React 组件都对应着一个或者一种页面，并且由 Next.js 直接生成对应的路由.../pages 的相对地址就是 Next.js 为其自动生成的路由。...getStaticProps 函数暂时不用管，而 param.id 就是在路由中匹配到的 id，可以借助它，执行获取对应文章内容的逻辑。...修改往 api.js 中添加获取所有文章 id 的函数： export const getAllPostId = async () => { let posts = (await Article.where
Next.js 虽然 Next.js 总被人称为 框架，其实 Next.js 还提供了很多功能，比如官网列出来的这些： 所以说，Next.js 更像是一个框架，包含了路由、优化、等一系列功能。...路由 Next.js 也提供了路由系统，采用名字约定路由 pages/index.js 对应 / pages/xxx/first.js 对应 /xxx/first 使用 Link 组件来做路由跳转 function...API 除了正常写页面外，有时候我们还需要提供 API 接口，可以在 pages/api 下添加文件，文件名则为 API 名。...API 代码将不会在 client side 的 bundle 里。 部署 部署这一块 Next.js 推荐使用 Vercel 来部署。...总结 稍微总结一下，Next.js 提供的有如下功能： Link 组件，方便路由 Image 组件，优化图片加载 文件路径生成路由机制，动态路由使用 [id].js 这样的命令 SSG 的同构开发模式（
（文件规范、API）：多页面的基础 页面级预渲染、代码拆分：顺理成章 增量静态生成：针对大量页面的编译时预渲染（即静态生成）策略 按路由预加载：锦上添花 国际化（结合路由）：锦上添花 集成 Serverless...Next.js 提供了两种路由支持，静态路由与动态路由 静态路由 静态路由通过文件规范来约定，pages目录下的js文件都认为是路由（每个静态路由对应一个页面文件），例如： pages/index.js...最简单，同时性能也最优的预渲染方式就是静态生成（SSG），把组件渲染工作完全前移到编译时： （编译时）获取数据 （编译时）渲染组件，生成 HTML 将生成的 HTML 静态资源托管到 Web 服务器或...data from the file system, API, DB, etc....，Next.js 探索出了别致的路由支持和精巧的 SSG、SSR 支持。
基于页面的路由系统：简洁直观，路由基于文件系统，使得新增页面和管理页面路由变得容易。内置数据获取功能：方便在服务器端获取数据并传递给组件进行渲染。...二、Next.js项目结构与基本操作（一）项目结构pages目录这是Next.js项目的核心目录，用于定义应用的页面。每个文件对应一个单独的路由。...通过React Router的“useParams”钩子或者Next.js自己提供的获取动态参数的方法，来根据不同的“id”渲染不同的用户信息。...在组件中使用“useTranslation”钩子来获取并切换语言。（二）API路由在“pages/api”目录下可以创建自定义的API路由。...路由来获取数据。
Next.js提供的附加功能能够让你构建生产就绪的应用程序，这些功能包括路由、优化渲染、数据获取、打包、编译等等。...API路由：Next.js允许你在同一个项目中创建API路由，这意味着你可以构建前后端紧密集成的应用程序，无需担心跨域请求或配置复杂的后端服务。...数据获取：Next.js提供了静态生成和服务端渲染的数据获取方法，如getStaticProps和getServerSideProps，让数据管理变得简单高效。...API路由：Next.js允许你在应用程序内创建API端点，这样你就可以在同一个代码库中构建前端和后端，简化了开发流程并提高了项目的一致性。...通过简单地在文件夹名称前加上下划线_，你可以轻松地创建私有文件夹，这些文件夹及其所有子文件夹都会被Next.js的路由系统自动忽略。
API 路由非常吸引我，因为它们无需额外的基础设施配置就能提供无服务器函数，这对于像营销网站的“联系我们”表单这样的功能来说非常便利。...getServerSideProps允许我在页面加载前在服务器端运行基础函数。 这些概念不仅功能强大，而且操作起来也十分简单。 API 路由与其他路由处理程序在外观和运作方式上都很相似。...Next.js 作为一个既能静态也能动态渲染的框架，它巧妙地将工作划分为多个路由段。尽管直接暴露请求 / 响应对象能带来极大的灵活性，但这些对象本质上具有 动态性，它们会影响整个路由的处理。...因此，我们采取了另一种策略，即暴露 Web 请求 API 中的特定方法，并针对不同的使用场景进行了统一和优化：这些 API 覆盖了组件、服务器操作、路由处理程序和中间件等场景。...通过这些 API，开发者可以明确选择框架的启发式方法，如动态渲染，同时也让 Next.js 更容易追踪使用情况，分解工作并尽可能优化性能。
App Router: 更强大的路由系统Next.js 14采用了新的App Router，提供了更灵活和直观的路由方式：app/ page.js // 对应路由 / about...Server Actions: 无需API路由的表单处理Next.js 14引入了Server Actions，允许我们直接在服务器上处理表单提交，无需单独的API路由：// app/form.jsexport...14服务器组件如何与Supabase无缝集成，直接在服务器端获取数据并渲染。...代码量减少：得益于Next.js 14的服务器组件和Supabase的简洁API，代码量可以减少40%-60%。...维护简化：单一语言（TypeScript）贯穿全栈，加上Next.js的文件约定和Supabase的声明式API，大大减少了维护的复杂度。
与之相反，Next.js 完全依赖于 Node.js，所以他们在边缘部署的能力在如今会受到诸多限制。 当然，Remix 在这一领域的也不能说是全知全能，提升开发者开发体验的路任重而道远。...一般来说下，我们是通过管理表单状态来获取发布内容的，从添加一个发布用的 API 路由，到手动跟踪加载和错误状态、重新验证数据状态和其在整个 UI 中的传播变化，最后处理错误、中断和争用条件（不过说老实话...Remix 和 HTML 表单的作用差不多，不过用首字母大写的标签和一个 action 路由函数进行优化（如果说 Next.js 的页面也用自己的 API 路由……）。...这也是为什么 Remix 的打包比 Next.js 要小近 30%，毕竟 Remix 不需要用所有的代码来和那个“API 路由”对话。...用 Next.js，将意味着开发者必须向服务器发送自己的数据突变代码，才可以和 API 路由进行互动，并将更新传播到 UI 的其他部分。
# 为什么选择 Next.js？...的 build 命令生成的可以应用于生产环境的应用程序文件 public：包含应用程序的静态资源，如图像、字体等 src/pages 所有在此定义的页面都可以在相应的路由处使用 通过基于文件的路由机制实现...# 提交前检查 对于 TypeScript、ESLint 和 Prettier 这样的静态代码分析工具是很好的，我们已经配置好它们，并且可以在进行更改时运行单个脚本，以确保一切都处于最佳状态。...将在基于文件的路由中查找页面的位置 providers：包含应用程序的所有上下文 provider 如果我们的应用程序使用许多不同的 provider 来进行样式、状态等操作，可以在此处将它们组合起来...api：包含与特定功能相关的 API 请求声明和 API 钩子，这样能将 API 层和 UI 层分开，并可重用 components：包含与特定功能相关的组件 types：包含与特定功能相关的类型定义
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
