آموزش گام‌به‌گام ساخت یک صفحه فرود واکنش‌گرا با Next.js

از صفر تا صد یک صفحه فرود واقعی

صفحه فرود (Landing Page) یکی از مهمترین ابزارهای دیجیتال مارکتینگ است که بهطور خاص برای تبدیل بازدیدکنندگان به مشتری طراحی میشود. در این مقاله جامع، به شما نشان خواهیم داد که چگونه با استفاده از Next.js یک صفحه فرود حرفهای، واکنشگرا و بهینهشده برای سئو ایجاد کنید. این آموزش برای توسعهدهندگان مبتدی و متوسط طراحی شده و تمام مراحل از راهاندازی اولیه تا دیپلوی نهایی را پوشش میدهد.

راهاندازی پروژه Next.js

ابتدا مطمئن شوید Node.js روی سیستم شما نصب است. سپس ترمینال خود را باز کرده و دستورات زیر را اجرا کنید:

```

npx create-next-app@latest landing-page

cd landing-page

npm run dev

این دستورات یک پروژه Next.js جدید ایجاد کرده و سرور توسعه را راهمیاندازد. حالا میتوانید با مراجعه به http://localhost:3000 برنامه خود را مشاهده کنید.


طراحی هدر و هیرو (Hero Section) با CTA

هدر و بخش هیرو اولین عناصری هستند که کاربران مشاهده میکنند. یک هیرو مؤثر باید واضح، جذاب و دارای call-to-action (CTA) مشخص باشد.

```jsx

// components/Hero.js

import { motion } from 'framer-motion';


export default function Hero() {

  return (

    <section className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100">

      <div className="container mx-auto px-4 text-center">

        <motion.h1 

          initial={{ opacity: 0, y: 20 }}

          animate={{ opacity: 1, y: 0 }}

          transition={{ duration: 0.5 }}

          className="text-5xl md:text-6xl font-bold text-gray-800 mb-6"

        >

          محصول شما اینجا متحول میشود

        </motion.h1>

        <motion.p 

          initial={{ opacity: 0, y: 20 }}

          animate={{ opacity: 1, y: 0 }}

          transition={{ duration: 0.5, delay: 0.2 }}

          className="text-xl text-gray-600 mb-10 max-w-2xl mx-auto"

        >

          توضیح مختصر و جذاب درباره محصول یا خدمت شما که در کاربر انگیزه ایجاد کند.

        </motion.p>

        <motion.button 

          initial={{ opacity: 0, scale: 0.8 }}

          animate={{ opacity: 1, scale: 1 }}

          transition={{ duration: 0.5, delay: 0.4 }}

          className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-lg text-lg transition-colors"

        >

          شروع کنید

        </motion.button>

      </div>

    </section>

  );

}

```


ساخت بخش ویژگیها (Features) با آیکون

بخش ویژگیها مزایای محصول یا خدمت شما را به صورت مختصر و مؤثر نمایش میدهد.

```jsx

// components/Features.js

import { FiTruck, FiShield, FiHeadphones } from 'react-icons/fi';


export default function Features() {

  const features = [

    {

      icon: <FiTruck className="text-3xl text-indigo-600" />,

      title: "تحویل سریع",

      description: "محصولات را در کمترین زمان ممکن دریافت کنید"

    },

    {

      icon: <FiShield className="text-3xl text-indigo-600" />,

      title: "ضمانت کیفیت",

      description: "کیفیت خدمات ما را تضمین میکنیم"

    },

    {

      icon: <FiHeadphones className="text-3xl text-indigo-600" />,

      title: "پشتیبانی 24/7",

      description: "همیشه در کنار شما هستیم"

    }

  ];


  return (

    <section className="py-20 bg-white">

      <div className="container mx-auto px-4">

        <h2 className="text-3xl font-bold text-center text-gray-800 mb-12">چرا ما را انتخاب کنید؟</h2>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">

          {features.map((feature, index) => (

            <div key={index} className="flex flex-col items-center text-center p-6 bg-gray-50 rounded-lg shadow-sm hover:shadow-md transition-shadow">

              <div className="mb-4 p-3 bg-indigo-50 rounded-full">

                {feature.icon}

              </div>

              <h3 className="text-xl font-semibold mb-2 text-gray-800">{feature.title}</h3>

              <p className="text-gray-600">{feature.description}</p>

            </div>

          ))}

        </div>

      </div>

    </section>

  );

}

