Alex Enes Zorlu

NextStep — Lightweight onboarding library for nextjs and react apps

30
•
NextStep is an open-source library for Next.js (v1) and React (v2-beta), enabling interactive product tours with ease. Smooth Framer Motion animations which you can customize -Step-by-step onboarding tours -Event-triggered custom tours to boost engagement

Add a comment

Replies
Best
Alex Enes Zorlu
Maker
📌
Hi everyone! 👋 I built NextStep after struggling to find a good onboarding solution, especially one that can interact with forms, route during the onboarding process, handle viewports and event based. NextStep is easy to implement and looks gorgeous, because you can fully customize it. You can improve your user onboarding and engagement. With its seamless integration for Next.js and React, it simplifies creating interactive product tours. (The 2.0 beta introduces support for more React frameworks.) Smooth animations via Framer Motion (Motion) are customizable, making it even more versatile. Key benefits include: -Enhanced Onboarding: Guide users step-by-step right after signup to ensure they understand your product’s value immediately. -Interactive Help: Replace static help docs with dynamic, interactive tours for better user comprehension 📘. -Error Handling: Show users exactly how to resolve issues with custom tours, avoiding generic error toasts. -Event-Triggered Tours: Keep users on track by triggering contextual tours based on specific events 💡. It's a must-have for any app aiming to provide an engaging and intuitive user experience! Why is it better than other onboarding libraries? -You can route between pages during the tour -Default events are easier to implement with react frameworks -You can provide your custom card as a react component which fully customises how the tour looks like -It has builtin support for inside viewport tours -Very simple to use, lightweight -Fully customizable Framer Motion animations -Users can intereact with the forms and you can trigger onboarding events with user actions. I encourage you to try the demo, it is very efficient and fast.
Benjamin Anderson

This looks fantastic. How does the library perform in terms of impact on Next.js apps?

Alex Enes Zorlu

@benjamin_anderson3 it is very light, so no performance effect. It improves user experience significantly.

Charlotte Richardson

I love the smooth Framer Motion animations. Does NextStep allow for multi page tours or is it mainly focused on single page applications?

Alex Enes Zorlu

@charlotte_richardson1 yes, it allows multi page tours. You can see demo here

https://nextstepjs.com/demo

Grace Phillips

Huge congrats on launching NextStep @enes_zorlu

Is NextStep compatible with server side rendering (SSR) in Next.js

or is it primarily designed for client side interactions?

Alex Enes Zorlu

@grace_phillips1 you can use it on ssr pages, but card component itself needs to be client component as it has user interaction

Gabriel Mitchell

Step by step tours can significantly enhance engagement. Does it integrate smoothly with authentication flows or does it need extra setup for users who are logged in?

Alex Enes Zorlu

@gabriel_mitchell3 it is very easy to set it up and fire it whenever you need it. It does not automatically detect user signin, you need to fire it up.

Catalin Pit

Really cool stuff. I was happy when I randomly discovered it. Congrats and good luck with the launch!

Alex Enes Zorlu

@catalinmpit first ever supporter, I will never forget you mate!

Jonathan Hernandez

What’s the most innovative use case you’ve encountered with NextStep so far?

Alex Enes Zorlu

@jonathan_hernandez8 interactive tours instead of boring help docs

Madelyn Wright

Great concept but does NextStep provide options for users to dismiss tours or re trigger them only when needed?

Alex Enes Zorlu

@madelyn_wright yes it does. And you can turn this on and off.

Madison Scott

This is an excellent tool. Does it have support for multi-step modals?

Alex Enes Zorlu

@madison_scott1 yes it does. You can trigger nextstep with Modal next button as well. Just need to use the hook and call the function.

amrin

Congrats on the launch Alex

Alex Enes Zorlu

@coderamrin thanks Amrin! Appreciate it.

Roop Reddy

Loved it.. Does onboarding forms in pipeline?

Alex Enes Zorlu

@roopreddy thank you! Yes, you can also integrate this with onboarding forms.

Lucas Edwards

NextStep is very promising but how does it stack up against existing onboarding tools like Shepherd.js or Intro.js?

Alex Enes Zorlu

@lucas_edwards2 it has significant advantages to them.


They are great tools as well. nextstepjs got couple advantages.


-You can route between pages during the tour

-Default events are easier to implement with react frameworks

-You can provide your card react component which fully customises how the tour looks like

-It has builtin support for inside viewport tours

-Very simple to use, lightweight

-Nice customizable Framer Motion animations


These are the ones I can quickly list. Try the demo, it is very efficient and fast.


I could not use others because I wanted to use onboarding with forms and wanted to trigger tour changes with user actions. But you can do those with nextstepjs

Lucas Edwards

How flexible is the styling?

Alex Enes Zorlu

@lucas_edwards1  100% as you can use your custom card. See it here

https://nextstepjs.com/docs?tab=...

E F

Thanks for uploading! Amazing onboarding tool with great features!

Alex Enes Zorlu

@e_f5 thanks for the feedback!

Maryam Khan

Well done! Excited to see where this product goes next.

Mira

Looks fantastic Alex! Congrats on the launch :)

Alex Enes Zorlu

@miracodes thanks a lot Mira. Appreciate the support!