- 博客(35)
- 收藏
- 关注
RSS订阅原创 Next.js 用户管理（1）| 搭建登录注册系统
本篇文章介绍了技术栈下的手机号注册 & 登录系统，并实现了：✅手机号注册 & 登录🔑✅JWT 认证 & 自动登录🔄✅获取当前用户信息 & 退出登录🛡️同时，我们探讨了Token 存储方式（推荐 HttpOnly Cookie）、Redis 处理验证码的优势以及AuthContext 统一管理用户状态的必要性。📌下一篇文章将详细讲解短信验证码的发送 & 验证，让用户可以手机号 + 验证码登录。
2025-03-06 09:00:00
742
原创 SEO炼金术（4）| Next.js SEO 全攻略
Next.js 提供了强大的内置 SEO 工具✅metadataAPI** 轻松设置<title>metacanonical✅robots.ts自动生成robots.txt，控制爬虫行为✅sitemap.ts生成，加快搜索引擎索引✅多语言hreflang轻松管理，提高全球搜索排名利用 Next.js，你可以更轻松地管理 SEO，提升网站在搜索引擎中的可见度！🚀。
2025-02-26 19:51:54
1418
原创 SEO炼金术（3）| 深入解析 SEO 关键要素
作用：设置网页的标题，出现在浏览器标签页和搜索引擎结果页中。SEO 影响搜索引擎会优先使用<title>作为搜索结果的标题，如果title相关性强，排名会更高。示例< title > Next.js SEO 最佳实践 | 提升 Google 排名 </ title ></< title > Next.js SEO 最佳实践 | 提升 Google 排名 </ title >✅** 最佳实践**包含主要关键词（但不要堆砌）。控制长度（50~60 个字符最佳）。确保每个页面的<title>唯一。
2025-02-13 10:47:33
692
原创 SEO炼金术（2）| 有了“新词”之后如何做内容？
在SEO的世界中，发现“新词”就像找到了未开发的宝藏。。然而，有了新词只是开始，如何利用它们创造出优质内容，才是能否获得流量的关键。这篇文章将带你了解有了“新词”后，如何从用户意图分析，到内容创建、发布推广，再到持续优化，实现内容价值最大化。
2025-02-03 19:08:49
896
原创 SEO炼金术 | 如何发掘“新词”（1）
在SEO中，新词被认为是过去12个月内首次出现在搜索引擎上并开始产生搜索量的词汇。这些词通常因为某些事件、趋势或产品的推动而逐渐被用户关注。例如，通过像这样的工具，可以清晰地查看一个词首次被搜索的时间和随后的搜索趋势。这不仅能帮助我们判断它是否是新词，也能直观地了解它的热度增长是否具有可持续性。关于如何判断新词出现的时间参考：哥飞教你一招判断关键词出现时间，找新词不再难新词的价值在于其低竞争、高潜力的特性。**因为这些词尚未被大量使用，它们的竞争度通常较低。
2025-01-16 11:07:12
801
原创 Next.js 多语言 (3) | 如何处理多语言中的跳转
比如说，当我们在代码中使用跳转时，为什么会出现 404 页面，无法找到/blog页面？这个问题其实是很多开发者在刚接触多语言应用时常常会遇到的。为了搞清楚多语言中跳转是如何处理的，我们首先需要了解 Next.js 中有哪些跳转方式。只有理解了这些基础的跳转方式，才能更好地理解在多语言应用中的处理方式。
2025-01-07 09:20:27
1025
原创 Next.js 多语言 (2) | useTranslations、getTranslations 和 NextIntlClientProvider 的使用
在使用 Next.js 开发多语言网站时，我们通常会遇到一个重要问题：如何实现多语言（i18n） 🌍。一开始，很多开发者都会选择使用 useTranslations 🤔，这是一个简单直接的工具。但是，这种方式只能在 客户端组件（Client Component） 中使用，而客户端组件对 SEO 不友好 ，这让人非常头疼。通过查阅官方文档，我发现 next-intl/server 提供的getTranslations和NextIntlClientProvider。它们可以很好地解决这个问题，同时兼顾 国
2025-01-03 10:01:41
653
原创 Next.js 多语言 (1) | 中间件（Middleware）的设置与应用
📝用户语言的自动检测与跳转中间件通过路径前缀、Cookie 和浏览器语言头动态检测语言，并自动跳转到用户期望的页面。SEO 的多语言支持中间件为每种语言生成独立路径，并结合hreflang标签，确保搜索引擎正确抓取和展示不同语言页面。避免静态资源的干扰通过配置matcher，中间件仅处理国际化相关路径，确保静态资源和其他非国际化路径正常加载。合理配置中间件，不仅能提升用户体验，还能让你的多语言网站在 SEO 表现上更上一层楼！🌟。
2025-01-02 09:22:59
1038
原创 Next.js 新手容易犯的错误 | 性能优化与安全实践（6）
1 忘记为 Suspense 设置 key 属性 问题是什么？在 React 和 Next.js 中，Suspense 是一个用于处理异步数据加载的工具。当你用 Suspense 包裹一个组件时，如果组件的内容需要根据某些条件（如 URL 参数、搜索参数等）动态变化，你需要通过 key 属性告诉 React，这个组件的内容需要重新渲染。如果忘记设置 key 属性：React 会以为组件的内容没有变化，不会重新触发加载逻辑。用户在切换内容时看到的可能是旧的内容，导致体验变差。
2024-12-27 10:22:12
1298
原创 Next.js 新手容易犯的错误 _ 加载与缓存管理的关键（5）
服务器端方式（：适用于需要动态加载数据的场景，但会有延迟。客户端方式（：适用于即时更新的场景，比如更改颜色、排序等简单操作。Suspense是 React 提供的一个组件，用来处理异步数据加载和延迟渲染的问题。它允许开发者为等待数据的部分内容设置占位符（fallback），在数据加载完成前显示一个加载状态（如“加载中…”），并在加载完成后显示实际内容。
2024-12-24 15:03:53
786
原创 Next.js 新手容易犯的错误 | 服务端操作中的陷阱（4）
在 Next.js 开发中，服务端组件和 Server Actions 功能强大，却隐藏着不少容易被忽视的陷阱，新手往往因此踩坑。本文总结了几个新手常见陷阱，帮你快速避坑 🖖。
2024-12-12 09:32:53
1128
原创 Next.js 新手容易犯的错误 | 关于数据的处理（3）
总之，在使用 Next.js 开发中，理解服务端组件和客户端组件的职责分工是关键。服务端组件不仅可以直接操作数据库，还能利用内置的优化机制简化数据获取流程，不需要绕远路通过 API 路由获取数据。而在组件设计中，独立获取数据的方式更灵活，可以减少冗余的props传递，提高代码复用性。对于数据请求，尽量避免串行的“瀑布式”请求，充分利用实现并行处理，提升页面性能。此外，在处理表单提交时，Next.js 提供了 Server Actions，
2024-12-06 09:48:11
801
原创 Next.js 新手容易犯的错误 | All about “use client“ (2)
在上一篇文章中（），我们探讨了 Next.js 中服务端组件和客户端组件的运行机制以及常见的使用误区。这篇文章将作为续集，进一步分析更多开发中容易遇到的问题，并提供实用的解决方案，帮助你在项目中更好地规避这些坑点。
2024-12-04 15:42:52
863
原创 Next.js 新手容易犯的错误 | All about “use client“ (1)
在使用 Next.js 开发时，服务端组件和客户端组件的正确使用直接关系到性能和交互体验。很多开发者在use client的使用、浏览器 API 的调用等方面容易踩坑，导致错误或不必要的性能损失。本文通过具体案例，总结了这些常见问题及解决方案，帮助你更好地掌控 Next.js 开发。
2024-11-29 16:57:00
777
原创 Next.js App Router 设置多语言（i18n)：详细笔记
由于在建英文站还是中文站之间摇摆不定，纠结了半个多月之后还是决定为自己的网站做多语言版本，静下心来好好学习一下官方文档🤱。本文采用的是next-intl (i18n)。是 Internationalization 的缩写。这个名字的由来是因为 "Internationalization" 这个单词中，首字母 "I" 和尾字母 "N" 之间有 18个字母，因此简写为。在路径中加入了语言代码（比如 /en/about 或者 en.example.com/about）。路径中没有语言代码。
2024-11-26 09:26:16
1198
原创 使用 Next.js App Router 的十个常见错误
在客户端组件中通过 fetch 调用路由处理器发送请求，写了很多不必要的代码。将上下文提供器放在根布局中，同时保持其他部分的服务器渲染：。的边界包裹在数据获取组件的下方，无法正确显示回退状态。误以为服务器组件和客户端组件不能一起使用，导致代码重复。) 放错位置，导致所有子组件被迫变为客户端组件。例如：。边界移到数据获取组件的上方：。来动态化数据：。重新验证数据：。) 处理逻辑：。
2024-11-24 14:00:05
658
原创 关于Next.js的App Router：详细笔记
App Router 中的所有页面和布局组件默认是 React 服务器组件（Server Components）。Next.js App Router 是基于 React 的路由系统，提供了新的功能和概念，目前已接近完全稳定。本文将介绍 App Router 的基础功能，包括路由、布局、数据获取、元数据等。当访问 localhost:3000 时，页面的渲染是布局和页面的组合。定义整个应用的路由布局，接收子组件（children），并渲染它们。不仅可以在页面中获取数据，还可以在布局组件中获取数据。
2024-11-19 11:04:02
1012
原创 徒手部署 Next.js 项目并实现自动化部署流程——类Vecel自动化更新
我先是尝试宝塔部署，但是我的宝塔面板在部署的时候总是失败，出现了下载时卡住、明明安装成功但是添加node项目会检测不到安装的node、以及用户权限等等奇怪的问题🤷♀️，并且多次尝试重装系统、重装宝塔面板都没有搞定。用了一段时间的vecel免费部署，发现我的项目在vecel上运行会有难以解决的问题😭，于是只能把项目转到自己的服务器上。启动项目后也要注意，nginx的配置也要进行修改，否则是无法访问到webhook的。webhook.js中内容：。在nginx中增加以下内容：。
2024-11-15 11:12:36
585
原创 突破限制！在 Vercel 上实现文件上传的替代方案：自建 Node.js 文件上传服务器
这时候只能考虑外部的文件存储了，但是不想再多花钱，就利用上了之前买的香港的服务器，配置一个文件上传和访问的接口，解决我这个项目的上传文件问题~👾。这样一来，通过自建文件上传服务器，我们成功避开了 Vercel 的文件系统限制，💷既不用额外购买云存储，又能让项目平稳运行。部署完成后，只需将 Next.js 项目中的文件上传路径改为新配置的服务器地址，一切功能便能如常使用啦！原本，我是单纯的想省下一笔云存储的钱，现在看来还是我太天真了 😂。然后传到了宝塔上，创建一个node项目，正常部署就可以。
2024-11-12 16:45:13
393
原创 关于ChatGPT的WebSearch功能，想说说自己的感受。。。
有次我让他帮我写出next.js中调用OpenAI的API代码，调用时输入的有图片和文字，当我质疑他为什么没有把图片转成base64编码，他竟然告诉我可以直接上传图片🙃。”进行搜索，出来内容图文并茂，并且，在右侧列出了所有的来源网址、缩略信息...👀这不就是，搜索引擎吗？不过更重要的还是在右侧，列出了超多来源，也就是，我搜索一次，同时获得了互联网上的相关内容并且AI还给我总结好了。总的来说，小地球功能的加入让搜索和AI对话结合得更加紧密，能提升效率，但仍有改进空间。就是完全可以当个搜索引擎来用。
2024-11-09 11:04:41
336
原创 从 Django 到 Next.js：好像是发现了点什么新大陆.......
写了很多（写了很多遍）网站，但是就是做不出现代的、好看的、简介的效果，然后我在考虑要不要前后端分离，使用vue+django这种技术栈，甚至还去学了几小时的vue。当我开始使用next.js，我发现了这也太方便了。直接在vecel上部署，对于我这种刚起步的小白白，免费版已经够了，连服务器钱都省了，我就想我怎么没早点发现这么好的东西，刚刚买过半年的服务器😢。，我发现他们普遍用的是next.js，前端界面很好看，动画效果也很丰富，回头再看看我做的django前后端不分离的网站🤷，于是下定决心要换技术栈。
2024-10-31 13:16:24
341
原创 使用宝塔面板安装mysqlclient报错：Exception: Can not find valid pkg-config name. Specify MYSQLCLIENT....
解决：Exception: Can not find valid pkg-config name. Specify MYSQLCLIENT_CFLAGS and MYSQLCLIENT_LDFLAGS env vars manually
2024-08-31 12:50:03
466
1
原创 Linux系统实现调用模型自由：解决MaxRetryError(“HTTPSConnectionPool(host=‘huggingface.co‘, port=443)：...
采用Qv2Ray：我用的是：2.7.0-pre2版本：下载后右键->Execute出现报错：解决办法是在当前文件夹位置打开终端，输入。
2024-02-22 16:44:59
1328
1
原创 模型报错：RuntimeError: PytorchStreamReader failed reading zip archive: failed finding central directory
回忆起来了在执行这两步加载模型的时候ctrl+C打断了一次，打断后不会继续下载而是重新下载并命名为“原模型名(1)”导致推理时采用的模型是之前没有下载完整的模型。由于报错信息前面显示的是bert模型，一直以为是bert的问题，后面仔细观察是sam模型没有下载完整。网上查了一下都说是模型没有下载完整。
2024-02-22 14:51:15
990
2
原创 运行Grounded-Segment-Anything报错：NameError: name ‘_C‘ is not defined
简单说就是先把GroundingDINO给卸载掉，然后cd到GroundingDINO的文件夹，执行。问题出在GroundingDINO上。
2024-02-22 14:44:24
1311
2
原创 运行Diffusers的train_text_to_image_lora.py时报错：Attempting to unscale FP16 gradients.
issues里面提供了各种方法，但是尝试了一遍都没有解决(也可能是我没理解)注意在accelerate config里面也要设置成bf16。
2024-02-20 10:41:17
1433
原创 StableDiffusionInpaintPipeline的Example报错:OSError: Unable to load weights from pytorch checkpoint...
说的是‘weights_only'参数有问题，因为模型和代码都是官网上搞到的，如果有问题早就被别人发现了，所以怀疑是不是版本问题。运行的是以下这个Example，在上一次报错后，已经把模型下载到了本地并对应修改了执行脚本中的内容。尝试降版本到4.36，报错解决了。（装好后pip check一下检查有没有冲突）第一行：问题出在transformers这个库，感觉上是版本不兼容。然后觉得可能是自己装的transformers这个库版本太新了。torch是租用的云服务器上预装的，版本不算新。
2024-01-29 16:13:31
2864
原创 霍夫曼树（二叉树）的python代码实现
节点是核心，先有节点，再有树。根据节点的属性找到节点的位置（是否为叶子节点等），最终找到路径，找到编码。
2024-01-26 21:16:17
855
1
原创 运行StableDiffusionInpaintPipeline的Example时报错：OSError: Cannot load model runwayml/stable-diffusion-...
从Example代码里面看到，应该是要下载runwayml/stable-diffusion-inpainting模型。原因是：国内无法服务器无法直接连接上huggingface。解决办法是：开代理把模型下载到本地再上传到服务器端。
2024-01-24 16:39:29
6176
8
原创 运行grounded-sam demo with sam-hq时报错：RuntimeError: Error(s) in loading state_dict for Sam:...
在HQ-SAM这一页，要注意下载正确的模型，因为sam_hq_vi_h太大了，就下载了tiny，本来我以为只要把运行脚本里面这行改成sam_hq_vit_tiny就行结果还是报错。下载vit_h模型并放到项目目录后可以成功运行😊。原因：未使用正确的HQ-SAM模型。最后一句说是形状不匹配。
2024-01-23 16:30:58
1187
3
原创 运行Grounded-Segment-Anything警告：Failed to load custom C++ ops. Running on CPU mode Only!
尝试用pip check查找有没有冲突的依赖，解决冲突后仍然无法用GPU运行。开始以为是哪里没有装好，又重装了一遍，还是不行。所以还是用Docker部署方便。之后可以构建使用GPU的镜像😊。
2024-01-23 14:57:19
2568
1
原创 运行Grounded-Segment-Anything报错：OSError: We couldn‘t connect to ‘https://huggingface.co‘ to load...
找到加载bert模型的部分应该是在/GroundingDINO/groundingdino/util/get_tokenlizer.py这个文件中。打开这个文件，修改相应部分确保使用本地路径。2 修改get_tokenlizer.py。1 模型文件下载到本地。
2024-01-23 14:37:06
2106
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人