آموزش Next js 15 رایگان و پروژه‌محور مرن‌فا

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

یکی از دلایلی که یادگیری Next.js را برای یک توسعه‌دهنده فرانت‌اند ارزشمند می‌کند، این است که در یک پروژه واقعی فقط ساخت component کافی نیست. شما به routing، مدیریت صفحات، دریافت داده، authentication، کنترل دسترسی، metadata، مدیریت خطا، loading state، بهینه‌سازی تصاویر، performance و در بسیاری از پروژه‌ها ارتباط با backend و database نیاز دارید. Next.js برای بخش بزرگی از این نیازها راهکارهای رسمی ارائه می‌کند.

در نسخه‌های جدید، به‌خصوص Next.js 16، تمرکز زیادی روی performance، routing، caching، توسعه سریع‌تر و معماری مدرن React وجود دارد. بنابراین اگر قصد دارید امروز Next.js را یاد بگیرید، بهتر است آموزش خود را صرفاً بر مبنای syntax نسخه‌های قدیمی قرار ندهید و مفاهیم جدید App Router، Server Components، data fetching، caching و ساختار مدرن پروژه را نیز یاد بگیرید.

React به شما اجازه می‌دهد رابط کاربری را با componentها بسازید. برای مثال می‌توانید یک دکمه، فرم، کارت محصول، header یا صفحه کامل را به componentهای قابل استفاده مجدد تبدیل کنید. اما زمانی که یک پروژه بزرگ‌تر می‌شود، موضوعاتی مانند routing، دریافت اطلاعات از سرور، authentication، SEO، مدیریت metadata و نحوه اجرای کدهای سمت سرور اهمیت بیشتری پیدا می‌کنند.

Next.js روی React ساخته شده و برای این مشکلات امکانات بیشتری ارائه می‌دهد. در Next.js می‌توانید ساختار مسیرها را با App Router مدیریت کنید، از Server Components در معماری App Router استفاده کنید، برای صفحات metadata تعریف کنید و بسته به نیاز پروژه از rendering و caching مناسب استفاده کنید.

بنابراین یادگیری React همچنان بخش مهمی از مسیر یادگیری Next.js است. توسعه‌دهنده‌ای که component، props، state، hooks، eventها، rendering و اصول React را به خوبی می‌شناسد، هنگام یادگیری Next.js راحت‌تر می‌تواند تفاوت بین کدهای client و server و معماری App Router را درک کند.

یکی از ویژگی‌های مهم Next.js انعطاف‌پذیری آن است. شما می‌توانید با آن یک سایت محتوایی ساده بسازید یا معماری بسیار بزرگ‌تری برای یک محصول SaaS ایجاد کنید. برای مثال یک وبلاگ آموزشی می‌تواند از صفحات محتوایی و metadata استفاده کند، در حالی که یک فروشگاه اینترنتی می‌تواند علاوه بر صفحات محصولات، authentication، shopping cart، پرداخت، dashboard و ارتباط با API داشته باشد.

در بازار کار نیز نام Next.js معمولاً در کنار React، TypeScript، Node.js، REST API، PostgreSQL، MongoDB، Prisma، Docker و ابزارهای مختلف frontend و backend دیده می‌شود. دلیل این موضوع این است که Next.js می‌تواند بخشی از معماری یک application کامل باشد و الزاماً فقط یک ابزار برای طراحی رابط کاربری نیست.

اگر می‌خواهید آموزش Next.js را اصولی دنبال کنید، بهتر است ابتدا JavaScript را در سطح قابل قبول یاد گرفته باشید. لازم نیست قبل از Next.js متخصص JavaScript باشید، اما مفاهیمی مانند function، array، object، destructuring، spread operator، asynchronous JavaScript، Promise، async/await، moduleها و کار با API را باید بشناسید.

بعد از JavaScript، یادگیری React اهمیت زیادی دارد. component، props، state، hooks، conditional rendering، list rendering و event handling از مفاهیم پایه‌ای هستند که در پروژه‌های Next.js دائماً با آنها مواجه خواهید شد. هرچه در React قوی‌تر باشید، درک معماری Next.js نیز برای شما ساده‌تر خواهد بود.

