How to Build a Next.js 15 AI Content Generator with Gemini AI

The web development landscape in 2026 is no longer just about displaying data; it is about generating it. With the release of Next.js 15, the barrier between standard web apps and AI-driven platforms has completely vanished.

If you are a developer looking to stay ahead of the curve, integrating Google Gemini AI into your Next.js stack is a superpower. In this guide, we will build a professional-grade AI Content Generator that can draft blog posts, social media captions, or technical documentation in seconds.

Why Next.js 15 and Gemini AI?

Before we dive into the code, let’s look at why this specific stack is the industry standard for 2026:

1. Next.js 15 Server Actions: No need for complex API routes. You can handle AI logic directly on the server with enhanced security.

2. Google Gemini 1.5 Pro/Flash: Gemini offers a massive context window and is significantly more cost-effective for developers compared to other models.

3. Speed & SEO: Using Next.js ensures your generated content pages load instantly, which is vital for maintaining a 100/100 PageSpeed score.

Prerequisites

To follow this tutorial, you will need:

• Node.js 20+ installed.

• A basic understanding of TypeScript and Tailwind CSS.

• A Google AI Studio API Key (Get it free from Google AI Studio).

Step 1: Initialize Your Next.js 15 Project

Open your terminal and run the following command to create a fresh project:

Bash

npx create-next-app@latest ai-content-gen --typescript --tailwind --eslint

Once installed, navigate to the folder and install the Google Generative AI SDK:

Bash

npm install @google/generative-ai

Step 2: Configure Environment Variables

Create a .env.local file in your root directory. This keeps your API key secure and prevents it from leaking to the client side.

Code snippet

GEMINI_API_KEY=your_actual_api_key_here

Step 3: Creating the AI Server Action

In Next.js 15, Server Actions are the preferred way to handle sensitive operations like AI prompting. Create a folder named app/actions and add a file called generate.ts.

TypeScript

"use server";

import { GoogleGenerativeAI } from "@google/generative-ai";

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY!);

export async function generateContent(prompt: string) {
  try {
    const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
    const result = await model.generateContent(prompt);
    const response = await result.response;
    return { success: true, text: response.text() };
  } catch (error) {
    console.error("AI Generation Error:", error);
    return { success: false, text: "Failed to generate content. Please try again." };
  }
}

Step 4: Building the Modern UI

Now, let’s build a clean, responsive interface in app/page.tsx. We will use a simple form to capture the user's topic and display the AI result.

TypeScript

"use client";
import { useState } from "react";
import { generateContent } from "./actions/generate";

export default function AIApp() {
  const [input, setInput] = useState("");
  const [output, setOutput] = useState("");
  const [loading, setLoading] = useState(false);

  const handleGenerate = async () => {
    setLoading(true);
    const result = await generateContent(`Write a professional blog post about: ${input}`);
    setOutput(result.text);
    setLoading(false);
  };

  return (
    <main className="min-h-screen bg-gray-50 p-8">
      <div className="max-w-3xl mx-auto space-y-6">
        <h1 className="text-4xl font-bold text-gray-900">Next.js 15 AI Writer</h1>
        
        <textarea 
          className="w-full p-4 border rounded-xl shadow-sm text-black"
          placeholder="Enter a topic (e.g., The future of Saudi Tech)..."
          rows={4}
          onChange={(e) => setInput(e.target.value)}
        />

        <button 
          onClick={handleGenerate}
          disabled={loading}
          className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 disabled:bg-gray-400 transition"
        >
          {loading ? "Generating..." : "Generate Content"}
        </button>

        {output && (
          <div className="mt-8 p-6 bg-white border rounded-xl shadow-md prose max-w-none text-gray-800">
            <h2 className="text-xl font-semibold mb-4 text-blue-600">Generated Result:</h2>
            <div className="whitespace-pre-wrap">{output}</div>
          </div>
        )}
      </div>
    </main>
  );
}

Step 5: Professional Tips for AI Content Generation

Building the tool is only half the battle. To make it truly "professional," consider these advanced strategies:

1. System Prompting

Don't just send the user's input. Wrap it in a system prompt to ensure the AI follows your blog's tone. For example:

"You are an expert technical writer for Wisemixmedia. Write an SEO-optimized blog post in a friendly yet professional tone..."

2. Error Handling & Rate Limiting

Gemini’s free tier has limits. Implement basic error handling to inform users when the quota is exceeded.

3. Caching with Prisma

If multiple users search for the same topic, don't call the API again. Check your PostgreSQL database via Prisma first. If the content exists, serve it from the database to save costs and time.

Conclusion

Integrating Next.js 15 and Gemini AI is the ultimate way to scale content production and build interactive tools. Whether you are building a tool for personal use or a full-scale SaaS, this setup provides the speed, security, and scalability required in 2026.

By following this guide, you’ve moved beyond simple web development and entered the world of AI Engineering.