🚀 用Next.js 15 + AI打造多语言文本转换平台:从0到1的完整开发实战
项目背景
在日常工作中,我们经常需要将文本转换成不同的风格和格式。比如:
- 将正式文档改写成轻松幽默的风格
- 把普通文本转换成古风诗词
- 将技术文档翻译成通俗易懂的语言
于是我开发了AnythingConvert - 一个基于AI的万能文本转换平台。
🛠️ 技术栈选择
前端技术
- Next.js 15 - 最新版本,支持React 19
- TypeScript - 类型安全,提升开发效率
- Tailwind CSS - 快速构建现代UI
- next-intl - 国际化支持
后端 & 数据
- Prisma ORM - 类型安全的数据库操作
- PostgreSQL - 可靠的关系型数据库
- Supabase - 现代化的后端服务
AI集成
- openai等 API - 免费的AI文本生成服务
- 支持多种模型:OpenAI、Mistral等
🎯 核心功能实现
1. 多语言支持
使用next-intl实现完整的中英文双语支持:
// 国际化配置
const locales = ['en', 'zh'] as const;
export type Locale = typeof locales[number];
// 使用翻译
const t = useTranslations('home');
2. AI驱动的随机生成
最有趣的功能 - AI随机生成转换器创意:
// AI生成随机转换器
export async function generateRandomConverterWithAI(locale: string) {
const response = await fetch('https://openai***', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
model: 'openai',
messages: [
{ role: 'system', content: systemPrompt },
{ role: 'user', content: userPrompt }
],
jsonMode: true,
seed: Math.floor(Math.random() * 10000)
})
});
// ... 处理响应
}
3. 智能名称后缀处理
自动为转换器添加合适的后缀:
// 中文:美女转换器(无空格)
// 英文:Beauty Converter(有空格)
export function ensureConverterSuffix(name: string, locale: string): string {
const isZh = locale === 'zh';
const suffix = isZh ? '转换器' : ' Converter';
return name + suffix;
}
🎨 UI/UX设计亮点
1. 现代化设计
- 深色模式支持
- 响应式布局
- 流畅的动画效果
2. 用户体验优化
- 实时预览转换器名称
- 加载状态指示
- 错误处理和提示
📊 项目成果
- ✅ 支持19+种转换器类型
- ✅ 完整的中英文双语界面
- ✅ AI驱动的随机生成功能
- ✅ 响应式设计,移动端友好
- ✅ 类型安全的TypeScript代码
🚀 在线体验
项目已部署上线,欢迎体验:
AnythingConvert - 万能文本转换平台
💡 技术收获
- Next.js 15新特性:体验了最新的App Router和React 19
- 国际化最佳实践:学会了next-intl的完整使用
- AI集成经验:掌握了openai API的使用技巧
- TypeScript进阶:提升了类型定义和泛型使用能力
总结
这个项目让我深度体验了现代前端开发的完整流程,从技术选型到部署上线。特别是AI集成部分,让传统的文本处理变得更加智能和有趣。
如果你也在做类似的项目,欢迎交流讨论!
#Next.js #React #TypeScript #AI #前端开发 #开源项目