Publino: أفضل قالب Next.js لصفحات الهبوط للشركات الناشئة الحديثة

باختصار: يُعد Publino قالبًا مدفوعًا من Aniq-UI مبنيًا بـ Next.js 16، وهو صفحة هبوط لمنتج باشتراك أو لنشاط تجاري يبيع خططًا. يضم ثلاث صفحات (الرئيسية، وصفحة الأسعار بخطط شهرية وسنوية، وصفحة التواصل) بالإنجليزية والعربية، مع نسخة عربية من اليمين إلى اليسار، ووضعين داكن وفاتح، ومن دون قاعدة بيانات أو خلفية تحتاج إلى إعداد. تشغّله باستخدام Docker أو باستخدام Node.js و Yarn، ثم تستبدل المحتوى التجريبي وتنشره على Vercel أو على خادم Node.js أو على أي استضافة تشغّل Docker.

هل تبحث عن قالب صفحة هبوط حديث وعالي التحويل مبني بأحدث Next.js 16؟ إليك Publino: الحل الشامل للـSaaS والشركات الناشئة والوكالات والمبدعين الذين يريدون الانطلاق بسرعة وبمظهر احترافي.

🖼️ معاينة مباشرة

شاهد Publino قيد العمل:

1. 🔗 العرض المباشر
2. 🛒 شراء Publino

🚀 لماذا Publino؟

Publino ليس مجرد قالب. إنه نظام متكامل لواجهة المستخدم وصفحات الهبوط، صُمم من أجل السرعة، السيو، الوصولية والتحويل. سواء كنت تطلق منتجًا جديدًا أو تختبر فكرة أو تطور موقع وكالتك، Publino يمنحك الأفضلية.

الميزات الرئيسية

1. Next.js 16 & React 19: أحدث التقنيات لأداء فائق السرعة.
2. محسن للسيو: HTML دلالي، Open Graph، بطاقات تويتر وبيانات منظمة جاهزة.
3. وضع داكن: سمات فاتحة وداكنة أنيقة بضغطة واحدة.
4. تصميم متجاوب: مثالي على الجوال والتابلت والكمبيوتر.
5. مكونات مميزة: Hero، التسعير، الأسئلة الشائعة، التواصل والمزيد.
6. نشر بنقرة واحدة: على Vercel أو منصتك المفضلة في ثوانٍ.
7. تخصيص سهل: غيّر الألوان والخطوط والأقسام بسهولة.
8. تحديثات مدى الحياة: تطوير مستمر وميزات جديدة.

🔥 ما الذي يميز Publino؟

1. يركز على التحويل: كل قسم مصمم لزيادة الاشتراكات والمبيعات.
2. الأداء أولاً: صفحات خفيفة مصممة لتحميل سريع، بلا أي عبء.
3. صديق للمطورين: TypeScript، Tailwind CSS 4، وكود نظيف وموثق.
4. جاهز للإنتاج: يشمل الرخصة وأقسام التواصل.
5. جاهز للتدويل: أضف لغات متعددة بسهولة مع next-intl.

🛠️ ماذا يتضمن Publino؟

Publino يوفر لك كل ما تحتاجه:

1. صفحة هبوط: Hero، الميزات، الفوائد، التسعير، الأسئلة الشائعة، التواصل.
2. مكونات UI: أزرار، نوافذ منبثقة، بطاقات، تبويبات والمزيد.
3. جاهز للمدونة: أضف مدونة بسهولة لتعزيز السيو.
4. نموذج تواصل: مدمج وجاهز للربط مع خدمتك أو خادمك.
5. SEO & Analytics: وسوم meta، بيانات منظمة، وتكامل تحليلات سهل.

💡 لمن Publino؟

1. مؤسسو SaaS: أطلق منتجك أو موقعك في ساعات وليس أسابيع.
2. الوكالات: قدم مواقع مذهلة لعملائك بسهولة.
3. Indie Hackers: اختبر أفكارك ونم جمهورك بسرعة.
4. المسوقون: شغّل صفحات هبوط لحملاتك وتوليد العملاء.

🛒 احصل على Publino اليوم

جاهز لإطلاق مشروعك القادم؟ اشترِ Publino الآن واحصل على وصول فوري، تحديثات مدى الحياة ودعم مميز.

📦 كيف تستخدم Publino

1. حمّل القالب (.zip).
2. ثبت الاعتمادات:

yarn install

1. ابدأ خادم التطوير:

yarn dev

1. خصص المحتوى والألوان والعلامة التجارية.
2. انشر على Vercel أو Netlify أو مضيفك المفضل.

📈 عزز السيو وزوارك

Publino مبني وفق أفضل ممارسات السيو. أضف مدونتك، حسّن محتواك وتقدم في نتائج البحث. مع سرعة تحميل عالية وتجربة جوال مثالية، سيحب زوارك (وجوجل) موقعك.

🙋‍♂️ تحتاج مساعدة؟

راجع التوثيق.

---

جاهز لبناء مشروعك الكبير القادم؟ احصل على Publino الآن وانطلق بثقة!

---

المراجع:

1. توثيق Next.js
2. أفضل قوالب Nextjs
3. التدويل مع next-intl

اكتشف العرض المباشر لـ قالب صفحة الهبوط Next.js (إصدار 2026) أو تصفح المزيد من قوالب صفحات الهبوط Next.js على Aniq-UI.

نظرة مفصّلة على محتوى القالب

الصفحات الثلاث

الصفحة	العنوان	ما تعرضه
الرئيسية	/	صفحة الهبوط، قسمًا بقسم (الجدول التالي)
الأسعار	/pricing	ثلاث خطط مع مفتاح «شهري» و«سنوي»، وجدول مقارنة من 21 ميزة، وستة أسئلة
التواصل	/contact	نموذج تواصل، وبيانات الشركة وروابطها الاجتماعية، وثلاثة أسئلة

لكل صفحة نسخة عربية تحت /ar بتخطيط من اليمين إلى اليسار. لا يتضمن Publino صفحة مدونة، فإن احتاج موقعك إليها أضفتها بنفسك.

الصفحة الرئيسية قسمًا بقسم

القسم	ما يعرضه
القسم الرئيسي	عنوان يظهر كلمة كلمة، وجملة، وزران
نموذج لوحة التحكم	لوحة تحكم لعمليات النشر مائلة بتأثير ثلاثي الأبعاد، مبنية بالكود، فيها بطاقات أرقام يمكن سحبها
لماذا نحن	أربع بطاقات بضوء يتبع المؤشر
المزايا	خمس بطاقات متحركة، منها درجات الأداء وكرة أرضية ثلاثية الأبعاد
القوالب	أربع بطاقات قوالب، لكل منها صورة وشارة وسعر
متجاوب	موقع معروض على حاسوب ولوح وهاتف
الأسعار	الخطط الشهرية الثلاث مع تصفية بحسب فئة الميزات
الأسئلة الشائعة	عشرة أسئلة مع فئات وبحث
المجتمع العالمي	خريطة للعالم فوقها نموذج رسالة

نموذج لوحة التحكم وبطاقات المزايا رسوم توضيحية، فدرجاتها ومدنها وأرقامها بيانات تجريبية ثابتة. يفتح الموقع بالوضع الداكن، ويبدّل زر الشمس والقمر إلى الوضع الفاتح، ويتذكر المتصفح الاختيار.

التقنيات المستخدمة

Next.js 16 مع App Router، و React 19 و TypeScript، و Tailwind CSS 4، و next-intl للإنجليزية والعربية، و React Hook Form مع Zod للنموذجين، و Motion للحركات، و Recharts و dnd-kit و cobe للرسم البياني والبطاقات القابلة للسحب والكرة الأرضية، ثم Radix UI مع Tabler Icons. كل اعتمادية مثبّتة على إصدار محدد، ويأتي yarn.lock مع التنزيل، فيطابق تثبيتك التثبيت الذي اختُبر عليه القالب.

الحزمة والرخصة

يُباع Publino في حزمة واحدة هي صفحة هبوط: صفحة الهبوط الكاملة بتخطيط متجاوب، ووضع داكن، وصفحات جاهزة لمحركات البحث، وتحميل سريع. تجد السعر الحالي في صفحة قالب Publino، كما أن Publino واحد من القوالب العشرة في حزمة قوالب Next.js.

الرخصة تجارية: يمكنك استخدامه في أي عدد من المشاريع، لك أو لعملائك، وتعديل الكود، وتسليم المواقع المكتملة لعملائك. ولا يحق لك إعادة بيع الكود المصدري أو مشاركته علنًا، أو وضعه في مشروع مفتوح المصدر، أو بيعه قالبًا أو مجموعة واجهات أو سمة أو حزمة بداية.

