---
title: "Implement a Sitecore form in a JSS Next.js app"
slug: "implement-a-sitecore-form-in-a-jss-next-js-app"
abstract: "Implement the front-end component for a Sitecore form in a Next.js JSS application"
---
# Implement a Sitecore form in a JSS Next.js app

After you have [created a Sitecore form and added the form to a JSS app route in Sitecore](https://doc.sitecore.com/xp/en/developers/hd/20/sitecore-headless-development/walkthrough--using-a-sitecore-form-in-jss-applications.html "Walkthrough: Using a Sitecore form in JSS applications"), you can implement a JSS Form component that renders the Sitecore Form in your JSS application.

Using Sitecore Forms in JSS apps requires functioning session cookies. For this purpose:

- [You must have SSL enabled for your environment or disabled secure cookies in your Sitecore instance](https://doc.sitecore.com/xp/en/developers/hd/20/sitecore-headless-development/secure-cookies-and-local-jss-app-development.html "Secure cookies and local JSS app development").
- Your Next.js JSS app uses the [REST Layout Service](https://doc.sitecore.com/xp/en/developers/hd/20/sitecore-headless-development/jss-layout-api.html "JSS Layout API").
- You are [server-side rendering the route](https://doc.sitecore.com/xp/en/developers/hd/20/sitecore-headless-development/prerendering-methods-and-data-fetching-strategies-in-jss-next-js-apps.html "Prerendering methods and data fetching strategies in JSS Next.js apps") displaying the form using an implementation of the function `GetServerSideProps`.

To render a Sitecore Form component in a JSS Next.js application:

1. In the root directory of your JSS application, install the necessary packages by running the following command:

    ```text
    npm install @sitecore-jss/sitecore-jss-forms @sitecore-jss/sitecore-jss-react-forms
    ```

2. In the `src` directory of the rendering app, in a component file, for example, `src/components/JssNextForm.tsx`, implement your form component:

    ```javascript
    import { Form } from '@sitecore-jss/sitecore-jss-react-forms';
    import React from 'react';
    import { withRouter } from 'next/router';
    import { sitecoreApiHost, sitecoreApiKey } from '../temp/config';

    const JssNextForm = ({ fields, router }: any) => (
        <Form
          form={fields}
          sitecoreApiHost={''}
          sitecoreApiKey={sitecoreApiKey}
          onRedirect={(url) => router.push(url)}
        />
      );

    export default withRouter(JssNextForm);
    ```

    > [!note]
    > You must set `sitecoreApiHost` to an *empty string*, for example, `sitecoreApiHost={''}`, to send requests to the Next.js server. Otherwise, the rewrite you set up in the following step does not work as expected.

3. In the `next.config.base.js` file, add the following rewrite definition to the connected mode rewrites to prevent CORS and 404 errors:

    ```csharp
    {
            source: '/api/jss/:path*',
            destination: `${jssConfig.sitecoreApiHost}/api/jss/:path*`
        },
    ```

4. Start the JSS app in connected mode with `jss start:connected`.