بعد از React می‌توانید سراغ Next.js بروید و در ادامه مسیر خود را به سمت backend توسعه دهید. در این مرحله آشنایی با HTTP، REST API، JSON، status codeها، authentication و database نیز بسیار مفید خواهد بود.

برای بسیاری از افرادی که قصد دارند به یک توسعه‌دهنده Full Stack JavaScript تبدیل شوند، یک مسیر منطقی می‌تواند از HTML و CSS و JavaScript شروع شود، سپس React و Next.js را پوشش دهد و بعد به Node.js و یکی از فریم‌ورک‌های backend مانند Express یا NestJS برسد.

نکته مهم این است که یادگیری ابزارها نباید به حفظ کردن APIها محدود شود. برای مثال اگر فقط بدانید چگونه در Next.js یک route ایجاد کنید، هنوز برای ساخت یک پروژه واقعی آماده نیستید. باید بدانید request چگونه به server می‌رسد، داده چگونه از database خوانده می‌شود، کاربر چگونه authenticate می‌شود، چه داده‌ای باید در server اجرا شود، چه بخشی به browser ارسال می‌شود و چگونه performance و امنیت پروژه را کنترل کنید.

هدف نهایی می‌تواند ساخت چند پروژه واقعی باشد؛ مثلاً یک وبلاگ، فروشگاه اینترنتی، سیستم احراز هویت، پنل مدیریت، سیستم تیکت یا یک پروژه SaaS. پروژه‌محور بودن باعث می‌شود مفاهیم Next.js، API، database و frontend به یکدیگر متصل شوند و یادگیری شما از حالت تئوری خارج شود.

اگر در منابع قدیمی با آموزش Next.js 12، Next.js 13، Next.js 14 یا Next.js 15 مواجه شده باشید، ممکن است بعضی مفاهیم و ساختارها برای شما گیج‌کننده باشند. Next.js در طول نسخه‌های مختلف تغییرات معماری مهمی داشته و App Router به یکی از بخش‌های اصلی توسعه مدرن Next.js تبدیل شده است.

Next.js 16 نیز روی توسعه سریع‌تر، routing، caching، rendering و ابزارهای توسعه تمرکز بیشتری دارد. در این نسخه Turbopack به صورت پیش‌فرض bundler پروژه‌های جدید است و قابلیت‌های جدیدی برای caching و Cache Components معرفی شده‌اند. همچنین نام فایل middleware در معماری جدید به proxy تغییر کرده است تا نقش آن در مرز شبکه واضح‌تر باشد.

بنابراین اگر امروز قصد یادگیری Next.js را دارید، پیشنهاد می‌شود در کنار آشنایی با مفاهیم قدیمی‌تر، معماری مدرن App Router و مفاهیم جدید rendering و caching را نیز یاد بگیرید. دانستن تفاوت بین نسخه‌های مختلف برای کار با پروژه‌های قدیمی هم اهمیت دارد، چون در بازار کار ممکن است با پروژه‌هایی مواجه شوید که هنوز از Pages Router استفاده می‌کنند.

بعد از یادگیری React و Next.js، یکی از مهارت‌های بسیار کاربردی برای ساخت رابط کاربری مدرن، یادگیری Tailwind CSS است. Tailwind یک فریم‌ورک utility-first برای CSS است که به شما اجازه می‌دهد بسیاری از ویژگی‌های ظاهری component را با utility classها در خود markup تعریف کنید.

در پروژه‌های Next.js استفاده از Tailwind CSS می‌تواند سرعت ساخت UI را افزایش دهد، مخصوصاً زمانی که componentهای زیادی مانند کارت محصول، فرم، navbar، modal، dashboard و جدول دارید. به جای ایجاد تعداد زیادی فایل CSS برای componentهای مختلف، می‌توانید بسیاری از ویژگی‌های layout، spacing، typography، رنگ، border، shadow و responsive behavior را مستقیماً با utilityها مدیریت کنید.