ما تربطه بنفسك

• النماذج. يفحص نموذج التواصل ونموذج الصفحة الرئيسية ما يكتبه الزوار، لكنهما لا يرسلان شيئًا حتى تربطهما بخدمتك الخاصة.
• المدفوعات. لا يتضمن القالب أي خدمة دفع. أزرار الخطط تقود إلى صفحة التواصل أو إلى نموذج الصفحة الرئيسية، فوجّهها إلى صفحة الدفع الخاصة بك لتبيع.
• العناصر النائبة. زرا «تسجيل الدخول» و«احجز مكالمة» وزرا القسم الرئيسي تنتظر روابطك، أما النصوص والأرقام والأشخاص والأسعار وبطاقات القوالب فمحتوى تجريبي تستبدله.

أمثلة على الاستخدام

يصف المحتوى التجريبي منصة وهمية تبيع مكونات واجهات وقوالب، لكن التخطيط يناسب أي عرض فيه خطط وخطوة تواصل:

• برنامج باشتراك، مع خطط شهرية وسنوية وجدول مقارنة وأسئلة شائعة جاهزة.
• مكتب استشارات أو وكالة، تُعرض فيه الخدمات في صورة باقات تقود إلى صفحة التواصل. والرخصة تشمل المواقع التي تبنيها لعملائك.
• موقع نشاط تجاري صغير يحتاج إلى ثلاث صفحات ونموذج تواصل ولغتين.
• إطلاق منتج أو حملة تسويقية، باستخدام الصفحة الرئيسية وحدها.
• نشاط تجاري له عملاء ناطقون بالعربية، لأن النسخة العربية كاملة ومن اليمين إلى اليسار.

إن احتاج الموقع أيضًا إلى مدونة أو صفحات تسجيل دخول أو معرض أعمال، فاختر قالبًا آخر من المقارنة أدناه.

البدء خطوة بخطوة

1. نزّل القالب وشغّله

نزّل ملف ZIP من «قوالبي» في لوحة تحكمك على Aniq-UI، وفك ضغطه، وافتح طرفية داخل المجلد Publino-template. مع تشغيل Docker:

docker build -t publino-landing .
docker run -p 3030:3030 publino-landing

ومن دون Docker، ثبّت Node.js 20.9 أو أحدث (يُنصح بالإصدار 22 أو 24) ثم شغّل:

corepack enable
yarn install
yarn dev

افتح localhost:3030 للإنجليزية و localhost:3030/ar للعربية. وإذا كان المنفذ مستخدمًا، فاستعمل yarn dev -p 3041.

2. غيّر المحتوى

كل النصوص الظاهرة موجودة في messages/، موزعة على أربعة مجلدات (common و home و pricing و contact) يضم كل منها en.json و ar.json. عدّل الملفين معًا وأبقِ المفاتيح كما هي. ويقرأ قسما الأسعار أسعارهما من ملف صغير واحد، فتغيّر السعر في مكان واحد.

3. غيّر الألوان والهوية

السمتان مجموعتان من قيم الألوان في src/styles/theme.css: الفاتحة تحت :root والداكنة تحت [data-theme="dark"]. غيّر --interactive-primary للأزرار الرئيسية أو --background لخلفية الصفحة. والشعار أيقونة صاروخ يليها اسم الموقع في src/layouts/Navbar/index.tsx، أما أيقونات الموقع وصورة المشاركة (public/image.png بمقاس 1200 في 630 بكسل) فملفات داخل public/.

4. اربط النماذج

اربط كل نموذج تُبقيه بواجهتك البرمجية أو بخدمة نماذج أو بمنصة البريد الخاصة بك، واحذف الآخر. ويضيف ضبط NEXT_PUBLIC_RECAPTCHA_SITE_KEY مربع Google reCAPTCHA v2 إلى نموذج الصفحة الرئيسية. احتفظ بالمفاتيح السرية على خادم، لأن أي قيمة تبدأ بـ NEXT_PUBLIC_ يمكن قراءتها في الصفحة.

5. اضبط عنوانك وانشر الموقع

