> ## Documentation Index > Fetch the complete documentation index at: https://novu-c5de82d9-docs-homepage-redesign.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Next.js > Get started with Novu Framework in a Next.js application 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 theme={null} 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 theme={null} 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) theme={null} export const { GET, POST, OPTIONS } = serve({ workflows: [myWorkflow] }); ``` ```typescript Pages Router (pages/api/novu.ts) theme={null} export default serve({ workflows: [testWorkflow] }); ``` **Add a Novu Secret Key Environment Variable** Add `NOVU_SECRET_KEY` environment variable to your `.env` ```bash theme={null} NOVU_SECRET_KEY= ``` **Create your workflow definition** Add a `novu` folder that will contain your workflow definitions ```tsx app/novu/workflows.ts theme={null} 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 theme={null} 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 theme={null} 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 theme={null} npx novu@latest dev --port ``` ## Test your endpoint Test your workflow by triggering it from the Local Studio or using the Novu API: ```bash theme={null} curl -X POST https://api.novu.co/v1/events/trigger \ -H 'Authorization: ApiKey YOUR_API_KEY' \ -H 'Content-Type: application/json' \ -d '{ "name": "my-workflow", "to": "subscriber-id", "payload": {} }' ``` You should see the notification being processed in your Local Studio. ## Deploy your application Deploy your application to your preferred hosting provider. Make sure the `/api/novu` endpoint is accessible from the internet. For local development and testing, you can use tools like ngrok to expose your local server to the internet. Now that you have your first workflow running, you can: * Learn about [Workflow Controls](/framework/controls) to expose no-code editing capabilities * Explore different [Channel Steps](/framework/email-channel) like Email, SMS, Push, and more * Set up [Action Steps](/framework/digest) like Delay and Digest * Check out our [React Email integration](/framework/content/react-email) for building beautiful email templates