```

اضافه کردن بخش نظرات (Testimonials)

نظرات مشتریان واقعی اعتماد بازدیدکنندگان را افزایش میدهد.

```jsx

// components/Testimonials.js

export default function Testimonials() {

  const testimonials = [

    {

      name: "علی محمدی",

      role: "مدیر عامل شرکت نمونه",

      content: "با استفاده از این سرویس، فروش ما ۴۰٪ افزایش یافت. واقعاً متحول کننده بود!",

      avatar: "/avatar1.jpg"

    },

    {

      name: "فاطمه احمدی",

      role: "بازاریاب دیجیتال",

      content: "پشتیبانی عالی و خدمات باکیفیت. به همه توصیه میکنم.",

      avatar: "/avatar2.jpg"

    }

  ];


  return (

    <section className="py-20 bg-gray-50">

      <div className="container mx-auto px-4">

        <h2 className="text-3xl font-bold text-center text-gray-800 mb-12">نظرات مشتریان ما</h2>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">

          {testimonials.map((testimonial, index) => (

            <div key={index} className="bg-white p-8 rounded-lg shadow-sm">

              <p className="text-gray-600 mb-6 italic">"{testimonial.content}"</p>

              <div className="flex items-center">

                <div className="w-12 h-12 bg-gray-300 rounded-full mr-4"></div>

                <div>

                  <h4 className="font-semibold text-gray-800">{testimonial.name}</h4>

                  <p className="text-gray-600 text-sm">{testimonial.role}</p>

                </div>

              </div>

            </div>

          ))}

        </div>

      </div>

    </section>

  );

}

```

ایجاد فرم درخواست (با React Hook Form)

برای جمعآوری اطلاعات کاربران به یک فرم مؤثر نیاز داریم.

```jsx

// components/ContactForm.js

import { useForm } from 'react-hook-form';


export default function ContactForm() {

  const { register, handleSubmit, formState: { errors } } = useForm();

  

  const = (data) => {

    console.log(data);

    // ارسال داده به سرور یا سرویس ایمیل

  };


  return (

    <section className="py-20 bg-white">

      <div className="container mx-auto px-4">

        <div className="max-w-2xl mx-auto">

          <h2 className="text-3xl font-bold text-center text-gray-800 mb-6">با ما در ارتباط باشید</h2>

          <p className="text-center text-gray-600 mb-12">فرم زیر را پر کنید تا در اسرع وقت با شما تماس بگیریم</p>

          

          <form ={handleSubmit()} className="space-y-6">

            <div>

              <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">نام کامل</label>

              <input

                type="text"

                id="name"

                {...register("name", { required: "لطفاً نام خود را وارد کنید" })}

                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"

              />

              {errors.name && <p className="mt-1 text-sm text-red-600">{errors.name.message}</p>}

            </div>

            

            <div>

              <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">ایمیل</label>

              <input

                type="email"

                id="email"

                {...register("email", { 

                  required: "لطفاً ایمیل خود را وارد کنید",

                  pattern: {

                    value: /^\S+@\S+$/i,

                    message: "لطفاً یک ایمیل معتبر وارد کنید"

                  }

                })}

                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"

              />

              {errors.email && <p className="mt-1 text-sm text-red-600">{errors.email.message}</p>}

            </div>

            

            <div>

              <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">پیام</label>

              <textarea

                id="message"

                rows="4"

                {...register("message", { required: "لطفاً پیام خود را وارد کنید" })}

                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"

              ></textarea>

              {errors.message && <p className="mt-1 text-sm text-red-600">{errors.message.message}</p>}

            </div>

            

            <button

              type="submit"

              className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-lg transition-colors"

            >

              ارسال پیام

            </button>

          </form>

        </div>

      </div>

    </section>

  );

}

```

استایلدهی با Tailwind CSS و اضافه کردن انیمیشنهای ساده با Framer Motion

برای نصب Tailwind CSS در Next.js، دستورات زیر را اجرا کنید:


```bash

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

