طراحی سایت با Next.js؛ فناوری روز، به زبان صاحب کسب‌وکار

مستندات رسمی Next.js آن را این‌طور معرفی می‌کند: یک فریم‌ورک React برای ساختن برنامه‌های وب کامل. React ابزاری برای ساختن رابط کاربری است — دکمه‌ها، فرم‌ها، صفحه‌ها — و Next.js چیزهایی را که یک سایت واقعی لازم دارد دورش می‌چیند: ساختن صفحه روی سرور، مسیرها و نشانی‌ها، بهینه‌سازی تصویر و قلم، و جایی برای منطق پشت صحنه مثل سبد خرید، پرداخت و پنل مدیریت.

لازم نیست هیچ‌کدام از این اصطلاح‌ها را به خاطر بسپاری. سه نتیجه‌ی ملموس برای تو مهم است:

صفحه آماده می‌رسد. در Next.js صفحه می‌تواند روی سرور ساخته شود و کامل به مرورگر برسد. یعنی مشتری — و ربات گوگل — متن، قیمت و عکس را از همان لحظه‌ی اول می‌بیند، نه صفحه‌ای خالی که چند ثانیه بعد پر می‌شود.

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

سطح حمله‌ی کوچک‌تر. سایت Next.js که اختصاصی نوشته شده، افزونه‌ی عمومی‌ای ندارد که میلیون‌ها سایت دیگر هم آن را داشته باشند و یک حفره‌ی مشترک همه را با هم باز کند. هر مسیر ورودی مشخص و محدود است. این به معنای «نفوذناپذیر» نیست — هیچ سایتی نیست و هر کس این قول را بدهد اغراق می‌کند — اما یکی از رایج‌ترین مسیرهای نفوذ به سایت‌های کوچک را از اساس حذف می‌کند.

یک نکته برای این‌که انتظارت درست باشد: Next.js خودش سایت خوب نمی‌سازد؛ ابزاری است که دست سازنده را باز می‌گذارد. همان ابزار در دست تیمی بی‌دقت، سایتی کند و شلوغ تحویل می‌دهد. پس وقتی کسی می‌گوید «با Next.js می‌سازم»، سؤال بعدی‌ات باید این باشد: «نمونه‌ی زنده‌اش کجاست؟» اگر هم سؤالت اصلاً این است که چرا کد اختصاصی به‌جای قالب آماده، صفحه‌ی طراحی سایت اختصاصی جواب کامل‌تری دارد؛ تمرکز این صفحه روی خود فناوری است.

گوگل برای رتبه دادن، اول باید صفحه را بخواند. اگر طراحی سایت با React به‌تنهایی انجام شود و صفحه فقط در مرورگر ساخته شود، سایت در لحظه‌ی اول صفحه‌ای تقریباً خالی تحویل می‌دهد و محتوا بعد از اجرای جاوااسکریپت ظاهر می‌شود. گوگل می‌تواند جاوااسکریپت را اجرا کند، اما این یک مرحله‌ی اضافه و کندتر است، و خیلی از ربات‌های دیگر — از پیش‌نمایش لینک در پیام‌رسان‌ها تا موتورهای مقایسه‌ی قیمت — اصلاً این کار را نمی‌کنند.

Next.js این مشکل را از ریشه حل می‌کند: صفحه روی سرور ساخته می‌شود و ربات همان چیزی را می‌بیند که مشتری می‌بیند. ما این را در اتصال فروشگاه‌ها به ترب هم از نزدیک دیده‌ایم؛ ربات‌هایی که صفحه‌ی محصول را می‌خوانند، با صفحه‌ای که محتوایش بعداً ساخته می‌شود مشکل دارند.

کنار رندر سمت سرور، بقیه‌ی چیزهایی که در بحث next js برای سئو اهمیت دارد در خود ساختار سایت نوشته می‌شود، نه با افزونه: عنوان و توضیح جداگانه برای هر صفحه، نقشه‌ی سایت خودکار، نشانی‌های تمیز و لاتین، داده‌ساختار برای محصول و پرسش‌های متداول، و تصویرهایی که با اندازه‌ی درست به هر دستگاه می‌رسند. سئوی فنی پایه روی همه‌ی سایت‌های فراکو انجام می‌شود.

