How to use Stepper in Nextjs and configuring events for client component
Background:
I am building a client application in NextJs with {output: 'export'} config. Using Stepper component in a class component and using this class component in my page by dynamic import to avoid "reference error window is not defined". Using Tailwind 9.0.4 version, and built on top of starter kit for nextjs provided by metronic on github.
Copied stepper code from this link:
https://keenthemes.com/metronic/tailwind/docs/components/stepper
Question:
First guide with some example how to correctly use Stepper component or any other component in the nextjs. How to configure the component events and calling component methods like stepper.go(3) etc.
Problem:
If i open another page url of my web app, and navigate to this page with stepper, first issue is its showing back button, and second issue is clicking Next button do not work. Whereas if i open the url of the page with stepper directly then it works.
Replies (1)
Hi,
Sorry for the late reply.
The stepper component should, by default, start on the first page with the back button hidden. Our components are globally initialized in the file located at metronic-tailwind-html-integration/metronic-tailwind-next/src/components/GlobalInit.tsx. Please ensure that this initialization file exists and KTComponent.init(); get triggered.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