Tailwind همچنین رویکرد mobile-first دارد؛ یعنی ابتدا ظاهر پایه را برای اندازه‌های کوچک تعریف می‌کنید و سپس با breakpointهایی مانند sm، md، lg و xl رفتار رابط کاربری را برای صفحه‌های بزرگ‌تر تغییر می‌دهید. این روش برای ساخت سایت‌های responsive در Next.js بسیار کاربردی است.

Tailwind ابزار است و کیفیت نهایی رابط کاربری بیشتر به طراحی، معماری componentها، انتخاب spacing، typography، hierarchy بصری و تجربه کاربری بستگی دارد. استفاده از Tailwind به خودی خود یک سایت را زیبا یا حرفه‌ای نمی‌کند. شما باید بتوانید یک design system قابل استفاده مجدد ایجاد کنید و componentها را با ساختار مناسب طراحی کنید.

در یک پروژه واقعی Next.js می‌توانید componentهایی مانند Button، Input، Modal، Card، Header، Footer، ProductCard، Pagination و Form را بسازید و آنها را در صفحات مختلف استفاده کنید. این کار باعث می‌شود ظاهر سایت منسجم‌تر باشد و تغییرات آینده نیز راحت‌تر انجام شوند.

در پروژه‌های بزرگ‌تر بهتر است Tailwind را همراه با اصول component-based development، accessibility، responsive design و semantic HTML یاد بگیرید. استفاده درست از تگ‌هایی مانند header، nav، main، section، article و footer نیز علاوه بر ساختار بهتر HTML، به درک بهتر محتوای صفحه توسط ابزارها و موتورهای جستجو کمک می‌کند.

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

Tailwind با breakpointهای responsive این امکان را فراهم می‌کند که layout را بر اساس اندازه صفحه تغییر دهید. برای مثال می‌توانید یک grid را در موبایل تک ستونه، در tablet دو ستونه و در desktop چهار ستونه کنید. همین رویکرد را می‌توان برای typography، padding، gap، image size و حتی visibility بعضی از عناصر استفاده کرد.

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

بهتر است به جای جمله ساده «Next.js سئو دارد»، دقیق‌تر بگوییم که Next.js ابزارها و معماری‌هایی ارائه می‌دهد که پیاده‌سازی بسیاری از نیازهای فنی SEO را ساده‌تر می‌کند. برای مثال می‌توان metadata صفحه را مدیریت کرد، ساختار routeها را کنترل کرد، محتوای صفحه را با روش‌های مختلف rendering تولید کرد و روی performance و نحوه تحویل محتوا کنترل بیشتری داشت.

موتورهای جستجو مانند Google می‌توانند JavaScript را اجرا کنند؛ بنابراین اینکه یک سایت با React ساخته شده باشد به معنی غیرقابل ایندکس بودن آن نیست. با این حال، نحوه rendering، زمان دریافت محتوا، ساختار HTML و کیفیت تجربه کاربر می‌تواند روی وضعیت فنی و عملکرد سایت اثر بگذارد. به همین دلیل انتخاب معماری مناسب برای هر صفحه مهم است.

اگر صفحه‌ای محتوایی است و محتوای آن برای موتور جستجو اهمیت دارد، بهتر است rendering و data fetching آن را با دقت طراحی کنیم. هدف این نیست که برای همه صفحات یک روش واحد استفاده کنیم؛ بلکه باید بر اساس نوع داده، میزان تغییر محتوا، تعامل کاربر و نیازهای performance تصمیم بگیریم.

Metadata اطلاعاتی درباره صفحه است که در document و بخش‌های مرتبط با آن قرار می‌گیرد و به موتورهای جستجو و سرویس‌های دیگر کمک می‌کند موضوع صفحه را بهتر درک کنند. عنوان صفحه، description، canonical، Open Graph و اطلاعات مرتبط با اشتراک‌گذاری از جمله مواردی هستند که در پروژه‌های واقعی باید به آنها توجه شود.

