Build Beautiful Product Tours in Next.js with nextjs-tour

در دنیای امروز، فقط طراحی زیبا کافی نیست؛ کاربران باید بتوانند راحت و سریع با اپلیکیشن شما آشنا شوند. یکی از بهترین روش‌ها برای این کار، ساخت تور آموزشی یا Onboarding Tour است.

به همین دلیل پکیج nextjs-tour را توسعه دادم — یک سیستم تور و راهنمای کاربر مخصوص فریم‌ورک Next.js، با طراحی مدرن و قابلیت شخصی‌سازی بالا.

✨ معرفی پکیج Next.js Tour

پکیج Next.js Tour به شما کمک می‌کند تا بخش‌های مختلف اپ خود را با جلوه‌های جذاب و تعاملی به کاربران نشان دهید.

ویژگی‌ها:

🎯 افکت تمرکز (Spotlight) برای نمایش المان‌های خاص
🎨 پشتیبانی از ۱۳ موقعیت مختلف برای نمایش متن
🎬 پشتیبانی از انیمیشن‌های Lottie در پایان تور
📱 طراحی واکنش‌گرا برای موبایل و دسکتاپ
⚡ پشتیبانی کامل از TypeScript
🎪 انیمیشن‌های روان با Framer Motion
💾 ذخیره وضعیت تور در localStorage
🔧 قابلیت شخصی‌سازی کامل رنگ‌ها، تم و رفتار

🚀 شروع سریع

نصب پکیج:

npm install nextjs-tour
# یا
yarn add nextjs-tour

پکیج‌های ضروری:

npm install react react-dom next framer-motion

اختیاری (برای انیمیشن‌ها):

npm install lottie-react

اضافه کردن استایل‌ها

در فایل layout.tsx یا globals.css:

import "nextjs-tour/styles.css"

افزودن Provider

import { TourProvider } from "nextjs-tour"

export default function RootLayout({ children }) {
  return (
    <html lang="fa">
      <body>
        <TourProvider>{children}</TourProvider>
      </body>
    </html>
  )
}

افزودن Overlay سراسری

<TourProvider lottieAnimationUrl="/animations/celebration.json">
  {children}
  <GlobalTourOverlay />
</TourProvider>

تعریف مراحل تور

export const dashboardTourSteps = [
  {
    id: "welcome",
    target: ".welcome-section",
    title: "خوش آمدید 🎉",
    content: "بیایید یک تور سریع از داشبورد بگیریم.",
    position: "center",
    showSkip: true
  },
  {
    id: "navigation",
    target: "[data-tour='navigation']",
    title: "منوی ناوبری 📱",
    content: "از این منو برای رفتن به بخش‌های مختلف استفاده کنید.",
    position: "right"
  }
]

دکمه شروع تور

import { useTourContext } from "nextjs-tour"
import { dashboardTourSteps } from "../lib/tour-config"

export function TourButton() {
  const { startTour } = useTourContext()
  return <button onClick={() => startTour(dashboardTourSteps, "dashboard-tour")}>شروع تور</button>
}

🧠 ویژگی‌های پیشرفته

تنظیم انیمیشن Lottie اختصاصی
تعیین رنگ و تم دلخواه
استفاده از هوک useTour برای کنترل تور از هر کامپوننت

💡 نتیجه‌گیری

با استفاده از nextjs-tour، می‌توانید تجربه کاربری اپ خود را به سطح بالاتری ببرید.
دیگر نیازی به پلاگین‌های سنگین یا کدنویسی زیاد نیست — فقط چند خط کد و یک تور جذاب برای کاربران شما آماده است.

👉 دریافت از NPM:
🔗 https://www.npmjs.com/package/nextjs-tour