Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

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.


user
Qamer Farooq 1 year ago
Next.js Tailwind 4
1 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

user
Lauris Stepanovs Author 1 year ago

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


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(