در Next.js می‌توان metadata را با APIهای رسمی فریم‌ورک مدیریت کرد. این موضوع باعث می‌شود به جای اینکه تمام اطلاعات head را به صورت دستی در تمام صفحات مدیریت کنیم، بتوانیم metadata را در سطح layout یا page تعریف و در صورت نیاز برای صفحات داینامیک تولید کنیم.

برای مثال در یک فروشگاه اینترنتی، عنوان و description صفحه محصول باید با همان محصول هماهنگ باشد. در یک سایت آموزشی نیز عنوان مقاله یا دوره باید به صورت واضح موضوع صفحه را مشخص کند. استفاده از titleهای تکراری یا descriptionهای یکسان برای همه صفحات معمولاً ساختار محتوایی مناسبی ایجاد نمی‌کند.

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

استفاده صحیح از H1، H2 و H3 به ساختاردهی محتوا کمک می‌کند. یک صفحه معمولاً باید یک موضوع اصلی داشته باشد و زیرموضوع‌ها را می‌توان با headingهای سطح پایین‌تر سازمان‌دهی کرد. در کنار headingها، paragraphهای واضح، listها، جدول‌ها، لینک‌های داخلی و تصاویر مناسب می‌توانند خوانایی صفحه را افزایش دهند.

در همین صفحه نیز تلاش شده عبارت‌هایی مانند «آموزش Next.js»، «Next.js چیست»، «آموزش Next.js 16»، «SEO در Next.js»، «React»، «Tailwind CSS»، «Node.js»، «Express» و «NestJS» به شکل طبیعی و در موضوعات مرتبط استفاده شوند، نه اینکه فقط برای افزایش تراکم کلمات کلیدی در متن تکرار شوند.

یکی از مهم‌ترین موضوعات در آموزش Next.js، درک روش‌های مختلف rendering است. در یک پروژه واقعی همه صفحات الزاماً نباید با یک روش ساخته شوند. بعضی صفحات محتوای تقریباً ثابت دارند، بعضی صفحات اطلاعات داینامیک دارند و بعضی صفحات به تعامل شدید کاربر وابسته هستند.

در Server-Side Rendering یا SSR، صفحه در سمت سرور برای درخواست تولید می‌شود. این روش برای بعضی صفحات با داده داینامیک می‌تواند مناسب باشد. در Static Generation، محتوای صفحه می‌تواند از قبل تولید شود و برای صفحاتی که تغییرات کمی دارند بسیار کاربردی است. در مدل‌های incremental و caching نیز می‌توان محتوای تولیدشده را برای مدت مشخصی نگهداری و در زمان مناسب به‌روزرسانی کرد.

Client-Side Rendering یا CSR نیز برای بخش‌هایی که تعامل شدید کاربر دارند کاربرد زیادی دارد. برای مثال یک پنل کاربری، فرم پیچیده یا بخشی از یک dashboard ممکن است نیاز بیشتری به اجرای کد در browser داشته باشد. نکته اصلی این است که rendering strategy باید بر اساس نیاز واقعی صفحه انتخاب شود، نه اینکه صرفاً تصور کنیم SSR همیشه بهتر یا SEO-friendlyتر است.

در معماری App Router، یکی از مفاهیم مهم Server Components و Client Components است. این تفکیک به توسعه‌دهنده اجازه می‌دهد مشخص کند کدام بخش از component باید در محیط سرور اجرا شود و کدام بخش به browser و قابلیت‌های تعاملی نیاز دارد.

componentهایی که به state، event handlerهای مرورگر، بعضی browser APIها یا hookهای مخصوص client نیاز دارند، معمولاً باید به عنوان Client Component تعریف شوند. در مقابل، بسیاری از componentهای نمایش‌دهنده محتوا یا componentهایی که داده را در server دریافت می‌کنند، می‌توانند Server Component باقی بمانند.

