<title>, <meta>, <link>）被渲染在 <body> 中而不是 <head> 中。 社区中对这个改动意见很大，但是官方暂时没有修复的打算。
影响范围
- Lighthouse SEO 评分：直接检测失败，因为 Lighthouse 明确检查
<head>中的元数据 - Google Search Console：报告 "Duplicate without user-selected canonical" 错误
- 搜索引擎爬虫：可能无法正确识别页面元数据
- 社交媒体分享：Open Graph 标签可能无法正常工作
临时解决方法：
在 next.config.ts 中添加以下配置：
const nextCOnfig= { // 强制所有用户代理接收阻塞式元数据 htmlLimitedBots: /.*/, // 这个正则表达式匹配所有用户代理 // 其他配置... }; - 或者可以针对特定爬虫进行配置：
/googlebot|bingbot|baiduspider/
相关讨论在： https://github.com/vercel/next.js/issues/79313#issuecomment-2892288965
官方文档相关说明： https://nextjs.org/docs/app/api-reference/functions/generate-metadata#streaming-metadata
--
实际案例
在我的佛经项目中，添加此配置后：
- Lighthouse SEO 评分从 80+ 提升到 100
- Google Search Console 中的重复规范错误消失
PS. 分享一个 Lighthouse 全满分的小彩蛋
PS 2. 最近用 Next.js 在做一个 AI 阅读佛经的网站，欢迎大家体验：
]]>nextjs13 的时候也去学习过，好像也没这么慢，现在 app router 模式咋这么慢，有啥建议不，感觉开发体验好差。谢谢。 ]]>
问了 DeepSeek ，Google 也查了查，都没找到能获取实际加载进度的解决方案。
]]>来了 V 站，见过吐槽 Next.js 的观点有以下几个：
1. 服务端组件不能用 hooks
这是最令我奇怪的一个点，服务端能用 hooks 还得了，是想让服务端有副作用吗。
这里贴一句 V 站之前看到的评论：“在客户端渲染时，一般通过 useEffect 来获取数据。而在服务端渲染时，我们无法使用 useEffect，这使得在服务端请求数据（以及其他异步操作）成为了一个问题”。
有没有一种可能，服务端组件直接 fetch 就能获取数据了。
2. use client 设计恶心
事实上，Next.js 可以自动判断当前组件是不是客户端组件，但这对开发者来说不是显性的，use client 可以更好告诉你，这个组件是客户端组件。
（另外，有人说 Astro 的 client:load 好的，我就纳闷了，这和 use client 有啥区别......）
不过 Astro 的选择性水和我觉得挺好的，这点比 Next.js 强很多。
直接说可能不明白，既然 Next.js 能做到自动判断当前组件是不是客户端组件，那直接标记这个组件是客户端组件不就行了，那假设我有个组件 C：
function C() { return <div>C 组件</div> } 很明显 C 是一个服务端组件，至少可以当成一个服务端组件，它没有任何副作用，你还有个组件 A （服务端组件）和组件 B （客户端组件），两个组件都用了 C 组件，Next.js 怎么判断 C 组件该如何渲染？你第一次接触 C 组件，要求你从服务端获取数据，你是写 RSC 还是写 useState 和 useEffect ？
3. Remix 的 load 更好
有没有一种可能，Next.js 的 page router 的 getServerSideProps 函数和 load 一样。
4. RSC 无法实现 oClick 等事件
要不你发明一个服务器，能把你浏览器里的元素绑定上这个事件。
想要绑定客户端事件，老老实实写 use client 。
5 ....
欢迎大家补充。
最后
我认为 Next.js 最恶心的地方其实是在于团队十分固执，你必须遵照它的写法，最明显的例子就是之前版本的 Next.js 重写了 fetch ，默认 force-cache 。
而且 Next.js 直接使用 React 的最新代码，稳定性有待考察（这点可以参照 React19 Suspense 变化，因为这个 React19 延迟发布来着）。
另外，Next.js 本身性能极其之差，团队甚至没有意识到这点，或者意识到但是不愿去做任何优化，只是一味地优化开发速度。
最后，Next.js 的使用场景可以说几乎没有，为了首屏加载速度，不好意思 Next.js 太慢了，见 https://github.com/eknkc/ssr-benchmark 。你说为了 seo ，个人项目我能理解，公司项目不如花点钱排名竞价，比用 Next.js 成本小很多（仅限国内）。想了想也就个人博客、交互性少的页面能用一下了。
]]>
]]>nextjs 和 golang(或者其他语言也行）后端分别是两个 docker ，由 nginx 分发，/api/请求转发到后端上，其它请求转发给 nextjs 。需要做 SSR 的部分，由 nextjs 使用内部通信访问后端。
怎么说呢，就是相当于搞一个高性能后端的同时，还能用到 nextjs 的特性，比如 SSR 等。
]]>（有一种“不如 PHP”的感觉，果然还是 PHP 天下第一吗？）
尽快升级到最新版本。
如果无法短期内升级，拦截一切 HTTP Header 包含 x-middleware-subrequest 的请求。
受影响的版本：
>= 11.1.4, <= 13.5.6 >= 14.0, < 14.2.25 >= 15.0, < 15.2.3 官方 Patch 安全版本：
14.2.25 15.2.3 扫了一眼解决方案，这个给中间件的白名单请求头现在改成了一个随机的 8 字节 ID ，标识中间件子请求的来源，被添加到请求头 x-middleware-subrequest-id 。如果请求头中的 x-middleware-subrequest-id 与全局存储的 ID 不匹配，则删除 x-middleware-subrequest 请求头。此更改确保了只有来自相同会话的子请求才会被视为中间件子请求。 https://github.com/vercel/next.js/commit/52a078da3884efe6501613c7834a3d02a91676d2
]]>这之中有一个动态路由的参数中带有中文。
此时，当使用 pnpm dev 启动时，generateStaticParams() 中返回的路径不会被编码成 URL 格式。
此时访问的路径被编码了，报错显示在 generateStaticParams() 中找不到此路径。
当为 generateStaticParams() 中的返回编码时，pnpm dev 正常了，而 pnpm build 时无法正常工作。
因为 pnpm build 时 generateStaticParams() 的返回会被编码，手动编码的结果是编码了两次，报错显示在 generateStaticParams() 中找不到此路径。
问：可以通过简单的配置将主页设置为 home.tsx 吗？
AI：不，你不能通过简单的配置来将主页设置为 home.tsx 并让它对应根路由 /。Next.js 的 app 目录结构依赖于特定的文件名约定，其中 page.tsx (或 .js, .jsx) 用于定义路由。
以下是原因以及替代方案：
为什么不能直接更改文件名：
- 约定优于配置: Next.js 强烈依赖约定优于配置的原则。对于
app目录，它期望在路由目录中找到一个名为page.tsx(或其他支持的文件扩展名) 的文件来渲染该路由。 如果它找不到page.tsx，它将不会渲染该路由。 - 路由解析器: Next.js 的路由解析器专门查找
page.tsx文件来确定页面的入口点。重命名该文件会破坏这个过程。
……（以下省略）
是真的不能变吗？不会吧？有点搞笑了吧？约定优于配置我理解，但是现在配置都没有啊？！
Next.js 13 之前还是 index.js ，现在变成 page ，有什么意义吗？我不理解……
]]>revalidatePath 失效的问题，一个可能的原因是你的 path 包含中文字符。 ]]>revalidatePath的稳定性依旧无法保证，太令人失望了！官方对于 bug 修复的积极性貌似不高（还是说 bug 实在太多了来不及修？），反而一个劲地推出新的功能，这种做法太不负责任了。无法想象这是一个拥有 129k start 的作品。 ]]>这是报错代码：
Fetching tools from: https://your-vercel-app-url.vercel.app Full API URL: https://your-vercel-app-url.vercel.app/api/sites API Response Status: 404 Error fetching tools: Error: Failed to fetch tools: 404 Not Found at c (.next/server/app/page.js:1:28997) at async f (.next/server/app/page.js:1:29346) Finalizing page optimization ... Collecting build traces ...
我在 vercel 的环境变量设置中新增了： key：NEXT_PUBLIC_BASE_URL Value： https://linkary-puce.vercel.app
Environments 勾选了 Production 和 Preview
最后在 Redeploy 的时候选择了 Production ，然后总是报错，看起来是环境变量没有生效； 但是我在代码中强制使用 vercel 的 URL ，就能正常跑下去。
page.tsx 代码：
async function getTools(): Promise<ToolsResponse> { try { const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "https://your-vercel-app-url.vercel.app"; console.log("Fetching tools from:", baseUrl); console.log("Full API URL:", ${baseUrl}/api/sites);
const res = await fetch(`${baseUrl}/api/sites`, { next: { revalidate: 60 }, headers: { "Content-Type": "application/json", }, }); v0.dev 让我下载的代码里，没有 package.json ，我需要自己配置这些吗？ ]]>
✓ Compiled /admin/usercenter in 33.4s (8687 modules)
是不是有个什么按需加载编译？不然这一个页面就 30 几秒，还怎么玩儿啊。
]]><Image alt="营业执照" className="min-w-32 rounded-md object-cover" // aspect-square height="4" src={customer.businessLicense} width="32" /> 因为部署环境需要通过一台代理服务器请求公网 cdn ，请问如何配置 nextjs 使得能够通过代理服务器获取图片资源，请有经验的 xd 帮忙解答下，感谢！
]]>
一开始写的 fetch('/api/proxy'), 访问 api 提示 浏览器：POST http://localhost:3000/api/proxy net::ERR_CONNECTION_REFUSED 改成 fetch('https://weixx.com:3000/api/proxy')并没有解决，应该怎么做呢，求求求指教 域名本来是倾向在 cf 注册，但 cf 没有 ai 域名，最后是在 namesilo 上注册的，花了四百多 RMB ，当时也是一时头脑发热🥲
没想到这一拖就到年底了
网站地址 https://image-to-text.ai/ ，算是一个比较完整的站点了，主要的功能已完成，后续还需要进行一些优化。
下面分享一下这个站点用到的东西，希望对你有帮助
- 登录：clerk+google
- 支付：lemonsqueezy
- 部署：Vercel
- 数据库：Vercel Postgres
- 图片存储：Cloudflare R2
- AI：Azure + Replicate
NextJS 相关：app router 、server actions 、shadcn 、prisma
大概这些，大家还有什么想问的留言吧，我看到会回复的。
]]>这是一个在线生成网站 Favicon 图标的工具，可以从文字生成、从 Emoji 生成、图片生成。如果有人用的话再看看添加啥新功能吧。
技术栈：NextJS 、Tailwindcss 、Shadcn 、Vercel
]]>不过前端骚操作还是需要点功力，复杂点交互还是有点吃力。
UI 排版总是觉得细节不是很到位。
下面是练手的工具站
]]>
