Implement a Sitecore form in a JSS Next.js app

Version: 19.x

After you have created a Sitecore form and added the form to a JSS app route in Sitecore, 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:

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:

    RequestResponse
    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:

    RequestResponse
    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:

    RequestResponse
        {
            source: '/api/jss/:path*',
            destination: `${jssConfig.sitecoreApiHost}/api/jss/:path*`
        },
  4. Start the JSS app in connected mode with jss start:connected.

Do you have some feedback for us?

If you have suggestions for improving this article,