# Frontend and backend

> The frontend is the part of your app that runs inside each visitor's browser (screens, buttons and forms), while the backend runs on a secure server where your app checks logins, talks to the database, uses secret keys, and calls AI models.

## Analogy

Think of a restaurant: the frontend is the dining room where guests read the menu, sit at tables, and place orders. The backend is the kitchen behind closed doors, where the recipes, the safe, the pantry, and the stoves live.

## How it works

Every web app has two sides. The frontend runs on the visitor's computer or phone inside their web browser: it draws the layout, responds to clicks, and shows friendly messages. Because it runs on the visitor's device, anyone can inspect the code and data sent to the frontend.

The backend runs on a computer you control—localhost while you test, and vercel when your app is online. Because visitors cannot peek inside the server, the backend is the only safe place to keep a secret (such as an api-key), read or write your database, and call an AI model.

For the same reason, your backend never trusts a request just because a button was hidden in the frontend. Every backend action (called a Server Action or Route Handler in Next.js) checks the user's login session and permissions first, validates the input data with a schema, and only then touches the database.

With the Next.js framework (App Router), your frontend and backend live together in the same repo folder. You don't need two separate projects; your coding-agent marks which files run on the server and which ones run in the browser, and makes sure no secret variable ever starts with `NEXT_PUBLIC_`.

## In your project

When you write your spec, you don't have to design server endpoints yourself. You simply describe what visitors see and what the app remembers or computes, and your agent places UI components in the frontend and keeps all logins, database queries, and AI calls strictly in the backend.

## Copy for your agent

```text
Show me which parts of my app run in the browser (frontend) and which run on the server (backend), and verify that no secrets or AI calls are exposed to the client.
```

---
Source: [Agentic Makers](https://agenticmakers.app/en/learn/frontend-and-backend) · License: CC BY 4.0