حالا بخش صادقانه: گوگل نمی‌پرسد سایتت با چه ساخته شده. Next.js رتبه نمی‌آورد؛ فقط مانع‌های فنی را برمی‌دارد. رتبه به محتوایی که واقعاً به سؤال مشتری جواب بدهد، رقابت صنف و زمان بستگی دارد. یک سایت وردپرسی سبک و تمیز هم می‌تواند خوب رتبه بگیرد؛ فقط کمتر پیش می‌آید که بعد از دو سال و ده افزونه هنوز سبک مانده باشد.

هر کس به اسم Next.js «رتبه‌ی یک» به تو بفروشد، چیزی را می‌فروشد که مال او نیست. اگر رشد در گوگل برایت جدی است، بعد از ساخت سایت، خدمات سئو کار جداگانه و ماهانه‌ای است که روی محتوا و رقابت کار می‌کند؛ زیرساخت درست فقط شرط لازم آن است، نه جایگزینش.

Next.js ابزارهای سرعت را آماده دارد: تقسیم کد بین صفحه‌ها، بهینه‌سازی تصویر و قلم، و ساختن صفحه‌های ثابت از قبل. اما ابزار به‌تنهایی سایت را سریع نمی‌کند. سایت Next.js را هم می‌شود با عکس‌های چندمگابایتی، اسکریپت‌های بی‌حساب و انیمیشن‌های سنگین کند کرد.

مثال واقعی‌اش شیکر پلاس است؛ فروشگاه شیکر و بطری ورزشی. گلوگاه اصلی سرعت در نسخه‌ی قبلی این فروشگاه عکس‌ها بود: عکس محصول مستقیم از دوربین بارگذاری می‌شد و هر صفحه‌ی دسته‌بندی حجم زیادی تصویر می‌فرستاد. راه‌حل این بود که تبدیل تصویر از لحظه‌ی بازدید به زمان ساخت سایت منتقل شود؛ هر عکس یک بار به قالب سبک وب و در چند اندازه ساخته می‌شود و هر دستگاه کوچک‌ترین نسخه‌ای را می‌گیرد که لازم دارد. Next.js بستر را داد، اما تصمیم درست را آدم گرفت.

برای تو این یعنی چه؟ وقتی سایتی با Next.js سفارش می‌دهی، فقط اسم فناوری را نخر. بپرس سرعت موبایل چطور سنجیده می‌شود، تصویرها چطور بهینه می‌شوند و اسکریپت‌های بیرونی — مثل ابزارهای آمار و چت — چطور بار می‌شوند که صفحه را نگه ندارند. بعد از تحویل هم با PageSpeed Insights خودت اندازه بگیر. ما عمداً عدد ادعایی نمی‌نویسیم؛ نمونه‌کارهای زنده را باز کن و خودت بسنج.

اشتباه‌های رایجی که هر سایتی را — با هر فناوری — کند می‌کند، در مقاله‌ی هفت دلیل کندی سایت آمده. خبر خوب این است که در سایت اختصاصی هیچ‌کدام از این‌ها به «افزونه‌ای که نمی‌شود حذفش کرد» گره نخورده؛ هر چیزی که سنگین است، قابل برداشتن است.

یک نکته‌ی دیگر که کمتر گفته می‌شود: سرعت فقط بارگذاری اول نیست. در Next.js جابه‌جایی بین صفحه‌ها می‌تواند بدون بارگذاری دوباره‌ی کل صفحه انجام شود، و مسیر از فهرست محصول تا سبد خرید روان‌تر حس می‌شود. مشتری این را با اسم نمی‌شناسد، ولی حسش می‌کند و همین حس، فرق ماندن و رفتن است.

رایج‌ترین نگرانی کسی که سایت Next.js سفارش می‌دهد این است: «بعد از تحویل، برای عوض کردن یک قیمت باید به برنامه‌نویس زنگ بزنم؟» جواب کوتاه: نه، اگر سازنده کارش را درست انجام داده باشد.

سایت‌هایی که فراکو می‌سازد پنل مدیریت اختصاصی دارند؛ پنلی که برای کار خودت طراحی شده، نه منوی شلوغی با صد گزینه که بیشترش هیچ‌وقت به کارت نمی‌آید. چند مثال از پروژه‌های واقعی:

در آلادخت، فروشگاه پارچه، صاحب فروشگاه موجودی هر طاقه، نرخ متری و وضعیت سفارش‌ها را خودش و بدون واسطه مدیریت می‌کند. در سفره سبز اطعام، سایت یک مؤسسه‌ی خیریه در تهران، موضوع تازه‌ی کمک — مثلاً کمک به سیل‌زدگان — را خود مؤسسه از پنل اضافه می‌کند و نیازی به تغییر کد نیست؛ کمپین‌ها، اخبار و گزارش‌ها هم از همان‌جا مدیریت می‌شوند. در ویجیل، برند پوشاک بین‌المللی، محصول، قیمت و تصویر بدون دخالت ما به‌روز می‌شود.

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

