# Next.js Framework Quickstart Guide (/framework/quickstart/nextjs)
Get started with Novu Framework in a Next.js application
import DeployApp from '@/snippets/quickstart/deploy.mdx';
import NextStepsStep from '@/snippets/quickstart/next-steps.mdx';
import { PackagesStep } from '@/snippets/quickstart/packages.tsx';
import { SecretStep } from '@/snippets/quickstart/secret.tsx';
import { StudioStep } from '@/snippets/quickstart/studio.tsx';
import { TestStep } from '@/snippets/quickstart/test.tsx';
import { WorkflowStep } from '@/snippets/quickstart/workflow.tsx';
import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
In this guide, we will add a Novu [Bridge Endpoint](/framework/endpoint) to a Next.js application and send our first test workflow.
This link can be copied right from the onboarding guide on the Novu Studio or can always be copied from the [API Keys](https://dashboard.novu.co/api-keys) page on the Novu Dashboard.
```bash
npx novu init --secret-key=
```
The sample application will create an `.env` file containing the `NOVU_SECRET_KEY` environment variable required
for securing your endpoint. And a sample workflow demonstrating the flexibility of Novu using Step Controls.
**Install required packages**
```bash
npm install @novu/framework @react-email/components react-email zod zod-to-json-schema
```
This will install
* **`@novu/framework`** SDK Package
* **React Email** (Recommended) - For writing your email templates with React
* **Zod** (Recommended) - For end-to-end type safety for your Payload and Step Controls
**Add a Novu API Endpointt**
```typescript App Router (app/api/novu/route.ts)
import { serve } from "@novu/framework/next";
import { myWorkflow } from "../../novu/workflows";
export const { GET, POST, OPTIONS } = serve({ workflows: [myWorkflow] });
```
```typescript Pages Router (pages/api/novu.ts)
import { serve } from '@novu/framework/next';
import { testWorkflow } from '../../novu/workflows';
export default serve({ workflows: [testWorkflow] });
```
**Add a Novu Secret Key Environment Variable**
Add `NOVU_SECRET_KEY` environment variable to your `.env`
```bash
NOVU_SECRET_KEY=
```
**Create your workflow definition**
Add a `novu` folder that will contain your workflow definitions
```tsx app/novu/workflows.ts
import { workflow } from '@novu/framework';
import { renderEmail } from './emails/test-email';
import { z } from 'zod';
export const testWorkflow = workflow('test-workflow', async ({ step, payload }) => {
await step.email('send-email', async (controls) => {
return {
subject: controls.subject,
body: renderEmail(payload.userName),
};
},
{
controlSchema: z.object({
subject: z.string().default('A Successful Test on Novu from {{userName}}'),
}),
});
}, {
payloadSchema: z.object({
userName: z.string().default('John Doe'),
}),
});
```
**Create your React Email Template (Optional)**
Add a new email template
```typescript app/novu/emails/test-email.tsx
import {
Body,
Container,
Head,
Html,
render,
} from '@react-email/components';
import * as React from "react";
interface TestEmailProps {
name: string
}
export const TestEmailTemplate = ({ name }: TestEmailProps) => {
return (
Hello {name} welcome to your first React E-mail template!
);
};
export default TestEmailTemplate;
export function renderEmail(name: string) {
return render();
}
```
## Start your application
To start your boilerplate Next.js server with the Novu Endpoint configured, run the following command:
```tsx
cd my-novu-app && npm run dev
```
The sample application will start on [`https://localhost:4000`](https://localhost:4000) and your novu endpoint will be exposed at `/api/novu` served by the Next.js API.
If your Next.js application is running on other than `4000` port, restart the `novu dev` command with the port:
```tsx
npx novu@latest dev --port
```
## Test your endpoint
## Deploy your application