Next.js
如何在Vitest中对next/navigation进行模拟？
我正在努力寻找一个通用解决方案，以便在Next.js中用Vitest对导航进行模拟。 next-router-mock 提到“在Next.js v13、v12、v11和 v10上进行了测试。”因此我不确定是否能在Next 14中使用它。此外，README中并未提及Vitest。 我找到的唯一可行解决方案是： vi.mock('next/navigation', async () => { const actual = await vi.importActual('@/__mocks__/next/navi
Next.js 16的 App Router、PWA与 Supabase SSR：移动端/作为PWA时无限加载（很可能是手动的Service Worker缓存了RSC/Flight）
应用地址： https://pharmagoli-loyalty.vercel.app/ 背景 我在Vercel上使用Supabase Auth/RLS的 Next.js 16（App Router）+ React + TypeScript应用。桌面浏览器基本没问题（没有控制台错误），但在移动端（尤其是已安装的PWA）我经常遇到无限加载/空白屏幕。有时登录页在多次刷新后才出现；有时提交凭据也无效。 我没有使用 next-pwa，因为Next.js 16 Turbopack + next-pwa（webpa
Next.js页面上的动态权限策略
在Next.js中通过middleware.ts设置Permissions-Policy头。 我为页面A 返回一个权限策略X，然后通过Next Link导航到页面B，页面B 拥有权限策略Y。 我在对页面B 的内部Next JSON props请求中看到返回了权限策略Y。 页面B 仍在使用权限策略A。 如果我完全重新加载页面B，它会按预期发送权限策略Y，此时浏览器也会正确使用它。 如何在不同页面之间动态更改Next.js的权限策略？ 我能找到的唯一解决方案是使用带整页加载的锚点标签，这样并不好。 解决方案
Tailwind CSS v4的任意值类（方括号 []）在Next.js 16与 Turbopack下未渲染
我正在使用最新的 Next.js 16.1.6、Tailwind CSS v4.2.1 和 React 19。在使用Turbopack (next dev --turbo) 启动开发服务器时，像 aspect-[12/5]、z-[100] 或 h-[80vh] 这样的任意值类在HTML DOM中虽然正确存在，但相应的CSS规则并未通过JIT引擎生成。 当这些类用于导入了大型第三方库（如 Swiper.js）的组件时，这种情况似乎更容易发生。 这是Tailwind v4的 Turbopack扫描器的已知问题
使用Next.js App Router的 @supabase/ssr：通过魔法链接登录后，地图标记会消失
我正在用 @supabase/ssr 构建一个基于 Next.js 15 App Router 的应用，用于身份认证。该应用在地图上显示带地理参考的报告。 对 匿名用户 来说，一切都正常——报告如期加载。然而，用户通过 魔术链接（邮箱中的一次性验证码） 登录后，在完成登录后的重定向后，地图上的报告消失。 在Supabase的 Discord社区里，有用户建议在SSR环境中使用一个 模块级Supabase单例 可能会带来问题。我正在尝试找出根本原因以及修复的正确模式。 认证流程 用户请求魔术链接： sign
Next.js自动将带有语言代码的遗留URL（如以“-es”结尾的URL）重定向到核心页面，并通过i18next实现自动翻译
我们在Next.js中结合 i18next，对一个带有EN/ES双语的应用进行了重构。它可以工作，但需要支持遗留应用中启用西语的URL，例如 /page1-es、/page2-es，使其能重定向到新应用的 /page1 和 page2，并在组件内实现自动的 i18next 翻译。 由于在重定向时无法传递自定义数据（URL也不显示任何参数），我当前的代码是：在Next.js的 not-found.tsx 中指定对相应新页面的重定向，同时设置一个 sessionStorage 属性，稍后可以从拥有 i18ne
解决未升级到next-i18next时因Layout.tsx导致的在切换语言时出现的react-i18next hydration错误
在语言切换之间刷新或重定向到页面时，我遇到了一个 react-i18next 水合错误。 水合失败，因为服务器渲染的文本与客户端不匹配。 因此，这个树结构将在客户端重新生成。若使用了SSR的客户端组件： 然而，将其升级到 next-18next 的 推荐解决方案 对我不起作用。它需要 appWithTranslation(App) 的封装，我们由于 layout.tsx 的做法而无法提供。 据Google指出： appWithTranslation HOC与 App Router的 layout.tsx不
在Next.js 15的 App Router中，当用户离开某个页面时，如何显示模态框或弹出窗口？
我正在用Next.js 15（App Router）构建一个发布平台，我有一个在发表文章后用户会到达的分享页（/share/[id]）。当用户离开该页前往平台上的任意其他页面时，我想显示一个推广弹窗（自定义模态框，而不是浏览器原生的beforeunload对话框）。 问题在于，我还没搞清楚在App Router中检测“离开页面”的正确方法。 我试过的办法： 把模态框渲染在分享页内部，但在导航发生时组件会立刻卸载，因此模态框在用户看到它之前就被销毁了。 beforeunload 事件，这个只在用户关闭标签页
服务器错误TypeError：无法读取未定义对象的属性（读取 'replace'） Next.js
我遇到了这个错误，但我真的不知道从哪里开始调试。有人能帮我吗？ 我的系统起初工作正常。我想把一个用户包裹到cookie令牌中，使用户变成Premium，但失败了。 能否指点我如何调试并检查错误出在哪儿？我尝试移除中间件，结果一切又恢复正常。 错误截图 my middleware.ts const handleI18nRouting = createMiddleware(routing); function detectLocale(req: NextRequest) { const country = r
在我的Next.js应用的App Router中，当在动态路由段之间导航时，为什么路由变化时useEffect不会执行？
我正在用Next.js 14搭建一个应用，并使用App Router。我有一个动态路由 /products/[id]，并且在使用 useEffect，把 params.id 作为依赖，在用户切换到不同的产品时获取数据。 问题： 当我从 "/products/1" 使用 导航到 "/products/2" 时，useEffect 不会重新运行。组件不会因新产品数据而重新渲染——页面仍然显示旧的产品。 app/products/[id]/page.tsx: 'use client'; impor
汇集全球数千款 AI 工具，每日持续更新，配套 AI 开发学习资源，轻松用 AI 提升工作效率。快捷键 Ctrl+D/⌘+D 一键收藏本站。