Next14篇

动态配色方案：在 Next.js 中实现 Shadcn UI 主题色切换 4日前 评论 白雾茫茫丶
动态配色方案：在 Next.js 中实现 Shadcn UI 主题色切换

这篇文章介绍了如何在Next.js应用中实现动态主题色切换系统，以满足用户多样化的审美需求。文章首先提出了使用CSS自定义属性（CSS Variables）结合Shadcn UI设计系统架构来构建支持多套预设配色方案的主题切换方案。接着，推荐了TweakCN作为强大的主题编辑与生成工具，并详细说明了从选择配色方案到生成和导入CSS变量的步骤。此外，还通过zustand状态管理库保存和切换主题色状态，并提供了具体的代码示例，包括创建主题配色枚举、初始化主题色函数及创建主题切换按钮等。最后，展示了效果预览并总结了该方案的优势。
不只是作品集：用 Next.js 打造我的数字作品库 1周前 评论 白雾茫茫丶
不只是作品集：用 Next.js 打造我的数字作品库

这篇文章介绍了作者使用Next.js和Shadcn UI构建的一个个人作品信息展示模板。该模板设计简洁且结构清晰，适合直接使用或作为学习参考。作者在原有基础上进行了个性化调整，增加了交互细节和动画效果。文章还强调了开发者拥有一个统一技术身份的重要性，并详细列出了项目的技术栈、特性和环境变量配置，最后提供了在线预览链接和GitHub地址。
Next.js 实战 (十)：中间件的魅力，打造更快更安全的应用 11月前 评论 白雾茫茫丶
Next.js 实战 (十)：中间件的魅力，打造更快更安全的应用

这篇文章介绍了Next.js中间件的功能与应用，强调其在提升应用性能和安全性方面的重要性。中间件能够拦截并处理每个请求，支持身份验证、请求日志记录及响应数据的预处理等任务。文中通过示例展示了如何利用中间件进行重定向、记录请求信息以及修改请求和响应内容，从而帮助开发者构建更高效、更安全的应用程序。
Next.js 实战 (九)：使用 next-auth 完成第三方身份登录验证 11月前 1 条 白雾茫茫丶
Next.js 实战 (九)：使用 next-auth 完成第三方身份登录验证

这篇文章介绍了如何使用 next-auth 库在 Next.js 应用程序中实现第三方身份登录验证。next-auth 是一个功能强大的身份验证库，支持多种认证方式，包括 OAuth 2.0 提供商和自定义提供商。它具有内置的 OAuth 支持、会话管理、多语言功能、自定义页面、安全默认设置以及与不同数据库的集成能力。文章还提到了配置环境变量和设置 API 路由的相关步骤，帮助开发者快速集成身份验证功能。
Next.js 实战 (七)：浅谈 Layout 布局的嵌套设计模式 11月前 评论 白雾茫茫丶
Next.js 实战 (七)：浅谈 Layout 布局的嵌套设计模式

这篇文章介绍了Next.js中布局嵌套设计模式的应用与挑战。在中后台管理系统中，通常使用固定布局包裹页面，但对于某些特殊页面（如登录页）则不需要布局。Next.js要求每个应用都有一个根布局文件，并支持文件夹层次结构中的布局嵌套。这种设计理念有助于构建复杂且易于维护的页面结构。然而，如何让特殊页面避免被父级布局包裹成为一个问题。作者通过对比两种解决方案，一种是在每个需要的页面单独设置布局，另一种是通过状态管理工具Zustand动态控制是否显示根布局，最终选择了后者作为更简洁的实现方式。
Next.js 实战 (五)：添加路由 Transition 过渡效果和 Loading 动画 12月前 评论 白雾茫茫丶
Next.js 实战 (五)：添加路由 Transition 过渡效果和 Loading 动画

这篇文章介绍了如何在 Next.js 应用中添加路由过渡效果和加载动画。通过使用一个功能强大的动画库，开发者可以轻松实现流畅的交互和动画效果，而无需深入了解动画原理。文章展示了如何创建一个全屏加载组件，用于处理页面加载时的空白问题，并提供了一个示例代码来演示加载动画的实现方式。
Next.js 实战 (三)：优雅的实现暗黑主题模式 2024-12-10 评论 白雾茫茫丶
Next.js 实战 (三)：优雅的实现暗黑主题模式

这篇文章介绍了如何使用 `next-themes` 库在 Next.js 项目中优雅地实现暗黑主题模式。首先通过安装 `next-themes` 依赖并创建 `ThemeProvider` 组件来管理主题切换逻辑，然后在全局布局文件中引入该组件以支持系统级或手动切换主题的功能。此外，还展示了如何开发一个主题切换按钮组件，允许用户手动选择亮色或暗黑模式。