Implement a Sitecore form in a JSS Next.js app

Version:

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:

You must have SSL enabled for your environment or disabled secure cookies in your Sitecore instance.
Your Next.js JSS app uses the REST Layout Service.
You are server-side rendering the route displaying the form using an implementation of the function GetServerSideProps.

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

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

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 { NextRouter, withRouter } from 'next/router';
import { sitecoreApiHost, sitecoreApiKey } from 'temp/config';

const JssNextForm = ({ fields, router }: { fields: any; router: NextRouter }) => {
  return (
    <Form
      language={router.locale}
      form={fields}
      sitecoreApiHost={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.

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*`
    },

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

If you have suggestions for improving this article, let us know!