「せっかく良い商品を作ったのに、うまく魅力を伝えられない…」
そんな悩みを解決するために、キャッチコピーや説明文を自動で考えてくれるWebアプリを作ってみました。

このアプリでは、ChatGPTの力を借りて、マーケティングの文章をサクッと生成できます。使ったのは、誰でも簡単にWebアプリが作れるNext.jsと、話題のOpenAIのAPIです。

エンジニアとしてこんな力が身につきます！
- APIの使い方が学べる：OpenAIのChatGPT APIとやりとりする方法がわかります
- Next.jsでのアプリ開発を体験できる：ページ構成やチャットUIの作り方も紹介
- 実用的なツールを作る面白さを実感できる：自分が作ったもので、誰かの仕事がラクになる！

アプリの内容は？
- 商品名と説明を入力するだけで、キャッチコピーと説明文を自動生成
- ターゲットや広告の場所も指定すれば、もっと効果的な文章に
- 会話形式のUIなので、使いながら文章をブラッシュアップできます

「実際に使えるアプリを作りながら、技術も学べる」そんな体験をしてみませんか？
この記事を通して、あなたも今日から“つくれるエンジニア”の仲間入りです！

ChatGPT&Next.jsでマーケティング支援アプリを作ろう

はじめに

マーケティング支援アプリの概要

生成AIアプリの需要

Next.jsセットアップ

OpenAIセットアップ

アプリ実装（準備編）

アプリ実装（実装編）

OpenAIに接続

アプリ実装（デプロイ編）

ボーナスレクチャー

nextjs

typescript

tailwindcss

openai

chatgpt

React・TypeScriptでTodoアプリを作成しよう

ケン吉

記事投稿コンテスト「TypeScriptでやってみた挑戦・学び・工夫」