درک این تفاوت یکی از مهم‌ترین بخش‌های آموزش Next.js جدید است؛ زیرا معماری App Router با ذهنیت قدیمی «همه componentها در browser اجرا می‌شوند» متفاوت است. اگر توسعه‌دهنده بتواند مرز server و client را درست طراحی کند، معمولاً کنترل بهتری روی JavaScript ارسالی به browser و ساختار کلی application خواهد داشت.

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

Next.js امکانات مختلفی برای بهینه‌سازی در اختیار توسعه‌دهنده قرار می‌دهد. استفاده صحیح از next/image، کنترل rendering، caching، code splitting، lazy loading، routing و prefetching می‌تواند در معماری یک پروژه نقش داشته باشد. البته استفاده از این قابلیت‌ها بدون درک نیاز پروژه می‌تواند نتیجه مطلوبی نداشته باشد؛ بنابراین اندازه bundle، درخواست‌های شبکه، حجم تصاویر و رفتار componentها باید بررسی شوند.

در Next.js 16 نیز بخش قابل توجهی از تغییرات روی performance و developer experience متمرکز شده است. Turbopack به عنوان bundler پیش‌فرض و بهبودهای مربوط به routing، prefetching و caching بخشی از این تغییرات هستند.

Node.js زبان برنامه‌نویسی جدیدی نیست؛ بلکه یک runtime برای اجرای JavaScript خارج از مرورگر است. این ویژگی باعث شده توسعه‌دهندگان JavaScript بتوانند علاوه بر frontend، در سمت server نیز با همان زبان برنامه‌نویسی کنند.

با Node.js می‌توان HTTP server ساخت، API ایجاد کرد، فایل‌ها را مدیریت کرد، با database ارتباط برقرار کرد، authentication پیاده‌سازی کرد، queue و background job ایجاد کرد و سرویس‌های مختلف backend را توسعه داد. البته Node.js به تنهایی تمام این معماری‌ها را به شکل آماده در اختیار شما قرار نمی‌دهد و معمولاً از packageها و frameworkهای مختلف در کنار آن استفاده می‌شود.

یادگیری Node.js برای یک توسعه‌دهنده Next.js نیز بسیار مفید است، زیرا کمک می‌کند درک بهتری از request، response، HTTP، cookie، header، authentication، API و server-side execution داشته باشید.

Express.js یک web framework سبک و انعطاف‌پذیر برای Node.js است. Express امکاناتی مانند routing و middleware را در اختیار توسعه‌دهنده قرار می‌دهد و به همین دلیل ساخت REST API و serverهای HTTP با آن نسبتاً ساده است.

در Express معمولاً routeهایی مانند GET، POST، PATCH، PUT و DELETE ایجاد می‌کنیم و برای هر route handler مربوط به آن را تعریف می‌کنیم. همچنین middlewareها می‌توانند در چرخه request و response قرار بگیرند و وظایفی مانند authentication، logging، validation، parsing یا مدیریت خطا را انجام دهند.

یکی از ویژگی‌های مهم Express آزادی عمل بالای آن است. Express ساختار اجباری بسیار محدودی برای پروژه تحمیل می‌کند و شما می‌توانید معماری پروژه را متناسب با نیاز خود طراحی کنید. این آزادی برای پروژه‌های کوچک و متوسط می‌تواند مفید باشد، اما در پروژه‌های بزرگ لازم است توسعه‌دهنده خودش اصول معماری، separation of concerns، validation، error handling و ساختار پوشه‌ها را با دقت طراحی کند.

NestJS یک فریم‌ورک برای ساخت برنامه‌های backend روی Node.js است که معماری ساختاریافته‌تری ارائه می‌کند. NestJS معمولاً با مفاهیمی مانند Module، Controller، Provider، Service و Dependency Injection شناخته می‌شود.

در NestJS می‌توانید هر بخش از application را به صورت یک feature module سازمان‌دهی کنید. برای مثال در یک فروشگاه اینترنتی می‌توان moduleهایی برای users، authentication، products، orders، payments، tickets و notifications داشت. هر module می‌تواند controllerها، serviceها و providerهای مرتبط با همان بخش را در خود نگهداری کند.