صادقانه بگوییم که پنل اختصاصی یک محدودیت هم دارد: بازار افزونه‌ی وردپرس را ندارد. اگر آدمی هستی که دوست داری خودت هر هفته یک قابلیت تازه نصب کنی و با سایت ور بروی، در سایت اختصاصی باید آن قابلیت را بخواهی تا نوشته شود. برای بیشتر کسب‌وکارها این محدودیت نیست، آسودگی است؛ ولی بهتر است از اول بدانی.

یک نکته‌ی امنیتی هم که در پنل‌هایی مثل سفره سبز و ویجیل رعایت شده: مجوز هر عمل مدیریتی سمت سرور بررسی می‌شود، نه این‌که فقط دکمه‌اش از چشم کاربر عادی پنهان شده باشد. این تفاوت در ظاهر دیده نمی‌شود و درست به همین دلیل مهم است؛ پنلی که فقط دکمه‌هایش را پنهان کرده، برای کسی که بلد است در را از جای دیگری باز کند، قفلی ندارد.

این بخش را از استودیویی که همه‌ی سایت‌هایش را با Next.js می‌سازد کمتر می‌شنوی، ولی لازم است. در این حالت‌ها احتمالاً به آن نیاز نداری:

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

وقتی داری یک ایده را محک می‌زنی. هنوز نمی‌دانی محصولت مشتری دارد؟ یک صفحه‌ی ساده یا حتی صفحه‌ی اینستاگرام کافی است. سایت اختصاصی سرمایه‌گذاری برای کاری است که جواب داده، نه ابزار آزمون‌وخطا.

وقتی سایت موقت است. یک همایش یا کمپین سه‌ماهه زیرساخت چندساله لازم ندارد.

وقتی بودجه فقط برای ساخت است. هر سایتی — با هر فناوری — دامنه، میزبانی و گاهی به‌روزرسانی می‌خواهد. اگر برای بعد از تحویل هیچ برنامه‌ای نداری، اول همین را حل کن.

وقتی می‌خواهی خودت با افزونه‌ها ور بروی. آزادی افزونه‌های وردپرس واقعی است و برای بعضی‌ها ارزشمند.

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

تفاوت next js و وردپرس فقط فنی نیست؛ تفاوت دو نوع خرج است. وردپرس ارزان شروع می‌شود و هزینه‌اش را به‌مرور می‌گیرد؛ کد اختصاصی گران‌تر شروع می‌شود و بعدش آرام‌تر است. مقایسه‌ی کامل و بی‌طرف را — با جاهایی که وردپرس برنده است — در مقاله‌ی وردپرس یا کدنویسی اختصاصی نوشته‌ایم. اگر بعد از خواندنش به وردپرس رسیدی، تصمیم درستی گرفته‌ای و ما هم همین را به تو می‌گوییم.

این شش پروژه مشتری واقعی‌اند، روی دامنه‌ی خودشان زنده‌اند و همه با Next.js ساخته شده‌اند. اگر دنبال فروشگاه اینترنتی با Next.js هستی، چهار تای اول دقیقاً همین‌اند.

آلادخت (aladokht.com)، فروشگاه پارچه. نشان می‌دهد منطق فروش خاص چطور پیاده می‌شود: قیمت متری و طاقه‌ای، درگاه زیبال، خرید اقساطی با اسنپ‌پی، ورود با کد پیامکی و نمایش خودکار محصولات در ترب.

پیمان‌کار (peymancar.com)، قطعات ایران‌خودرو و سایپا. مشتری خودروش را انتخاب می‌کند و فقط قطعه‌های سازگار را می‌بیند. پرداخت زیبال پس از بازگشت از درگاه سمت سرور دوباره راستی‌آزمایی می‌شود تا سفارشی که پولش نیامده «پرداخت‌شده» ثبت نشود. صفحه‌ی پروژه‌ی پیمان‌کار جزئیات بیشتری دارد.

اویلرو (oilero.com)، روغن و فیلتر خودرو. از ووکامرس به Next.js بازسازی شد؛ مثال خوبی برای کسی که امروز سایت وردپرسی دارد و به فکر تغییر است؛ ماجرای این بازسازی را در صفحه‌ی همین پروژه در نمونه‌کارها نوشته‌ایم.

