Frontend · Gemini API and Google AI Studio
Next.js 16 App Router Gemini System Prompt
System instructions for Google AI Studio and the Gemini API, for Next.js 16 App Router work.
- Path
- prompts/gemini-system-instructions.json
- Loads
- Sent per request
- Format
- JSON system instruction
- Used by
- Gemini API and Google AI Studio
What this file tells the agent
A system instruction in Google AI Studio or the Gemini API gives the model the Next.js 16 App Router role, constraints and output format before every request.
- Enforce React Server Components (RSC) by default; restrict 'use client' strictly to interactive leaf components.
- Mutate state exclusively via Server Actions with Zod safeParse validation.
- Await the async request APIs (cookies(), headers(), params, searchParams); Next.js 16 removed the sync forms.
- Avoid pages/ directory conventions or legacy getServerSideProps.
- Colocate loading.tsx and error.tsx for dynamic route segments.
Code to avoid, and what to write instead
The rule steers the agent away from the left and toward the right.
"use client";
export function SaveItem() {
const submit = async (e: any) => {
e.preventDefault();
await fetch("/api/items", { method: "POST", body: JSON.stringify({ title: "Test" }) });
};
return <button onClick={submit}>Save</button>;
}"use server";
import { z } from "zod";
import { db } from "@/lib/db";
const Schema = z.object({ title: z.string().min(3) });
export async function createItem(formData: FormData) {
const parsed = Schema.safeParse(Object.fromEntries(formData));
if (!parsed.success) return { ok: false, errors: parsed.error.flatten().fieldErrors };
await db.item.create({ data: parsed.data });
return { ok: true };
}Install it in one command
- 01
Go to your project root
The file goes at prompts/gemini-system-instructions.json, relative to the root.
- 02
Download the file
Run the command on the right. It downloads this preset and writes the file.
- 03
Make sure it gets used
Nothing loads this file automatically. Pass it as the system instruction in your Gemini API call, or paste it into Google AI Studio.
$ mkdir -p "prompts" && curl -fsSL "https://www.devscratchpad.tech/api/raw/gemini-prompts/nextjs-16" -o "prompts/gemini-system-instructions.json"
writes prompts/gemini-system-instructions.json
prompts/gemini-system-instructions.json
To write the file from your own code instead, use Read your code or Convert Legacy Rules in the editor above.
More for Next.js 16 App Router
Questions
- How do I use this prompt in Google AI Studio?
- Paste the text parts into the System instructions field in Google AI Studio, or load the JSON in code and pass it as the system instruction (system_instruction in REST, config.systemInstruction in the Google Gen AI SDK).
- Which Gemini models support these instructions?
- Current Gemini models in the Gemini API and Google AI Studio accept a system instruction. Check Google's model list for the one you use.