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, 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:
RequestResponsenpm 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:RequestResponseimport { 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);
NoteYou 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:RequestResponse{ source: '/api/jss/:path*', destination: `${jssConfig.sitecoreApiHost}/api/jss/:path*` },
-
Start the JSS app in connected mode with
jss start:connected
.