Skip to main content

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

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:

    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:

    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:

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