create sitecore jss form with nextjs in headless xm cloud

madhusudan dayal on 7/9/2023 7:55:26 AM

To Implement a Sitecore form in a JSS Next.js app i  followed the sitecore offical link Sitecore jss form 

I Created Component JssNextForm.tsx in jss App Component folder 

Like below code: 

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

I registered this component into Sitecore rendering as  a json rendering item and selected Rendering Contents  Resolvers  as Sitecore Forms Resolver  in layout service field and  also data source  location as Sitecore form.

I created simple form as Sitecore form, Name input field and a submit button.

I added Sitecore form rendering into page presentation details  added form data source and publish.

i started the jss app in connected mode. by runing command jss start:connected

 when i submit the form i am geting issue 

Unexpected token '<', "<!DOCTYPE "... is not valid JSON 

i followed the follwing articls to resolved this issue 

1. Sitecore jss form submit action with nextjs 

2. Sitecore Forms cannot be submitted if

we set the value of the serverSideRenderingEngineEditOnly app attribute to false

and also serverSideRenderingEngineEditOnly = false into Sitecore.JavaScriptServices.Apps.config in App_Config\Sitecore\JavaScriptServices.


we patch the HeadlessSiteAccess processor after TransferRoutedRequest. name nextjssform.config

i also tried other ways to resolve it,

my console error after form submit 

Kindly advice if you have faced and resolved the issues in headless xm cloud jss form with nextjs component, thanks in advance.

Check More Sitecore JSS or Sitecore Headless related articles:

Our Sitecore JSS Articles Click Here!

0 Comments on this post

Comments(0)||Login to Comments

InterServer Web Hosting and VPS
  • see more..