این ساختار برای پروژه‌های بزرگ و تیمی اهمیت زیادی دارد، زیرا وقتی تعداد featureها و فایل‌های پروژه افزایش پیدا می‌کند، داشتن مرزهای مشخص بین بخش‌های مختلف باعث می‌شود توسعه و نگهداری application ساده‌تر شود.

Express و NestJS را نباید صرفاً بر اساس اینکه کدام یک «بهتر» است مقایسه کرد؛ آنها رویکرد متفاوتی نسبت به ساخت backend دارند. Express یک framework سبک و انعطاف‌پذیر است و ساختار پروژه را تا حد زیادی به تصمیمات توسعه‌دهنده واگذار می‌کند.

NestJS در مقابل، مجموعه‌ای از الگوهای معماری و ساختار مشخص‌تری ارائه می‌دهد. Module، Controller، Provider، Dependency Injection، Guard، Pipe، Interceptor و Exception Filter از جمله مفاهیمی هستند که در معماری NestJS استفاده می‌شوند.

اگر با Express کار کرده باشید، یادگیری NestJS می‌تواند به شما کمک کند همان مفاهیم HTTP و backend را در یک معماری منظم‌تر دنبال کنید. از طرف دیگر، یادگیری Express باعث می‌شود بفهمید در لایه پایین‌تر request و response و middleware چگونه کار می‌کنند. برای یک Full Stack JavaScript Developer، شناخت هر دو می‌تواند دید مناسبی نسبت به اکوسیستم Node.js ایجاد کند.

یکی از سوالات رایج این است که اگر Next.js قابلیت‌های server-side و route handler دارد، چرا باید Express یا NestJS یاد بگیریم؟ پاسخ به معماری پروژه بستگی دارد.

Next.js می‌تواند برای بسیاری از پروژه‌ها بخش‌هایی از backend application را نیز پوشش دهد. برای مثال می‌توانید server-side logic، route handler، authentication logic و ارتباط با سرویس‌های دیگر را در معماری Next.js داشته باشید. این مدل برای پروژه‌هایی که frontend و backend آنها ارتباط نزدیکی دارند می‌تواند مناسب باشد.

اما در پروژه‌های بزرگ‌تر ممکن است بخواهید frontend و backend را کاملاً از یکدیگر جدا کنید. در این حالت Next.js می‌تواند frontend باشد و یک backend مستقل با NestJS یا Express ساخته شود. این معماری برای پروژه‌هایی که چند client مانند web، mobile app و admin panel دارند می‌تواند کاربردی باشد.

بنابراین یادگیری NestJS یا Express به این معنی نیست که Next.js دیگر لازم نیست. برعکس، ترکیب Next.js در frontend و NestJS یا Express در backend یکی از معماری‌های رایج برای ساخت applicationهای Full Stack JavaScript است.

API یکی از مهم‌ترین مفاهیمی است که هر توسعه‌دهنده Full Stack باید یاد بگیرد. API راهی برای ارتباط بین بخش‌های مختلف یک سیستم است. برای مثال frontend می‌تواند درخواست دریافت لیست محصولات را به backend ارسال کند و backend اطلاعات مورد نیاز را از database خوانده و به صورت JSON برگرداند.

این backend می‌تواند با Next.js، Express یا NestJS ساخته شده باشد. frontend نیز می‌تواند یک Next.js application، اپلیکیشن موبایل یا هر client دیگری باشد. همین جداسازی باعث می‌شود مفهوم API در معماری نرم‌افزار بسیار مهم باشد.

در یک پروژه واقعی باید مفاهیمی مانند HTTP methods، status codeها، request body، query parameters، route parameters، headers، cookies، authentication و error handling را یاد بگیرید. این مفاهیم صرفاً مربوط به Express یا NestJS نیستند و در اکثر backend applicationها کاربرد دارند.