شیکر پلاس (shakerpluse.com)، شیکر و بطری ورزشی، با مسیر جدا برای خرید عمده و کار جدی روی سرعت تصویرها.

ویجیل (vigil.clothing)، برند پوشاک برای بازار بین‌المللی؛ سایت انگلیسی با پرداخت بین‌المللی Stripe و نمای اولی که با اسکرول جلو می‌رود.

چپمن موبیل (chapmanmobil.com)، تعمیرگاه واقعی در آمریکا با رزرو آنلاین نوبت؛ سایتی انگلیسی که باید برای مشتری محلی آن‌جا قابل اعتماد باشد.

چرا این فهرست مهم است؟ چون Next.js در این شش پروژه شش کار کاملاً متفاوت می‌کند — از فروشگاه پارچه در ایران تا رزرو نوبت در آمریکا — و این یعنی فناوری برای نوع کسب‌وکار تو سقف نمی‌گذارد. سؤال درست این نیست که «Next.js به درد صنف من می‌خورد؟»؛ این است که سازنده منطق صنف تو را فهمیده یا نه. همه‌ی پروژه‌ها، کنار نمونه‌های نمایشی‌ای که برای صنف‌های دیگر ساخته‌ایم، در صفحه‌ی نمونه‌کارها هست.

ما بابت Next.js پول اضافه نمی‌گیریم؛ همه‌ی سایت‌های ما با همین فناوری ساخته می‌شوند و قیمت فقط به نوع و اندازه‌ی سایت بستگی دارد.

سایت شرکتی: برنزی ۳۰ میلیون تومان با ۴ صفحه؛ نقره‌ای ۴۰ میلیون تا ۸ صفحه، با وبلاگ، موشن، سئوی فنی و پنل پیامکی؛ طلایی ۵۰ میلیون تا ۱۲ صفحه، با درگاه پرداخت و فروش آنلاین خدمات، همراهی در دریافت اینماد، سایت دوزبانه، چت‌بات هوش مصنوعی و چهار مقاله‌ی سئوشده. تحویل ۷ تا ۱۰ روز کاری.

فروشگاه اینترنتی: برنزی ۴۵ میلیون، نقره‌ای ۵۵ میلیون با کمپین تخفیف، حساب کاربری و اتصال به ترب، و طلایی ۶۵ میلیون تومان. تحویل ۱۰ تا ۱۴ روز کاری.

پشتیبانی ماهانه، اختیاری: ۵، ۶ یا ۷ میلیون تومان برای سایت شرکتی و ۶، ۸ یا ۱۰ میلیون برای فروشگاه. سایت بدون آن هم کار می‌کند و مال خودت است.

ریز امکانات هر پلن و قیمت روز در صفحه‌ی قیمت طراحی سایت آمده. اگر عددهای خیلی بالاتری برای «سایت با Next.js» شنیده‌ای، بپرس آن عدد بابت چیست؛ گاهی پشتش واقعاً پروژه‌ای بزرگ با ده‌ها زیرسیستم است، و گاهی فقط اسم فناوری گران فروخته می‌شود. برای سایت شرکتی و فروشگاهی که بیشتر کسب‌وکارها لازم دارند، همین پلن‌ها کافی است و در گفت‌وگوی اول صادقانه می‌گوییم کدامش برای تو منطقی است — حتی اگر ارزان‌ترینش باشد.

روش پرداخت هم ساده است: قیمت بعد از یک گفت‌وگوی کوتاه ثابت می‌شود و پرداخت‌ها مرحله‌ای و همراه پیشرفت کار است؛ جلوتر از کاری که انجام شده، پرداختی نداری. برای هزینه‌ی خودمان طرح قسطی نداریم.

و قبل از هر قراردادی: صفحه‌ی اصلی سایتت را ظرف ۴۸ ساعت طراحی می‌کنیم تا ببینی سایت Next.js تو قرار است چه شکلی باشد. طراحی این پیش‌نمایش رایگان است و فقط ۶۸۰ هزار تومان بابت ساخت تصاویر و بنرهای اختصاصی همان نمونه می‌پردازی. نپسندیدی، تعهدی برای ادامه نداری.

سؤالی عملی که کمتر کسی قبل از سفارش می‌پرسد: سایت Next.js کجا اجرا می‌شود؟ سایتی که صفحه‌هایش روی سرور ساخته می‌شود، به محیطی نیاز دارد که Node.js اجرا کند. هاست اشتراکی ساده‌ای که برای وردپرس و PHP ساخته شده، معمولاً برای این کار مناسب نیست. خبر خوب این است که امروز در ایران سرویس‌هایی برای اجرای این نوع برنامه‌ها هست و سایت‌های خود فراکو هم روی میزبانی ایرانی اجرا می‌شوند.

