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

This procedure assumes you have followed the procedures to create a Sitecore form and add the form to a JSS app route in Sitecore. The procedure guides you through implementing a JSS form component in your JSS Next.js application.

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

To implement a Sitecore form in a JSS Next.js application:

  1. Install the necessary packages:

    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={sitecoreApiHost}
          sitecoreApiKey={sitecoreApiKey}
          onRedirect={(url) => router.push(url)}
        />
      );
    
    export default withRouter(JssNextForm);
  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.