Next.js Page Router + Chakra UI 实现优雅的主题切换 [特殊字符]

Next.js Page Router + Chakra UI 实现优雅的主题切换 🌓

从0到1搭建Next.js主题切换功能，让你的应用更具个性化体验

📌 引言

主题切换功能已经成为现代Web应用的标配，它不仅能提升用户体验，还能满足不同用户在不同场景下的使用需求。本文将带你从0到1使用Next.js Page Router和Chakra UI实现一个优雅的主题切换功能。

技术栈

• Next.js 16 (Page Router)
• Chakra UI 3
• next-themes
• TypeScript

最终效果

• 🌞 浅色模式和 🌙 深色模式无缝切换
• 主题状态持久化存储
• 支持系统主题检测
• 优雅的图标动画

🚀 第一步：初始化Next.js项目

首先，我们使用官方的create-next-app命令初始化一个Next.js项目：

npx create-next-app@latest next-page-router-chakra-theme-switch --typescript --app-router false
cd next-page-router-chakra-theme-switch

注意：我们使用--app-router false来明确使用Page Router，而不是App Router

初始化完成后，项目结构如下：

├── src/
│   ├── pages/
│   │   ├── _app.tsx
│   │   ├── _document.tsx
│   │   └── index.tsx
│   └── styles/
├── public/
├── package.json
└── next.config.ts

📦 第二步：安装必要的依赖

接下来，我们需要安装Chakra UI、next-themes和图标库：

npm install @chakra-ui/react @emotion/react next-themes react-icons

• @chakra-ui/react：提供UI组件和主题系统
• @emotion/react：Chakra UI的依赖，用于样式处理</