在ChatGPT上线了应用商店之后，里面的应用确实可以给实际工作带来很大的效率提升，使用里面的应用可以做之前没接触过的东西，就比如直接使用Grimoire应用，协助开发一个用Next.js框架搭建的简单的工具网站，在这之前有接触过一点点AngularJS和CSS开发，但Next.js之前完全没接触过，使用ChatGPT可以快速上手，另外使用Logo Creator应用设计网站的Logo，使用 GPT4.0 写了首页的英文引流软文。
关于Next.js: Next.js (https://www.nextjs.cn/)为您提供生产环境所需的所有功能以及最佳的开发体验：包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能 无需任何配置。详细可看下Next.js 官方开发文档(https://www.nextjs.cn/docs)
使用Next.js开发工具网站还有另外一个很重要的原因，Vercel是零配置部署Next.js应用程序的最快方式。而Vercel是免费的，也有付费，但目前对于小工具网站免费的配置完全够用，此外还有一些特性：自动HTTPS和SSL证书、自动CI/CD(通过GitHub, GitLab, Bitbucket等)、通过git push实现即时全球部署等等让开发一个工具网站的成本降到最低。此外工具网站用到的cloudinary云存储服务也是使用免费版本的配置，后续如果存储的量大的话再转付费版本。目前网站的唯一成本就是给每个网站申请的域名挂靠费，每个域名一年78块。
一、项目开发
开发的IDE是使用WebStorm，直接在里面创建Next.js的项目，终端提示的配置项全部都回车默认即可。
接着在ChatGPT上选择Grimoire应用，详细描述你的开发需求，让它直接给出详细的项目配置步骤和对应的前后端代码即可，当然这边不会一次性输出所有的详细代码，可能初始只是给出大概的实现框架，需要逐步提问完善实现逻辑。
另外ChatGPT爬取的Next.js框架相关代码没更新到最新，比如next-connect，ChatGPT给出的代码是旧接口逻辑，实际配置之后和最新的实现不匹配，这个时候直接到官网上拷贝next-connect的使用范例喂给ChatGPT进行逻辑修正。
1. 特殊字符处理
在自定义组件中的文本内容，特殊字符需要使用转义字符，否则后续部署到Vercel上编译的时候会报错。比如单引号和双引号要替换成如下转义字符：
' 和 "2. page/api 后端接口解析配置
另外对于page/api目录中的后端接口，如果是前端传递FormData表单数据给后端接口，后端接口需要配置如下代码：
export const config = {
api: {
bodyParser: false, // Disabling bodyParser
},
};Next.js的API路由默认使用bodyParser来解析进来的请求体（request body）。当你发送一个POST请求，特别是包含文件（如在文件上传场景）或在发送非标准JSON格式数据时（如FormData），bodyParser会尝试解析请求体内容。对于一些特定的用例，如文件上传或者需要直接处理原始流数据的场景，你需要手动处理请求体，因此必须禁用默认的bodyParser。
当未禁用bodyParser时，Next.js会尝试自动解析进来的请求体数据为JSON或其他支持的格式。这在处理如FormData或是直接的文件流时会导致问题，因为bodyParser并不支持这些格式，从而导致后端API无法正确读取发送的数据。
通过设置api: { bodyParser: false }，你告诉Next.js不要自动解析请求体，这样你就可以在API路由中自己处理原始请求数据了。对于需要处理文件上传的API路由，这通常是必须的，因为你需要访问原始请求流来正确处理文件数据。
例如，在使用formidable或其他需要直接访问请求流的库处理文件上传时，禁用bodyParser是必要的，因为这些库会直接从HTTP请求中读取和解析多部分表单数据。
二、服务器部署
1. 部署上线
登录Vercel(https://vercel.com/)官网，直接用Github账号认证登录，这样Github上的工程可以直接导入到Vercel里面部署，如果在部署编译过程中出现异常，在本地工程修改错误之后Push代码到Github，之后Vercel就会自动触发新的编译部署，不用手动触发。
2. Vercel文件存储问题
在第一个版本实现中，因为是做图片转化工具网站，把转化之后的图片保存在了工程public目录下，并配置了一个定时任务，每隔一小时清空缓存超过1小时的图片。部署到Vercel上之后测试就出现异常了，输出错误：
EROFS: read-only file system, mkdir '/var/task/uploads'在Vercel这样的无服务器平台（Serverless Platform）上，文件系统是只读的，这意味着你不能直接在文件系统上写入或持久化数据。这是由于无服务器架构的无状态特性，每次函数执行都在一个干净的环境中进行。
解决方法如下：
1) 使用第三方存储服务
最常见的解决方案是使用如Amazon S3、Google Cloud Storage或Azure Blob Storage这样的云存储服务来存储文件。这些服务提供了API，允许你从应用程序上传、存储和检索文件。
2) 使用外部文件上传服务
另一个解决方案是使用专门的文件上传服务，如Cloudinary或Uploadcare。这些服务通常提供了易于使用的客户端库，可以直接集成到你的Web应用中，并处理文件的上传、存储和管理。
3) 临时文件存储
如果你需要临时存储文件，例如为了处理后立即删除，可以考虑使用如/tmp目录这样的临时空间。但请注意，在Vercel上，/tmp目录中的文件在函数执行结束后不保证被保留，且每次函数调用时可用的磁盘空间是有限的。
这边根据个人使用情况选择了方案2，使用Cloudinary(https://cloudinary.com/)或Uploadcare，对比了两者存储方案，Cloudinary更优，Cloudinary免费版本每个月有25个Credit的用量，每个Credit包含如下套餐内容，也就是每个月有25GB的图片存储空间用量：
而Uploadcare相比之下逊色很多，免费版本每个月只有10000次接口调用量（这个调用不管是查询还是上传文件之类都计算在内），5GB的流量和1GB的存储空间。看了tinypng.com转化之后的图片下载路径，也是使用Cloudinary来存储的，所以选Cloudinary没错。
在解决图片的存储问题之后，考虑到存储空间的限制，还需要配置一个定时任务，每隔一小时定时清理Cloudinary上存储超过1小时的图片。
三、域名和解析
1. 域名取名
域名使用Google keyword planner (https://ads.google.com/aw/keywordplanner/home)做关键词调研，选择流量大，竞争度低的关键词拼接起来做网站的域名：
输入关键词之后，在右上角下载关键词数据分析Excel表格，查看更详细的数据。
这边对于关键词webp to jpg，前面两个的关键词的搜索量都很高，而且竞争度都很低，那么可以使用webptojpg.com 或 webpformattojpg.com 作为域名，到域名服务方案商上查看对应关键词的域名是否已注册，如果都被注册了可以考虑使用webp-to-jpg.com这样的域名。
2. 域名解析配置
在域名申请到之后配置到Vercel，Vercel给每个项目都分配了一个<项目名.vercel.app>的域名，在正式域名配置好之后，把这个域名用301永久重定向到你的正式域名。
这边添加域名之后在 www.domain.com 有cname信息，domain.com有A记录信息，这边并不建议直接配置到域名解析的地方，而是把came和A记录配置到Cloudflare(https://www.cloudflare.com/)，用Cloudflare去包一层，去做一些DDos防护和CDN加速。
在域名配置的地方，把下面三个模块的每个配置项都选择打开即可：
而在域名托管的地方，把域名DNS解析到Cloudflare：
sharon.ns.cloudflare.com
decker.ns.cloudflare.com在上面都配置完毕之后，如果碰到在浏览器里面打开网站：提示网站因为重定向次数过多无法打开网站的，大概率是Cloudflare里面的SSL/TLS配置出错了，这边检查下是否变成了Flexible，要配置成Full才是正确的。
四、数据监控
配置Google Analytics来分析网站的访客数据，可查看每天的访问量，访问用户所在的区域等数据，便于后续分析改进网站。
配置Google Search Console分析Google搜索引擎的点击表现数据，还有网站索引情况等，为后续的优化处理做一个参考。
五、最后
以上就是我在开发图片转化工具碰到的问题记录，在开发完Webp转Jpg的工具之后，再复制了三个同类的网站，包括Webp转Png，Png转Webp，Jpg转Webp，因为处理逻辑都是相似的，可以复用大量的逻辑，给每个转化工具都单独申请了一个域名，方便做SEO的排名，接着在每个网站中同时接入其他几个图片转化的Tab入口。
以下是四个网站的入口，访问其中一个也可以访问其他几个。（2024/9/25 更新后所有的转化功能都集成到jpg2webp.com，其他几个网址都做了全站重定向到jpg2webp.com域名）。
- Webp转Jpg
(https://webpformattojpg.com/) - Webp转Png
(https://webpconverttopng.com) - Png转Webp
(https://convertpngtowebp.com) - Jpg转Webp (https://jpg2webp.com)
总的来讲是个不错的尝试，可以学下Next.js的开发和网站的部署，之前做英文评测内容站点是直接使用WordPress模版，很少涉及到开发的内容，英文内容站的后期运维工作更重，需要不断更新原创内容，做外链把排名做上去，而工具网站的维护成本比较低，除非做技术替换的改版。做工具网站也是不错的一个获取流量的渠道，后续看下网站整体的数据情况再做一个分享。
转载请注明出处：陈文管的博客 – 使用ChatGPT开发Next.js图片转化工具网站
扫码或搜索：文呓
微信公众号 扫一扫关注