Next.js是服务器呈现的React应用程序的简约框架。
Next.js 14 App Router - 将数据从客户端组件传递到服务器组件
我有一个 next.js 项目，我在其中使用 App Router，其中包含 page.tsx 文件。它有API从数据库获取数据。 现在我有一个在此页面上使用的客户端组件，其中有
这是一个关于从远程对象存储提供图像的最佳实践的推测性问题。 根据 Next.js 文档，应该将远程数据加载到服务器
我正在学习 NextJs 和 React。 我发现了 React 的一个有趣的行为。 每当我单击“单击我”按钮时，它就会更改测试状态。 然后是一些完全不相关的代码...
我正在尝试使用 Next.js 拦截路由功能。它在开发模式下本地运行良好。生产模式下路由不会被拦截。该应用程序部署在 Vercel 上，并且有一些服务器呃...
Next.Js 13.4：共享或使用其他工具时不显示动态元数据
在我发布的网站中，当我转到动态路线页面并在社交媒体中共享该网站或只是使用“https://metatags.io/”在工具中检查我的 SEO 时，它不会显示，但是当我去时.. .
我想在客户端组件中使用服务器组件。 当我在父组件中使用客户端时，所有子组件都转换为客户端组件，我想在父客户端组件中渲染服务器组件...
我喜欢以 OOP 方式构建服务，并通过类来保持相关的交互。 我希望将我的整个类及其方法用作服务器操作，以便在
我要解决的问题：有一个公共部分需要ssr进行seo。但也有一个应用程序不需要 seo，而它是 spa。 我对 next js 没有经验。 ...
我正在 NextJS 的一个项目中工作，我发现了一个有趣的问题，我似乎找不到解决方案 - 我有一系列从 Civic GAPI 获取的对象。 在这个数组中，大多数...
如何使用 NextJS 14 使用服务器将文件上传到外部 API
[注意]：我需要使用服务器页面，否则我会在 axios 中使用“客户端”组件。 我正在尝试将文件上传到我的外部快递服务器。无论如何，当
部署到 Firebase 托管的 Next.js 站点刷新时路由重置为主页
我使用 Next.js 和 Tailwind CSS 创建了一个静态网站，其中包含多个页面，包括主页、服务和联系方式。每条路线都会正确导航到其各自的页面。一切正常...
在我的 Next.js 项目中，当用户选择阿拉伯语时，我遇到了问题。虽然翻译工作正常并且文本被正确翻译成阿拉伯语，但布局不......
我正在使用 useSWR 从服务器获取更新。 const {data, error} = useSWR('url', url => fetch(url).then(r => r.json()), { 刷新间隔: 1000 }) 服务器返回： { “价值观&qu...
拒绝构建“https://accounts.google.com/”，因为祖先违反了内容安全策略指令“frame-ancestors https://drive.google.com”
Nextjs 客户端从后端接收驱动器共享 URL，我必须将它们显示为嵌入在 nextjs clinet 的 iframe 中。 这是实现的代码 if (file.includes("drive.google.com")) { ...
使用服务器和客户端组件在 Next JS 应用程序路由器中转发查询参数
我正在构建下一个js应用程序，对于我的网站，查询参数很重要，它们需要在页面之间来回转发。以下是场景 - 用户通过
我正在尝试从以下位置检索当前哈希（#about、#home、#blog）或完整路径（http://localhost:3000/#about、http://localhost:3000/#home）路由器。我正在使用 Next.js 版本 14.0.3
下一步身份验证，猫鼬模型问题 - TypeError：无法读取未定义的属性（读取“用户”）
我正在努力使用带有凭据的 Next auth，但每当我导入 UserModel 时，我总是遇到 TypeError: Cannot readproperties of undefined (reading 'User') 问题。这是我的授权/[...
Nextjs - 除了 nextjs 中间件之外还实现 next-auth 中间件
我需要 nextjs 中间件来运行两个不同的路径： 首先，防止使用 next-auth 实现未经授权的访问。 其次，从某个页面重定向授权用户...
将滚动事件从子<div>传递到<canvas>（Excalidraw）
在我当前的项目中，我使用 Excalidraw，并在 之上绘制 的顶层。一切都很好，但是，当涉及到滚动无限画布时...... 在我当前的项目中，我使用 Excalidraw，并在 <div> 之上绘制 <canvas> 的顶层。这一切都工作正常，但是，当涉及到滚动无限画布时，如果鼠标位于其中一个 <div> 的顶部，滚动事件将不会传递到下面的画布，因此这些 <div>让用户体验变得相当笨拙。 有没有办法让这些 <div> 对滚动事件不做出反应？我在 CSS 中尝试过类似 pointer-events: none 的方法，它可以工作，但是 <div> 根本不会对任何东西做出反应。 这是一个带有示例的 CodeSandbox，可以通过以下代码块进行总结： "use client"; import { useMemo } from "react"; import dynamic from "next/dynamic"; const Excalidraw = dynamic( async () => { const mod = await import("@excalidraw/excalidraw"); return mod.Excalidraw; }, { ssr: false }, ) export default function Home() { const Excal = useMemo(() => <Excalidraw gridModeEnabled />, []) return ( <main className="absolute w-screen h-screen"> <div style={{ position: "fixed", zIndex: 100, top: "100px", left: "100px", backgroundColor: "yellow", cursor: "pointer", }} > <p>here</p> </div> {Excal} </main> ) } 嗯，我不知道如何编辑沙箱中的代码，但我已经在 Chrome DevTools 中成功编辑了它，因此您可以在源代码中应用相同的解决方案。 基本上你必须拦截滚轮事件并手动将其分派到画布。 我已为黄色框分配了一个 ID (my123)，以便能够在我的 javascript 代码中引用它。 我还创建了一个变量来从我们的事件处理程序指向画布： myCanvas = $('.excalidraw__canvas.interactive') 然后 $('#my123').onmousewheel = function(e) { e.preventDefault(); myCanvas.dispatchEvent(new WheelEvent('wheel', { bubbles: e.bubbles, cancelable: e.cancelable, ctrlKey: e.ctrlKey, shiftKey: e.shiftKey, deltaX: e.deltaX, deltaY: e.deltaY, deltaMode: e.deltaMode })); } 传递 ctrlKey 和 shiftKey 属性也允许缩放和水平滚动。 请务必在创建画布后附加事件处理程序。
如何根据客户端组件状态有条件地渲染服务器组件？ 有问题的组件 父服务器组件获取 子客户端组件Button 子服务器组件 AverageS...