آموزش next js: سرفصل‌ها، هزینه دوره در ۱۴۰۵ و نسخه درست برای شروع
دورهآموزش next js برای کسی است که React را می‌شناسد و حالا می‌خواهد سایت کامل بسازد: صفحه‌هایی که روی سرور ساخته می‌شوند، زود باز می‌شوند و گوگل متنشان را می‌خواند. این صفحه می‌گوید یک دوره خوب چه چیزهایی را و به چه ترتیبی درس میدهد، در آبان ۱۴۰۵ هر راه یادگیری چقدر هزینه دارد و آگهی‌های استخدام از این مهارت چه میخواهند.
فهرست آموزشگاهها بر پایه شهری است که انتخاب کرده‌اید.
nextjs چیست و چه چیزی به React اضافه می‌کند؟
Next.js یک فریم‌ورک متن‌باز است که روی React ساخته شده است. React فقط لایه رابط کاربری را می‌سازد؛ یعنی دکمه، فرم و فهرست. برای یک سایت کامل چیزهای دیگری هم لازم است: آدرس هر صفحه، گرفتن داده از سرور، عنوان و توضیح صفحه برای گوگل، فشرده‌سازی تصویر و ساختن نسخه نهایی برای سرور. Next.js این کارها را با یک قاعده ثابت انجام میدهد تا هر تیم آن‌ها را از نو اختراع نکند.
سه فرق اصلی با یک پروژه ساده React
- صفحه روی سرور ساخته میشود. در پروژه ساده React مرورگر اول یک صفحه تقریبا خالی می‌گیرد و بعد JavaScript آن را پر می‌کند. در Next.js بیشتر صفحه پیش از رسیدن به مرورگر روی سرور ساخته شده است. نتیجه: باز شدن سریع‌تر و متنی که موتور جستوجو بی‌دردسر می‌خواند.
- مسیریابی با پوشه‌ها. هر پوشه داخل app یک آدرس سایت است. برای ساختن صفحه /blog کافی است پوشه blog و فایل page را بسازید.
- سرور و رابط در یک پروژه. فرم را میشود مستقیم به تابعی روی سرور فرستاد و API کوچک را در همان پروژه نوشت. برای همین است که Next.js در آگهی‌های فول استک هم دیده میشود.
Next.js را شرکت Vercel نگه‌داری می‌کند و رایگان است. نسخه ۱۶ آن در مهر ۱۴۰۴ منتشر شد و در آبان ۱۴۰۵ آخرین نسخه پایدار ۱۶٫۴ است. در هفته اول آبان ۱۴۰۵ بیش از ۹۰ میلیون بار از مخزن رسمی بسته‌های JavaScript دانلود شد؛ یعنی ابزاری حاشیه‌ای نیست و دانستنش در بازار کار وب به کار می‌آید.
چه کسی سراغ Next.js برود؟ کسی که React را در حد ساختن چند کامپوننت و کار با state بلد است و حالا پروژه‌ای می‌خواهد که روی اینترنت واقعا کار کند: فروشگاه، بلاگ، پنل کاربری یا سایت شرکتی. اگر هنوز React را شروع نکرده‌اید، Next.js جای شروع نیست؛ اول سراغ React مقدماتی بروید. بخش پیش‌نیازها در همین صفحه سطح لازم را دقیق‌تر می‌گوید.
App Router یا Pages Router: دوره باید کدام را درس بدهد؟
Next.js دو روش برای ساختن صفحه دارد. Pages Router روش قدیمی است و App Router از نسخه ۱۳ آمد و حالا پیش‌فرض هر پروژه تازه است. بسیاری از دورههای ضبط‌شده هنوز با روش قدیمی یا نسخه ۱۳ و ۱۴ ضبط شده‌اند. پیش از ثبت‌نام، سرفصل را با این جدول بسنجید.
| موضوع | در دوره به‌روز (نسخه ۱۵ و ۱۶) | نشانه دوره قدیمی |
|---|---|---|
| پوشه اصلی پروژه | app با فایل‌های page و layout | pages با فایل‌های _app و _document |
| گرفتن داده | fetch داخل کامپوننت سرور و async | getServerSideProps و getStaticProps |
| فرم و تغییر داده | Server Actions | فقط API Route و fetch از مرورگر |
| کش | use cache و revalidateTag با دو ورودی | کش پنهان پیش‌فرض نسخه ۱۴ |
| فایل میانی درخواست‌ها | proxy.ts | middleware.ts (در نسخه ۱۶ منسوخ شده است) |
| ابزار ساخت | Turbopack، پیش‌فرض نسخه ۱۶ | فقط webpack |
| حداقل Node.js | ۲۰٫۹ یا بالاتر | Node.js ۱۸ (دیگر پشتیبانی نمی‌شود) |
آموزش نکست جی اس در شش فصل: هر فصل چه میدهد و چند ساعت می‌برد
دورههای گروهی Next.js در تهران ۴۰ تا ۴۵ ساعت کلاس دارند. اگر این ساعت‌ها را بر پایه سرفصل‌ها و مستندات رسمی نسخه ۱۶ تقسیم کنیم، یک دوره ۴۱ ساعتی این شکل را دارد.
فصل ۱: پروژه و مسیریابی، ۶ ساعت
ساختن پروژه با create-next-app، شناختن پوشه app، صفحه و layout مشترک، لینک بین صفحه‌ها، آدرس پویا مثل /product/[id]، صفحه ۴۰۴ و گروه‌بندی مسیرها. پایان این فصل: یک سایت چندصفحه‌ای با منوی ثابت.
فصل ۲: کامپوننت سرور و کلاینت، ۹ ساعت
مهم‌ترین و سخت‌ترین فصل. کدام کامپوننت روی سرور اجرا میشود و کدام با use client به مرورگر می‌رود، داده چطور روی سرور گرفته میشود، و loading، error و Suspense چطور صفحه را تکه‌تکه نشان می‌دهند. کسی که این فصل را خوب نفهمد بعدا در هر پروژه به خطا می‌خورد.
فصل ۳: رندر و کش، ۶ ساعت
صفحه استاتیک و پویا، revalidate، و مدل تازه کش در نسخه ۱۶ با use cache. این فصل جواب این سؤال است: چرا تغییر داده در صفحه دیده نمی‌شود؟
فصل ۴: فرم، API و ورود کاربر، ۱۰ ساعت
Server Actions برای فرم، Route Handler برای API، وصل شدن به پایگاه داده با یک ORM، ورود و خروج کاربر و محافظت از صفحه‌های خصوصی. این فصل Next.js را از ابزار فرانت اند به ابزار سایت کامل تبدیل می‌کند.
فصل ۵: سئو، تصویر و سرعت، ۵ ساعت
Metadata هر صفحه، sitemap و robots، تصویر بهینه با next/image، فونت محلی، و خواندن معیارهای سرعت صفحه.
فصل ۶: ساخت و انتشار، ۵ ساعت
next build، اجرای نسخه نهایی روی سرور Node.js، ساختن Docker، متغیرهای محیطی و به‌روز نگه داشتن نسخه برای وصله‌های امنیتی.
بیرون از کلاس هم کار هست: برای یک پروژه قابل ارائه در رزومه، ۴۰ تا ۶۰ ساعت تمرین در خانه را حساب کنید. موضوع‌هایی مثل چندزبانه کردن سایت، تست سرتاسری، معماری پروژه‌های بزرگ و کش در مقیاس بالا در این دوره نمی‌آیند؛ جایشان Next.js پیشرفته است.
پیش از ثبت‌نام در دوره Next.js چه چیزهایی را باید بلد باشید؟
دورههای جدی Next.js در ایران، React را شرط ورود گذاشته‌اند. این چهار کارت می‌گوید دقیقا چه سطحی لازم است.
JavaScript امروزی
تابع پیکانی، destructuring، import و export، و به‌خصوص Promise و async و await. بدون async، فصل گرفتن داده نامفهوم می‌ماند. اگر کم دارید، صفحه JavaScript مقدماتی جای شروع است.
React در حد کار واقعی
کامپوننت، props، state، useEffect و فرم کنترل‌شده. معیار ساده: یک فهرست کار با افزودن و حذف را بدون نگاه کردن به آموزش بسازید.
HTML، CSS و کمی خط فرمان
نصب Node.js، اجرای npm، و خواندن پیام خطا در ترمینال. بیشتر دوره‌ها Tailwind CSS را هم در کنار کار به کار می‌برند.
TypeScript: لازم نیست، ولی کمک می‌کند
پروژه تازه Next.js به طور پیش‌فرض با TypeScript ساخته میشود. لازم نیست پیش از دوره آن را کامل بلد باشید، ولی آشنایی با نوع‌ها خواندن مثال‌ها را آسان می‌کند.
آگهی‌های استخدام چقدر Next.js میخواهند؟
همه آگهی‌های فعال دسته برنامه‌نویسی یک سایت بزرگ کاریابی در ۱۱ آبان ۱۴۰۵ خوانده شد: ۱٬۴۱۰ آگهی. عنوان‌ها یکی‌یکی دسته‌بندی شد و نام Next.js در عنوان، متن و فهرست نرم‌افزارهای هر آگهی شمرده شد.
کنار Next.js چه میخواهند؟ از ۱۶۳ آگهی‌ای که نام Next.js را آورده بودند، ۱۴۳ آگهی React هم خواسته بودند، ۱۱۸ آگهی TypeScript، ۷۳ آگهی Docker، ۵۲ آگهی Tailwind CSS، ۴۶ آگهی یک کتابخانه مدیریت state مثل Redux یا Zustand، ۴۲ آگهی رندر سمت سرور و ۴۰ آگهی تست خودکار. یعنی Next.js تقریبا هیچ‌وقت تنها خواسته نمی‌شود؛ TypeScript را عملا جزء همین بسته حساب کنید.
کدام شغل‌ها؟ ۹۰ آگهی از ۱۵۸ آگهی فرانت اند و ۴۰ آگهی از ۱۲۶ آگهی با عنوان فول استک Next.js خواسته بودند. بقیه، آگهی‌هایی مثل مهندس نرمافزار یا مدیر فنی بودند که Next.js را در فهرست ابزارهای تیم آورده بودند.
چه سطحی؟ در عنوان ۳۵ آگهی کلمه ارشد یا senior آمده بود و فقط ۶ آگهی کارآموزی و یک آگهی جونیور بود. بازار Next.js بیشتر دنبال کسی است که پیش‌تر با React کار کرده است؛ این همان دلیلی است که این دوره در مسیر شغلی در سطح «ماهر» آمده است.
حقوق پیشنهادی. ۶۴ آگهی رقم حقوق داده بودند. میانه کف بازه ۳۷٫۵ و میانه سقف آن ۶۰ میلیون تومان در ماه بود؛ در ۳۵ آگهی شهر تهران ۵۰ تا ۸۰ میلیون. این رقم پیشنهاد آگهی است، نه دریافتی واقعی، و بیشتر آن برای افراد باتجربه است. دو آگهی کارآموزی که رقم داده بودند ۲۲ تا ۳۰ و ۲۵ تا ۳۵ میلیون نوشته بودند. برای مقایسه، حداقل مزد قانونی ۱۴۰۵ حدود ۲۱٫۸ میلیون تومان ناخالص در ماه است.
دوره next js: حضوری، آنلاین زنده، ضبط‌شده یا کلاس خصوصی؟
قیمت‌ها از صفحه ثبت‌نام دوره‌ها در ۱۱ آبان ۱۴۰۵ خوانده شده است. همه به تومان و برای کل دوره است.
| راه یادگیری | ساعت آموزش | شهریه | گواهی | مناسب چه کسی |
|---|---|---|---|---|
| کلاس حضوری گروهی آموزشگاه خصوصی در تهران | ۴۰ تا ۴۵ ساعت در ۱۶ جلسه | ۶٫۴ تا ۱۱ میلیون | گواهی پایان دوره آموزشگاه | کسی که با برنامه ثابت و پرسیدن سر کلاس بهتر یاد می‌گیرد |
| همان کلاس به صورت آنلاین زنده | حدود ۴۰ ساعت | حدود ۸٫۷۵ میلیون | همان گواهی | ساکن شهرهای دیگر یا شاغل |
| دوره حضوری چندماهه با پروژه | ۵ ماه، ساعت اعلام نشده | ۱۷٫۹ میلیون | گواهی آموزشگاه | کسی که پروژه کامل و پیگیری استاد می‌خواهد |
| کلاس خصوصی یک‌به‌یک، آنلاین یا حضوری | ۱۶ جلسه ۹۰ دقیقه‌ای، ۲۴ ساعت | حدود ۸٫۵ میلیون (قیمت پیش از تخفیف ۱۲ میلیون) | اعلام نشده | کسی که زمان کم دارد یا پروژه کاری مشخصی دارد |
| دوره ضبط‌شده فارسی | ۱۵ تا ۲۳ ساعت ویدئو | ۱٫۲ تا ۳٫۲۵ میلیون پس از تخفیف | گواهی سایت آموزشی، در برخی دوره‌ها | کسی که خودش برنامه می‌ریزد و سؤالش را در انجمن می‌پرسد |
| دوره خارجی با زیرنویس فارسی | ۴۰ تا ۸۴ ساعت | ۰٫۷ تا ۳ میلیون پس از تخفیف | اعلام نشده | کسی که انگلیسی شنیداری خوبی دارد |
| فنی و حرفه‌ای | استاندارد Next.js ندارد | نزدیک‌ترین استاندارد: «مهندس توسعه دهنده وب با JavaScript»، ۳۰۴ ساعت، ۵۰٫۸ میلیون حضوری | گواهی مهارت فنی و حرفه‌ای | کسی که مدرک دولتی برای کل مسیر وب می‌خواهد، نه فقط Next.js |
کلاس Next.js در شهر شما: آموزشگاه‌هایی که این دوره را برگزار میکنند
این فهرست را آموزشگاه‌های تأییدشده راه تا کار می‌سازند و بر پایه شهری است که انتخاب کرده‌اید.
پیش از پرداخت شهریه سه چیز را از آموزشگاه بپرسید: دوره با کدام نسخه Next.js و کدام روتر است، پروژه پایانی روی یک سرور واقعی منتشر میشود یا فقط روی رایانه خودتان می‌ماند، و اگر یک جلسه را از دست دادید فیلم یا جلسه جبرانی هست یا نه.
شهرت را انتخاب کن تا آموزشگاه‌هایی را ببینی که «Next.js» را در شهر تو برگزار میکنند.
آموزش next js رایگان: منابع رایگان تا کجا کافی است؟
خود سازنده Next.js یک دوره رایگان ۱۶ فصلی دارد که در آن یک داشبورد کامل با پایگاه داده، جستوجو، فرم و ورود کاربر ساخته میشود. مستندات رسمی هم کامل و به‌روز است و هر نسخه تازه، اول در همان‌جا توضیح داده میشود. برای کسی که انگلیسی نوشتاری را راحت می‌خواند، این دو منبع از نظر محتوا از بیشتر دورههای پولی جلوترند.
آنچه منابع رایگان ندارند
- کسی که کد شما را ببیند. بیشترین زمان یادگیری Next.js صرف خطاهایی میشود که فقط در پروژه خودتان پیش می‌آید؛ مثلا جای اشتباه use client.
- ترتیب و برنامه. مستندات فهرست همه چیز است، نه برنامه درسی. خیلی‌ها در فصل کش گیر میکنند و رها میکنند.
- انتشار روی سرور در ایران. آموزش رسمی پروژه را روی سرویس میزبانی خود سازنده منتشر می‌کند. برای سرور ایرانی یا Docker باید جای دیگری یاد بگیرید.
- گواهی. منبع رایگان گواهی معتبری نمی‌دهد. البته آگهیها هم بیشتر نمونه کار میخواهند تا گواهی.
نتیجه عملی: اگر بودجه کم است، دوره رسمی رایگان را تا آخر بروید و یک دوره ضبط‌شده فارسی ارزان را برای فصلهای سخت کنارش بگذارید. اگر بودجه کلاس دارید، کلاسی بگیرید که پروژه شما را بازبینی کند؛ این همان چیزی است که هیچ منبع رایگانی نمی‌دهد. نمودار زیر هزینه همه راه‌ها را کنار هم نشان میدهد.
پروژه Next.js را در ایران کجا اجرا کنیم و چطور امن نگه داریم؟
در جست‌وجوهای فارسی، «هاست نکست جی اس» و «سرور نکست جی اس» زیاد پرسیده میشود. جواب کوتاه: Next.js به سرویس خاصی بسته نیست. سه راه دارید:
- سرور Node.js: با next build و next start روی هر سرور مجازی که Node.js نسخه ۲۰٫۹ یا بالاتر دارد. همه امکانات Next.js در این حالت کار می‌کند.
- Docker: با خروجی standalone یک تصویر کوچک ساخته میشود که روی سرویسهای ابری ایرانی که Docker می‌پذیرند اجرا میشود.
- خروجی استاتیک: اگر سایت به سرور نیاز ندارد، Next.js می‌تواند فقط فایل HTML بسازد که روی هاست معمولی هم بالا می‌آید؛ ولی Server Actions و صفحه‌های پویا در این حالت از دست می‌روند.
هاست اشتراکی معمولی که فقط PHP اجرا می‌کند برای Next.js کامل کافی نیست. این را پیش از خرید هاست بدانید.
چرا نسخه را باید به‌روز نگه داشت
در دو سال گذشته دو آسیب‌پذیری جدی در Next.js پیدا شد. در فروردین ۱۴۰۴ ایرادی در middleware اجازه می‌داد بررسی دسترسی دور زده شود (شدت ۹٫۱ از ۱۰). در آذر ۱۴۰۴ ایرادی در کامپوننت‌های سرور React با بالاترین شدت، یعنی ۱۰ از ۱۰، اجرای کد از راه دور را ممکن می‌کرد. هر دو با به‌روزرسانی بسته شدند. درس عملی برای دوره: جلسه انتشار باید به‌روزرسانی امن نسخه را هم درس بدهد، و پروژه‌ای که در رزومه می‌گذارید نباید روی نسخه کهنه بماند.
Next.js در مسیر کدام شغل‌ها می‌آید؟
در مسیر یادگیری راه تا کار، Next.js در سطح «ماهر» آمده است: بعد از React و JavaScript، کنار TypeScript.
برای توسعه‌دهنده فرانت اند، Next.js قدم بعد از React است و در آگهیها بیشتر از هر فریم‌ورک دیگری کنار React دیده میشود. برای توسعه‌دهنده فول استک، Next.js راهی است که سمت رابط و بخشی از سمت سرور را در یک پروژه نگه می‌دارد. هیچ‌کدام از این دو شغل فقط با یک دوره Next.js به دست نمی‌آید؛ صفحه هر شغل مسیر کامل را نشان میدهد.
دوره Next.js با پروژه واقعی برگزار می‌کنید؟
اگر آموزشگاه شما کلاس Next.js یا مسیر کامل وب برگزار می‌کند، می‌توانید آن را در راه تا کار به کسانی نشان دهید که همین حالا دنبال این دوره‌اند.
- ثبت‌نام با شماره موبایل و مشخصات آموزشگاه
- بررسی مدارک آموزشگاه به دست تیم راه تا کار
- صفحه اختصاصی آموزشگاه و ثبت دوره‌ها پس از تأیید
- بررسی هر دوره پیش از نمایش در صفحه
ثبت‌نام آموزشگاه در راه تا کار هزینه‌ای ندارد.
پرسش‌های رایج درباره دوره و یادگیری Next.js
آموزش next js چقدر طول می‌کشد؟
برای کسی که React را بلد است، یک دوره ۴۰ تا ۴۵ ساعتی به اضافه ۴۰ تا ۶۰ ساعت پروژه کافی است. با هفته‌ای ۱۰ ساعت، حدود دو تا سه ماه.
بدون React میشود Next.js یاد گرفت؟
نه به شکل درست. Next.js روی React ساخته شده و هر صفحه آن کامپوننت React است. دورههای جدی هم React را شرط ورود گذاشته‌اند.
Next.js بک اند هم هست؟
تا حدی. Server Actions و Route Handler اجازه میدهد فرم را پردازش کنید و API کوچک بنویسید. برای سیستم بزرگ با صف و سرویسهای جدا، هنوز یک بک اند مستقل لازم است.
نسخه ۱۵ را یاد بگیرم یا ۱۶؟
فرق این دو نسخه برای یادگیرنده زیاد نیست؛ هر دو App Router دارند. نسخه ۱۶ کش را صریح‌تر کرده و middleware را به proxy تغییر داده است. دوره نسخه ۱۵ هم قابل استفاده است، دوره نسخه ۱۳ و پایین‌تر نه.
آموزش next js رایگان کافی است؟
برای محتوا بله؛ دوره رسمی رایگان و مستندات کاملاند. چیزی که کم دارند بازبینی کد و پشتیبانی است. بسیاری از یادگیرندهها رایگان شروع میکنند و برای فصلهای سخت کلاس یا مشاور میگیرند.
کلاس next js بیرون از تهران هم برگزار میشود؟
دورههای حضوری بیشتر در تهران و اصفهان دیده شد. در شهرهای دیگر، کلاس آنلاین زنده همان آموزشگاهها گزینه نزدیک است. فهرست آموزشگاهها در همین صفحه بر پایه شهر شما مرتب میشود.
گواهی دوره Next.js در استخدام اثر دارد؟
کم. آگهیها نمونه کار و سابقه میخواهند. لینک یک پروژه منتشرشده و کد آن در گیتهاب بیشتر از گواهی دیده میشود.
بعد از Next.js چه چیزی یاد بگیرم؟
اگر فرانت اند هستید: تست، بهینهسازی سرعت و بعد Next.js پیشرفته. اگر فول استک هستید: پایگاه داده، Docker و امنیت وب.
Next.js برای سئو بهتر از React ساده است؟
بله. چون صفحه روی سرور ساخته میشود، متن آن بدون اجرای JavaScript به دست موتور جستوجو میرسد و ابزار Metadata برای عنوان و توضیح هر صفحه دارد.
برای یادگیری Next.js چه سیستمی لازم است؟
یک لپتاپ معمولی با ۸ گیگابایت حافظه کافی است. Node.js نسخه ۲۰٫۹ یا بالاتر و یک ویرایشگر کد رایگان لازم دارید؛ هیچ نرمافزار پولی لازم نیست.
پیش از انتخاب دوره، مسیر خودت را بشناس
تست راه تا کار ترجیح‌ها و علاقه‌های شغلی تو را نشان میدهد و شغل‌های نزدیک به آن را پیشنهاد می‌کند. جواب قطعی نیست، ولی کمک می‌کند دوره را برای مقصد درست انتخاب کنی.
شروع تست