```

سپس فایل tailwind.config.js را به صورت زیر تنظیم کنید:

```js

/** @type {import('tailwindcss').Config} */

module.exports = {

  content: [

    "./pages/**/*.{js,ts,jsx,tsx,mdx}",

    "./components/**/*.{js,ts,jsx,tsx,mdx}",

    "./app/**/*.{js,ts,jsx,tsx,mdx}",

  ],

  theme: {

    extend: {},

  },

  plugins: [],

};

```

و فایل styles/globals.css را به روز رسانی کنید:

```css

@tailwind base;

@tailwind components;

@tailwind utilities;

```

برای انیمیشنها، Framer Motion را نصب کنید:

```bash

npm install framer-motion

```

بهینهسازی برای سئو و موبایل

بهینهسازی سئو در Next.js با استفاده از کامپوننت Head انجام میشود:

```jsx

// pages/index.js

import Head from 'next/head';


export default function Home() {

  return (

    <>

      <Head>

        <title>صفحه فرود حرفهای | توضیح خدمات شما</title>

        <meta name="description" content="توضیح مختصر و جذاب درباره خدمات شما که حاوی کلمات کلیدی مهم باشد" />

        <meta name="keywords" content="کلمات کلیدی, مربوط, به خدمات شما" />

        <meta property="og:title" content="صفحه فرود حرفهای | توضیح خدمات شما" />

        <meta property="og:description" content="توضیح مختصر و جذاب درباره خدمات شما" />

        <meta property="og:image" content="/og-image.jpg" />

        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <link rel="icon" href="/favicon.ico" />

      </Head>

      

      {/* کامپوننتهای صفحه */}

    </>

  );

}

```

برای اطمینان از واکنشگرا بودن صفحه، از کلاسهای responsive Tailwind استفاده کنید و همیشه صفحه را در دستگاههای مختلف تست کنید.

نتیجهگیری: دیپلوی پروژه روی Vercel

دیپلوی پروژه Next.js روی Vercel بسیار ساده است. ابتدا پروژه خود را در GitHub قرار دهید، سپس:

  • 1. به vercel دات کام بروید و ثبتنام کنید

  • 2. روی "Import Project" کلیک کنید

  • 3. گیتهاب خود را متصل کرده و ریپازیتوری مورد نظر را انتخاب کنید

  • 4. تنظیمات را تأیید و روی "Deploy" کلیک کنید

در کمتر از چند دقیقه، پروژه شما آنلاین خواهد بود!

تبلیغ برای خدمات طراحی صفحه فرود

صفحه فرود شما، سکوی پرواز فروشگاه اینترنتی شماست!

آیا میدانید یک صفحه فرود بهینهشده میتواند نرخ تبدیل کسبوکار شما را تا 300٪ افزایش دهد؟

صفحه فرود شما اولین برخورد کاربر با برندتان است و اگر به درستی طراحی نشود، فرصتهای فروش زیادی را از دست خواهید داد.

چرا صفحه فرود حرفهای مهم است؟

  • افزایش نرخ تبدیل مشتریان

  • بهبود تجربه کاربری

  • بهینهسازی برای موتورهای جستجو (سئو)

  • نمایش حرفهای محصولات و خدمات شما


من به شما کمک میکنم:

  • طراحی صفحه فرود واکنشگرا و جذاب با Next.js

  • بهینهسازی کامل برای موتورهای جستجو (سئو)

  • یکپارچهسازی با ابزارهای تحلیل و رهگیری

  • طراحی مبتنی بر اصول تبدیل (Conversion-Centered Design)

همین امروز پروژه خود را آغاز کنید!

برای دریافت مشاوره رایگان و سفارش طراحی صفحه فرود حرفهای، به پورتفولیوی من سر بزنید و با من تماس بگیرید.

🌐 عضویت در خبرنامه:

 https://formafzar.com/form/9l11g

فرصت را از دست ندهید! یک صفحه فرود عالی میتواند مسیر کسبوکار شما را متحول کند.

خبرنامه

برای آگاهی از تخفیفها و خدمات ویژه در خبرنامه عضو شوید. ایمیل و یا شماره تلفن خودتان را وارد نمایید.

عضویت در خبرنامه