اضبط NEXT_PUBLIC_SITE_URL على نطاقك في المكان الذي يجري فيه البناء، فمنه تُبنى الروابط الأساسية وروابط اللغات وخريطة الموقع و robots.txt وبطاقات المشاركة. ثم انشر على Vercel من مستودع Git خاص (مع إضافة ENABLE_EXPERIMENTAL_COREPACK=1)، أو على خادم Node.js باستخدام yarn build و yarn start خلف Nginx أو Caddy، أو كصورة Docker. ولا تكفي استضافة تقدّم الملفات الثابتة فقط، لأن الخادم هو الذي يختار لغة كل زائر. وبعد النشر، تحقق من أن كل عنوان في /sitemap.xml يبدأ بنطاقك.

مقارنة Publino بقوالب Aniq-UI الأخرى لصفحات الهبوط والأعمال

القالب	النوع	الصفحات	الأنسب لـ
Publino	مدفوع، Next.js 16	الرئيسية والأسعار والتواصل	منتج باشتراك أو نشاط تجاري يحتاج إلى خطط ونموذج تواصل
قالب SaaS	مدفوع، Next.js 16	الرئيسية والأسعار والمدونة والتواصل وصفحات الدخول والصفحات القانونية وصفحات الأخطاء	منتج برمجي يحتاج إلى مدونة وصفحات حسابات
صفحة هبوط SaaS	مجاني، Next.js 15	صفحة واحدة فيها الأسعار وجدول مقارنة	صفحة هبوط SaaS داكنة بلا تكلفة
موقع شركة	مجاني، Next.js 15	صفحة واحدة من عشرة أقسام	شركة أو مكتب استشارات في صفحة واحدة
وكالة تصميم ويب	مجاني، Next.js 15	صفحة واحدة فيها الأعمال وخطوات العمل ونموذج تواصل	وكالة أو مستقل يعرض أعماله
صفحة هبوط 3D	مجاني، Next.js 15 و Three.js	صفحة واحدة حول عجلة منتجات ثلاثية الأبعاد	عرض منتج، مثل علامة تجارية للعصائر

تأتي القوالب الستة كلها بالإنجليزية والعربية. اختر Publino بدل قالب SaaS حين تكفيك ثلاث صفحات وتريد وضعًا فاتحًا إلى جانب الوضع الداكن.

الأسئلة الشائعة

ما الصفحات التي يتضمنها Publino؟

ثلاث صفحات: الرئيسية والأسعار والتواصل، ولكل منها نسخة إنجليزية ونسخة عربية تحت /ar. ولا توجد صفحة مدونة.

هل يدعم Publino العربية والكتابة من اليمين إلى اليسار؟

نعم. كل نص موجود بالإنجليزية والعربية، وتحمل الصفحات العربية dir="rtl" فينعكس التخطيط كله. ويمكنك إضافة لغات أخرى عبر next-intl.

هل أحتاج إلى خلفية لتشغيل Publino؟

لا. هو تطبيق Next.js واحد بلا قاعدة بيانات ولا خلفية، ولا يلزم ضبط أي شيء قبل التشغيل الأول. تحتاج فقط إلى خدمة للنماذج التي تُبقيها.

هل يستطيع Publino قبول المدفوعات؟

لا. لا يتضمن أي خدمة دفع، وأزرار الخطط تقود إلى صفحة التواصل أو إلى نموذج الصفحة الرئيسية. لتبيع، وجّهها إلى صفحة الدفع لدى مزوّد الدفع الذي تختاره.

هل يمكنني استخدام Publino في مشاريع العملاء؟

نعم. تغطي الرخصة التجارية عددًا غير محدود من المشاريع، ومنها العمل للعملاء. ولا يحق لك إعادة بيع الكود المصدري أو بيعه قالبًا.

ما إصدار Node.js الذي يحتاجه Publino؟

Node.js 20.9 أو أحدث، ويُنصح بالإصدار 22 أو 24. ومع Docker لا تحتاج إلى شيء آخر، لأن الصورة تأتي مع Node.js 24.

أدلة ذات صلة

• أفضل قوالب صفحات هبوط Next.js لعام 2026
• كيف تطلق موقع SaaS بالإنجليزية والعربية باستخدام Next.js
• أفضل قوالب SaaS بـ Next.js وحزم البداية
• قوالب صفحات هبوط مجانية من Aniq-UI
• إعداد next-intl مع Next.js 16

وعن Publino نفسه، تعرض صفحة قالب Publino العرض المباشر والسعر الحالي، ويشرح توثيق Publino كل خطوة من خطوات الإعداد.