DEV Community

chinaabin
chinaabin

Posted on • Originally published at tutorial.gogoai.xin

Build an AI Changelog Generator SaaS with Next.js & GPT

#nextjs #openai #gpt #saas

Build an AI Changelog Generator SaaS with Next.js & GPT

Writing changelogs is tedious. Developers spend hours summarizing git commits into user-friendly release notes that nobody enjoys writing. In this tutorial, you'll build a SaaS application that automatically transforms raw git commits into polished, categorized changelogs using Next.js 14 and the OpenAI GPT API.

By the end, you'll have a deployable product that accepts a GitHub repository URL, fetches recent commits, and generates beautiful changelogs with a single click. This is a real-world project you can monetize or add to your portfolio.

What You'll Learn

  • How to build a full-stack SaaS app with Next.js 14 App Router
  • How to integrate the GitHub API to fetch commit histories
  • How to use OpenAI's GPT API to generate structured changelogs
  • How to build a polished UI with Tailwind CSS
  • How to add authentication and rate limiting

Prerequisites You'll Need

Before starting, make sure you have the following ready:

  • Node.js 18+ installed on your machine
  • A GitHub account and a Personal Access Token (PAT)
  • An OpenAI API key with GPT-4 or GPT-3.5-turbo access
  • Basic knowledge of React, TypeScript, and REST APIs
  • A package manager like npm or pnpm

You should also have a text editor like VS Code and a terminal ready. Familiarity with Next.js is helpful but not strictly required — we'll explain every step.

Setting Up Your Next.js Project

Start by scaffolding a new Next.js 14 project with TypeScript and Tailwind CSS. Open your terminal and run the following command:

npx create-next-app@latest changelog-ai --typescript --tailwind --app --src-dir
cd changelog-ai
Enter fullscreen mode Exit fullscreen mode

Next, install the dependencies you'll need for this project:

npm install openai octokit zod react-hot-toast lucide-react
npm install -D @types/node
Enter fullscreen mode Exit fullscreen mode

Here's what each package does:

  • openai — Official OpenAI SDK for calling GPT models
  • octokit — GitHub's official REST API client
  • zod — Schema validation for API inputs
  • react-hot-toast — Toast notifications for the UI
  • lucide-react — Icon library for a polished interface

Create a .env.local file in the project root to store your secrets:

OPENAI_API_KEY=sk-your-openai-key-here
GITHUB_TOKEN=ghp_your-github-token-here
NEXT_PUBLIC_APP_URL=http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

Never commit this file to version control. Verify .env.local is listed in your .gitignore.

Building the GitHub Commit Fetcher

The core of your app starts with fetching commits from a GitHub repository. Create a utility file at src/lib/github.ts that handles all GitHub API interactions.


typescript
// src/lib/github.ts
import { Octokit } from 'octokit';

const octokit = new Octokit({
  auth: process.env.GITHUB_TOKEN,
});

export interface CommitData {
  sha: string;
  message: string;
  author: string;
  date: string;
}

export async function fetchCommits(
  owner: string,
  repo: s

---

📖 **[Read the full tutorial on AI Tutorials →](https://tutorial.gogoai.xin/tutorial/build-an-ai-changelog-generator-saas-with-nextjs-gpt)**

🌐 **GogoAI Network** — Your AI Learning Hub:
- 📰 [AI News](https://www.gogoai.xin) — Latest AI industry news & analysis
- 📚 [AI Tutorials](https://tutorial.gogoai.xin) — 2200+ free step-by-step guides
- 🛠️ [AI Tool Navigator](https://aitoolnav.gogoai.xin) — Discover 160+ AI tools
- 💬 [AI Chat](https://chat.gogoai.xin) — Chat with multiple AI models for free

📚 **NEW: The Ultimate AI Tools Directory 2026** — Get instant access to **172+ curated AI tools** across 12 categories with direct links, pricing, and use cases. Save hours of research!
👉 **[Get the eBook for $9.99 →](https://tutorial.gogoai.xin/ebook)**
Enter fullscreen mode Exit fullscreen mode

Top comments (0)