🚀 AnythingConvert：用 Next.js 打造的 AI 文本转换平台

用户823679493925
87 阅读3分钟

🚀 AnythingConvert：用 Next.js 打造的 AI 文本转换平台

截屏2025-06-02 17.23.44.png

项目简介

最近完成了一个有趣的项目 —— AnythingConvert，一个基于 AI 的文本转换平台。用户可以将普通文本转换成各种创意风格，比如：

  • 🎭 角色风格：莎士比亚、海盗船长、可爱猫咪等
  • 📝 写作风格：正式商务、幽默风趣、诗歌形式等
  • 🌍 语言风格：古文、网络用语、专业术语等
  • 🎨 创意转换：表情包文案、社交媒体内容等

最重要的是，用户可以创建自己的转换器！只需要提供转换规则，AI 就能按照你的想法来转换文本。

🛠️ 技术栈

  • 前端框架：Next.js 15 (App Router)
  • 语言：TypeScript
  • 样式：Tailwind CSS
  • 国际化：next-intl (支持中英文)
  • 数据库：PostgreSQL + Prisma ORM
  • 部署：Vercel
  • AI 集成：支持多种 AI 模型

✨ 核心功能

1. 丰富的预设转换器

平台内置了多种转换器，涵盖不同场景：

  • 文学风格转换
  • 专业文档润色
  • 创意内容生成
  • 情感表达转换

2. 自定义转换器创建

这是最有意思的功能！用户可以：

  • 定义转换规则和提示词
  • 选择输出类型（文本/图片）
  • 设置分类标签
  • 分享给其他用户

3. 完善的多语言支持

使用 next-intl 实现了完整的国际化：

  • 英文版本在根目录 (/)
  • 中文版本在 /zh 路径
  • 智能语言检测（仅首次访问）
  • SEO 友好的 hreflang 配置

🎯 技术亮点

1. 智能的多语言路由

// 仅在首次访问时检测浏览器语言
export default function middleware(request: NextRequest) {
  const localeCookie = request.cookies.get('NEXT_LOCALE');
  const pathname = request.nextUrl.pathname;
  
  if (localeCookie || pathname.startsWith('/zh')) {
    // 有 Cookie 或明确访问中文路径，不自动检测
    return createMiddleware({ ...routing, localeDetection: false })(request);
  }
  
  // 首次访问，启用语言检测
  return createMiddleware({ ...routing, localeDetection: true })(request);
}

2. 灵活的数据结构

支持单语言和多语言混合存储：

interface Converter {
  name: string | { en: string; zh: string };
  description: string | { en: string; zh: string };
  prompt: string | { en: string; zh: string };
  outputType: 'text' | 'image';
}

3. 类型安全的国际化

const t = useTranslations('converter');
const localizedContent = getLocalizedConverterContent(converter, locale);

🌟 用户体验设计

响应式设计

  • 移动端优先的设计理念
  • 暗黑模式支持
  • 流畅的动画过渡

交互优化

  • 实时字符计数
  • 一键复制结果
  • 图片结果支持复制到剪贴板
  • 智能的错误处理和回退机制

📊 性能优化

  • 静态生成：利用 Next.js 的 SSG 能力
  • 缓存策略：localStorage + 服务端缓存
  • 代码分割：按需加载语言包
  • 图片优化：Next.js Image 组件

🔧 部署和扩展

项目采用现代化的部署方案：

  • Vercel 一键部署
  • 环境变量管理
  • 自动 CI/CD
  • 数据库迁移自动化

💭 开发感悟

在开发过程中遇到了一些有趣的挑战：

  1. 多语言路由设计：如何让英文内容在根目录，同时保持 SEO 友好
  2. AI 集成：如何设计灵活的提示词系统
  3. 用户体验：如何平衡自动化和用户控制权

最终通过合理的架构设计和技术选型，实现了一个既实用又有趣的平台。

🎉 在线体验

📝 总结

AnythingConvert 不仅是一个实用的工具，也是一次有趣的技术实践。通过这个项目，深入体验了：

  • Next.js 15 的新特性
  • 现代化的国际化方案
  • AI 应用的产品化思路
  • 开源项目的完整流程

希望这个项目能给大家带来灵感，也欢迎交流讨论！

#Next.js #TypeScript #AI #开源项目 #国际化 #文本处理

avatar
文章
阅读
粉丝