authentication یکی از بخش‌های مهم پروژه‌های واقعی است. در یک سایت فروشگاهی، آموزشی یا SaaS معمولاً باید بتوانیم ثبت‌نام، ورود، خروج، بازیابی رمز عبور و مدیریت session یا token را پیاده‌سازی کنیم.

روش پیاده‌سازی authentication به معماری پروژه بستگی دارد. ممکن است frontend و backend در یک application باشند یا frontend در Next.js و backend در NestJS یا Express جدا شده باشد. در هر حالت باید تفاوت authentication و authorization را بدانید.

Authentication پاسخ می‌دهد «کاربر چه کسی است؟» و Authorization مشخص می‌کند «این کاربر چه کاری اجازه دارد انجام دهد؟». در پروژه‌های حرفه‌ای معمولاً علاوه بر login، موضوعاتی مانند role، permission، refresh token، cookie، session، CSRF و امنیت API نیز اهمیت پیدا می‌کنند.

frontend و backend بدون لایه داده در بسیاری از پروژه‌ها کاربرد محدودی خواهند داشت. در یک فروشگاه اینترنتی باید کاربران، محصولات، سفارش‌ها، پرداخت‌ها و آدرس‌ها در database ذخیره شوند. در یک سایت آموزشی نیز دوره‌ها، درس‌ها، کاربران، کامنت‌ها و پرداخت‌ها معمولاً به persistence نیاز دارند.

توسعه‌دهنده Full Stack بهتر است حداقل با مفاهیم پایه database آشنا باشد؛ مفاهیمی مانند table، relation، primary key، foreign key، index، transaction و query برای پروژه‌های واقعی بسیار مهم هستند.

در اکوسیستم Node.js و Next.js می‌توان از databaseهای مختلف مانند PostgreSQL و MySQL یا MongoDB استفاده کرد. همچنین ابزارهایی مانند Prisma می‌توانند کار با databaseهای رابطه‌ای را در پروژه‌های JavaScript و TypeScript ساده‌تر کنند.

برای مثال فرض کنید می‌خواهیم یک فروشگاه اینترنتی حرفه‌ای بسازیم. می‌توانیم frontend را با Next.js 16 و Tailwind CSS توسعه دهیم. صفحات محصولات، دسته‌بندی‌ها، صفحه اصلی، مقالات و landing pageها در Next.js قرار می‌گیرند و componentهای قابل استفاده مجدد رابط کاربری را تشکیل می‌دهند.

سپس می‌توانیم backend مستقلی با NestJS ایجاد کنیم. backend مسئول users، products، orders، payments، addresses، authentication و سایر business logicها خواهد بود. این backend می‌تواند به PostgreSQL متصل شود و APIهای مورد نیاز frontend را ارائه کند.

در چنین معماری‌ای frontend و backend دو بخش مشخص دارند، اما از طریق API با یکدیگر ارتباط برقرار می‌کنند. این مدل علاوه بر اینکه برای یادگیری Full Stack بسیار مناسب است، شما را با معماری‌هایی آشنا می‌کند که در پروژه‌های تجاری بزرگ‌تر نیز قابل استفاده هستند.

قبل از React و Next.js باید پایه‌های وب را بشناسید. HTML ساختار صفحه را ایجاد می‌کند، CSS مسئول ظاهر و layout است و JavaScript رفتار و منطق تعاملی صفحه را مدیریت می‌کند. اگر این سه بخش را به صورت سطحی یاد بگیرید، درک بسیاری از مشکلات frontend در پروژه‌های واقعی دشوار خواهد شد.

در JavaScript بهتر است فقط syntax را حفظ نکنید. باید مفاهیمی مانند scope، closure، object، array methods، destructuring، modules، Promise، async/await و کار با JSON را به شکل عملی یاد بگیرید.

در React باید component-based development را یاد بگیرید. ساخت component، props، state، event handling، conditional rendering، list rendering، hooks و مدیریت فرم از مفاهیم مهم این مرحله هستند.

هدف از یادگیری React این نیست که چند component ساده بسازید؛ بلکه باید بتوانید یک رابط کاربری واقعی را به بخش‌های قابل نگهداری تقسیم کنید. این مهارت بعداً در Next.js نیز مستقیماً استفاده خواهد شد.

