[特殊字符] 用Next.js 15 + AI打造多语言文本转换平台：从0到1的完整开发实战

本文链接：https://blog.youkuaiyun.com/StudentHc/article/details/148384602

🚀 用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;
}