https://bloglee.pages.dev/tags/next.js/ Recent content in Next.js on Kevin's Blog Hugo zh Mon, 12 Jan 2026 00:00:00 +0000 https://bloglee.pages.dev/post/cloudflare-images/ Mon, 12 Jan 2026 00:00:00 +0000 https://bloglee.pages.dev/post/cloudflare-images/ <p>在使用 <code>opennextjs-cloudflare</code> 部署 Next.js 时，图片优化是一个大坑。</p> <p>最初我尝试了官方的 Binding 模式，但遇到了格式无法自动转换（一直是 JPEG）和缓存配置麻烦的问题。经过摸索，最终切换到了 <strong>Custom Loader</strong> 模式。这个方案直接利用 Cloudflare 原生的图片转换服务（<code>/cdn-cgi/image/</code>），不仅无需消耗 Worker 资源，还能强制输出 WebP/AVIF 格式，速度飞快。</p> https://bloglee.pages.dev/post/into-to-next-auth/ Tue, 19 Aug 2025 00:00:00 +0000 https://bloglee.pages.dev/post/into-to-next-auth/ <h2 id="oauth-授权">OAuth 授权</h2> <ul> <li>用户在 Google 页面同意授权（选择账号、允许权限）</li> <li>Google 返回授权码（authorization code）到 NextAuth 配置的回调 URL（默认是 /api/auth/callback/google）。</li> <li>NextAuth 收到 Google 返回的授权码</li> <li>使用 Google 的 client_id 和 client_secret 去请求访问 token 和用户信息</li> <li>获取用户信息（如 email、name、avatar）</li> <li>在 authorize 或 callbacks.signIn 中，你可以： <ul> <li>在数据库查找或创建用户。</li> <li>设置用户的权限或角色信息。</li> </ul> </li> <li>NextAuth 生成一个 JWT 或 session cookie（取决于配置 session.strategy）。</li> <li>用户的会话信息会存储在 cookie 中，并包含一些用户信息或权限.</li> <li>调用 signOut()。 <ul> <li>NextAuth 清空 cookie，会话失效。</li> </ul> </li> </ul> <h2 id="credentials-provider">Credentials Provider</h2> <h2 id="email-provider">Email Provider</h2> <h2 id="问题">问题</h2> <p>JWT vs token</p> https://bloglee.pages.dev/post/basics-of-nextjs/ Sun, 02 Mar 2025 00:00:00 +0000 https://bloglee.pages.dev/post/basics-of-nextjs/ <h2 id="use-client-指令">use client 指令</h2> <p>可以，简单总结就是：</p> <h3 id="use-client-是什么"><code>use client</code> 是什么</h3> <p>它是 Next.js 里的一个标记，表示：</p> <p><strong>这个组件要在浏览器端运行。</strong></p> <p>写了它之后，这个组件就变成 <strong>Client Component</strong>。</p> <hr> <h3 id="加了之后会怎样">加了之后会怎样</h3> <h4 id="1-可以使用浏览器相关能力">1. 可以使用浏览器相关能力</h4> <p>比如：</p>