Next 实战 12篇

从 0 到 1 搭建一个 Next.js 项目，并分享其记录过程

基于 Next.js 的今日热门榜单平台 1月前查看 评论
基于 Next.js 的今日热门榜单平台

这篇文章介绍了使用Next.js框架开发的今日热门榜单平台，该平台收集了微博、抖音、百度等多个热门平台的API接口，实现了全网热点的汇总展示。文章详细说明了项目信息、效果预览、热点平台、项目运行和本地部署等，并计划添加拖拽排序、主题切换动画等新功能。

Next.js 实战 (十)：中间件的魅力，打造更快更安全的应用 5月前查看 评论
Next.js 实战 (十)：中间件的魅力，打造更快更安全的应用

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

Next.js 实战 (九)：使用 next-auth 完成第三方身份登录验证 5月前查看 1 条
Next.js 实战 (九)：使用 next-auth 完成第三方身份登录验证

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

Next.js 实战 (七)：浅谈 Layout 布局的嵌套设计模式 5月前查看 评论
Next.js 实战 (七)：浅谈 Layout 布局的嵌套设计模式

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

Next.js 实战 (六)：如何实现文件本地上传 5月前查看 评论
Next.js 实战 (六)：如何实现文件本地上传

这篇文章介绍了在Next.js框架中如何实现文件本地上传的功能，通过原生上传方式，将文件以哈希值命名并保存到指定目录，同时根据年月对上传目录进行分类。文章详细展示了如何在Next.js中创建API路由，处理POST请求，获取文件数据，生成文件名，以及将文件保存到服务器文件系统中。

Next.js 实战 (五)：添加路由 Transition 过渡效果和 Loading 动画 5月前查看 评论
Next.js 实战 (五)：添加路由 Transition 过渡效果和 Loading 动画

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

Next.js 实战 (三)：优雅的实现暗黑主题模式 6月前查看 评论
Next.js 实战 (三)：优雅的实现暗黑主题模式

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

Next.js 实战 (一)：项目搭建指南 11月前查看 2 条
Next.js 实战 (一)：项目搭建指南

这篇文章介绍了作者在2024年下半年计划通过从零开始搭建一个完整的后台模板来深入学习Next.js框架的经历。文章提到Next.js官方推荐使用`create-next-app`命令创建新项目，并强调了新版本默认集成了TypeScript、ESLint和Tailwind CSS等配置。此外，文章列举了项目中的关键文件和目录结构，包括配置文件、依赖项、环境变量以及各种UI组件和API端点的相关文件，同时提供了进一步学习的参考资源。

我是如何使用 Next.js14 + Tailwindcss 重构个人项目的 2024-05-20查看 2 条
我是如何使用 Next.js14 + Tailwindcss 重构个人项目的

这篇文章介绍了作者如何使用 Next.js14 和 Tailwindcss 对个人项目进行重构，以及项目的技术栈、部署方式和优化过程。项目基于之前学习的灵感，目的是提升用户体验和SEO优化。文章详细说明了项目环境配置、克隆、安装依赖和部署步骤，并提醒接口使用规则及责任声明。作者还表示将分享开发中的问题和解决方法。