> ## Documentation Index
> Fetch the complete documentation index at: https://docs.formizee.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Next.js

> Learn how to ingest your first submission using Next.js

### Prerequisites

To get the most out of this guide, you'll need to:

* [Create a Formizee account](https://dashboard.formizee.com)
* [Have a form created](/guides/create-your-first-form)

## 1. Create a Next.js project

<CodeGroup>
  ```bash pnpm theme={"system"}
  pnpm create-next-app@latest formizee-next-example
  ```

  ```bash npm theme={"system"}
  npx create-next-app@latest formizee-next-example
  ```

  ```bash bun theme={"system"}
  bun create-next-app@latest formizee-next-example
  ```

  ```bash yarn theme={"system"}
  yarn create-next-app@latest formizee-next-example
  ```
</CodeGroup>

## 2. Update the main page

Update the file under `src/app/page.tsx` with the next code

```tsx page.tsx {2} theme={"system"}
// Add here your Endpoint URL
const ENDPOINT_URL = "https://api.formizee.com/v1/f/enp_123456";

export default function Page() {
	return (
		<form method="post" action={ENDPOINT_URL}>
			<label htmlFor="name">
				Name
				<input id="name" autoComplete="name" name="name" />
			</label>
			<label htmlFor="email">
				Email
				<input id="email" autoComplete="email" name="email" />
			</label>
			<button>Submit</button>
		</form>
	);
}
```

## 3. Run in local

<CodeGroup>
  ```bash pnpm theme={"system"}
  pnpm run dev
  ```

  ```bash npm theme={"system"}
  npm run dev
  ```

  ```bash bun theme={"system"}
  bun run dev
  ```

  ```bash yarn theme={"system"}
  yarn run dev
  ```
</CodeGroup>

## 4. Try it yourself

<Card title="Formizee Next.js Example" icon="link" href="https://github.com/formizee/formizee-next-example">
  See the full source code
</Card>