بعد از React می‌توانید وارد Next.js شوید. در این مرحله باید routing، layouts، pages، dynamic routes، loading، error handling، Server Components، Client Components، data fetching و metadata را یاد بگیرید.

در نسخه‌های جدید Next.js، App Router بخش مهمی از مسیر یادگیری است. بهتر است فقط syntax فایل‌ها را حفظ نکنید؛ بلکه دلیل وجود server و client boundary و نحوه انتقال داده بین آنها را نیز درک کنید.

در این مرحله می‌توانید Tailwind CSS را به صورت جدی وارد پروژه‌های خود کنید. هدف این نیست که فقط classهای زیادی بنویسید؛ باید بتوانید responsive layout، design system، componentهای reusable و UI منسجم ایجاد کنید.

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

بعد از تسلط مناسب روی frontend، باید با backend و Node.js آشنا شوید. HTTP، REST API، middleware، authentication، authorization، validation و database از موضوعات مهم این مرحله هستند.

سپس می‌توانید Express.js را یاد بگیرید تا ساخت API با Node.js را درک کنید و بعد سراغ NestJS بروید تا معماری ساختاریافته‌تر backend، module، controller، provider و dependency injection را تجربه کنید.

در این مرحله باید بتوانید یک پروژه را از ابتدا تا انتها طراحی کنید. انتخاب database، طراحی schema، relationها، indexها، API endpointها و ساختار backend همگی اهمیت دارند.

برای مثال می‌توانید PostgreSQL را یاد بگیرید و سپس Prisma را برای کار با database در پروژه Node.js یا NestJS استفاده کنید. بعد از آن بهتر است transaction، pagination، filtering، sorting و query optimization را نیز یاد بگیرید.

یادگیری برنامه‌نویسی بدون ساخت پروژه واقعی معمولاً باعث می‌شود بسیاری از مفاهیم فقط در ذهن شما باقی بمانند. یک پروژه واقعی شما را مجبور می‌کند authentication، validation، error handling، database، file upload، pagination، search، caching و deployment را در کنار یکدیگر حل کنید.

برای همین در مسیر آموزش Next.js در مرن فا نیز تمرکز روی پروژه‌هایی مانند فروشگاه، وبلاگ، احراز هویت و پروژه‌های کامل می‌تواند کمک کند تا مفاهیم جداگانه در یک application واقعی کنار یکدیگر قرار بگیرند.

یکی از اشتباهات رایج در مسیر یادگیری برنامه‌نویسی این است که فرد تصور کند با یادگیری یک framework آماده ورود به بازار کار خواهد بود. در عمل شرکت‌ها معمولاً به توسعه‌دهنده‌ای نیاز دارند که بتواند مسئله حل کند، کد قابل نگهداری بنویسد، API مصرف کند، خطاها را بررسی کند و با بخش‌های مختلف یک application کار کند.

برای مثال دانستن Next.js به تنهایی ممکن است برای ساخت یک رابط کاربری کافی باشد، اما برای ساخت یک فروشگاه واقعی باید authentication، database، payment، validation، API، security، caching و deployment را نیز بشناسید.

به همین دلیل بهتر است به جای دنبال کردن تعداد زیادی tutorial، چند پروژه را از ابتدا تا انتها بسازید و مشکلات واقعی آنها را حل کنید.

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

هدف از اشاره به این نمونه‌ها این نیست که ساختار فنی داخلی آنها را بدون منبع قطعی فرض کنیم؛ بلکه می‌توان از محصولات واقعی به عنوان نمونه‌ای برای بررسی UX، routing، صفحات محتوا، فرم‌ها، جستجو، فروشگاه و معماری تجربه کاربر استفاده کرد. هنگام مطالعه یک سایت واقعی بهتر است به جای حدس زدن تکنولوژی‌های پشت آن، روی مفاهیم قابل مشاهده و اصول قابل انتقال تمرکز کنیم.