چرا میزبانی ایرانی؟ چون وقتی بیشتر مشتری‌هایت در ایران‌اند، سرور نزدیک یعنی پاسخ سریع‌تر؛ و در روزهایی که اینترنت بین‌الملل دچار اختلال می‌شود، سایتی که داخل ایران میزبانی شده معمولاً برای کاربر داخلی در دسترس‌تر می‌ماند. برای سایتی که مخاطبش بیرون از ایران است — مثل ویجیل و چپمن موبیل — حساب برعکس است و میزبانی باید نزدیک همان مخاطب باشد.

نگهداری سایت Next.js چه چیزهایی دارد؟ تمدید دامنه و میزبانی؛ پشتیبان‌گیری منظم از پایگاه داده؛ به‌روزرسانی دوره‌ای خود Next.js و کتابخانه‌هایش، که برخلاف وردپرس به‌روزرسانی خودکار نیمه‌شب نیست و می‌شود آن را با برنامه و آزمون انجام داد؛ و رسیدگی به تغییراتی که کسب‌وکارت به‌مرور لازم دارد. این‌ها را یا خودت و برنامه‌نویست انجام می‌دهی، یا در قالب پشتیبانی ماهانه‌ی اختیاری به ما می‌سپاری. ریز هزینه‌های بعد از تحویل را در راهنمای هزینه‌ی نگهداری سایت در مجله‌ی فراکو نوشته‌ایم.

یک نکته‌ی مثبت که در حساب سه‌ساله خودش را نشان می‌دهد: چون سایت به ده‌ها افزونه‌ی جداگانه وابسته نیست، چرخه‌ی «یک افزونه به‌روز شد و سایت خراب شد» در کار نیست. نگهداری هست، ولی قابل پیش‌بینی است.

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

یکی از مزیت‌های کم‌سروصدای Next.js این است که فناوری رایجی است. React و Next.js پرکاربردند و برنامه‌نویسی که بلدشان باشد پیدا می‌شود؛ یعنی اگر روزی خواستی با کس دیگری ادامه بدهی، به ابزاری گره نخورده‌ای که فقط سازنده‌اش می‌فهمد. همین را درباره‌ی بعضی سامانه‌های اختصاصی دربسته نمی‌شود گفت.

در فراکو سورس‌کد کامل سایت به تو تحویل داده می‌شود و سایت مال کسی است که پولش را داده. «کامل» یعنی همه‌چیز: کد صفحه‌ها، منطق سبد خرید و پرداخت، ساختار پایگاه داده و هر آنچه برای اجرای مستقل لازم است. کدها با TypeScript نوشته می‌شوند؛ زبانی که نوع هر داده را صریح می‌کند و برای برنامه‌نویس تازه‌وارد، خواندن و تغییر دادن کد را امن‌تر می‌کند، چون خیلی از اشتباه‌ها پیش از اجرا خودشان را نشان می‌دهند.

موقع تحویل، از هر سازنده‌ای — از جمله ما — این‌ها را بخواه: دسترسی کامل به مخزن کد، دسترسی مدیر به میزبانی و پایگاه داده، حساب سرویس‌های متصل مثل درگاه پرداخت و پیامک به نام خودت، و یک توضیح کوتاه از نحوه‌ی اجرای پروژه. فهرست کامل بندهایی که باید در قرارداد باشد را در مقاله‌ی مالکیت سورس کد سایت نوشته‌ایم.

پشتیبانی ماهانه‌ی ما اختیاری است. اگر ماندی، چون ارزشش را دیده‌ای؛ و اگر رفتی، هیچ قفلی پشت سرت نیست. این برای خود ما هم یک انضباط است: مشتری‌ای که هر لحظه می‌تواند برود، فقط با کیفیت کار نگه داشته می‌شود.

قدم بعدی: درخواست پیش‌نمایش بده و چند خط درباره‌ی کسب‌وکارت بنویس — چه می‌فروشی، مشتری‌ات کیست و از سایت چه می‌خواهی. پایگاه فراکو اهواز است و با کسب‌وکارها از سراسر ایران کاملاً غیرحضوری کار می‌کنیم. ظرف ۴۸ ساعت صفحه‌ی اصلی سایتت را می‌بینی و بعد، با چیزی واقعی جلوی چشمت، تصمیم می‌گیری.