یادگیری Next.js

Learning Next.js

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

سرفصل ها و درس ها

مقدمه Introduction

  • فایل های تمرینی Exercise files

  • آنچه شما باید بدانید What you should know

  • Next.js: یک چارچوب React توسط توسعه دهندگان، برای توسعه دهندگان Next.js: A React framework by developers, for developers

1. شروع به کار و کشف Next.js 1. Getting Started and Discovering Next.js

  • Next.js چیست؟ What is Next.js?

  • ایجاد پروژه بلاگ و کاوش در آناتومی برنامه Creating the Blog project and exploring the app anatomy

  • راه اندازی محیط توسعه Setting up the development environment

  • مزایای استفاده از Next.js The benefits of using Next.js

2. ساختن برنامه خود با روتر برنامه 2. Building Your Application with App Router

  • ایجاد صفحات و طرح بندی Creating pages and layouts

  • راه حل: یک مسیر اضافه کنید Solution: Add a route

  • یک مسیر پویا ایجاد کنید Create a dynamic route

  • چالش: یک مسیر اضافه کنید Challenge: Add a route

  • ایجاد یک طرح بندی مشترک بین صفحات Creating a shared layout between pages

  • پیمایش بین صفحات Navigating between pages

3. سبک دادن به برنامه شما: CSS و فونت های سفارشی 3. Styling Your Application: CSS and Custom Fonts

  • یک ظاهر طراحی شرطی را با clsx اعمال کنید Apply conditional styling with clsx

  • استفاده از ماژول های CSS برای کامپوننت ها Using CSS modules for components

  • اضافه کردن سبک های جهانی Adding global styles

  • با استفاده از Tailwind CSS Using Tailwind CSS

  • چالش: بهینه سازی تصاویر و فونت ها Challenge: Optimizing images and fonts

  • راه حل: بهینه سازی تصاویر و فونت ها Solution: Optimizing images and fonts

4. استقرار و اتصال به منبع داده 4. Deploy and Connect to a Data Source

  • یک مخزن GitHub ایجاد کنید و پروژه را فشار دهید Create a GitHub repository and push the project

  • راه اندازی پایگاه داده PostgreSQL Setting up a PostgreSQL database

  • پروژه خود را متصل کرده و اجرا کنید Connect and deploy your project

  • ایجاد یک حساب کاربری Vercel Creating a Vercel account

  • راه حل: تغییرات را بنویسید و فشار دهید و سپس مجدداً گسترش دهید Solution: Write and push changes then redeploy

  • چالش: تغییرات را بنویسید و فشار دهید و سپس مجدداً گسترش دهید Challenge: Write and push changes then redeploy

5. واکشی داده ها 5. Fetching Data

  • چالش: داده ها را در پایگاه داده وارد کنید Challenge: Insert data to the database

  • راه حل: داده ها را در پایگاه داده وارد کنید Solution: Insert data to the database

  • از پرس و جوهای SQL برای واکشی داده ها استفاده کنید Use SQL queries to fetch data

  • پایگاه داده را بسازید و پرس و جوهای SQL را اجرا کنید Seed the database and execute SQL queries

  • کشف روش های مختلف واکشی داده ها Discovering the different ways of fetching data

6. مدیریت خطاها، پیش رندر، ذخیره سازی و بهینه سازی 6. Handling Errors, Pre-rendering, Caching, and Optimizing

  • پخش جریانی و رندر جزئی را با صفحه بارگیری فعال کنید Enable streaming and partial rendering with a loading page

  • رسیدگی به خطاها با صفحه خطا: error.tsx Handling errors with an error page: error.tsx

  • چالش: مدیریت خطاهای 404 با توابع notFound Challenge: Handling 404 errors with notFound functions

  • رندر استاتیک در مقابل رندر پویا Static rendering vs. dynamic rendering

  • رندر پویا بدون کش Dynamic rendering without caching

  • اضافه کردن اسکلت های بارگیری Adding loading skeletons

  • راه حل: مدیریت خطاهای 404 با توابع notFound Solution: Handling 404 errors with notFound functions

7. افزودن احراز هویت 7. Adding Authentication

  • محافظت از صفحات و مسیرهای API Protecting pages and API routes

  • با حساب جیمیل خود وارد شوید Sign in with your Gmail account

  • راه اندازی NextAuth.js Setting up NextAuth.js

  • ایجاد مسیرها و مؤلفه های تأیید اعتبار Creating the auth routes and components

  • چالش: احراز هویت و ایجاد پست Challenge: Authenticate and create posts

  • افزودن ارائه‌دهنده اعتبار Google Adding the Google credentials provider

  • شروع کار با NextAuth.js Getting started with NextAuth.js

  • راه حل: احراز هویت و ایجاد پست Solution: Authenticate and create posts

8. هوش مصنوعی مولد: با OpenAI یک چت بات بسازید 8. Generative AI: Build a Chatbot with OpenAI

  • درخواست هایی را برای ایجاد تکمیل با ChatCompletion API تعریف کنید Define requests to generate completion with the ChatCompletion API

  • یک پروژه را تنظیم و پیکربندی کنید Set up and configure a project

  • نوشتن پست های وبلاگ با محتوای تولید شده توسط هوش مصنوعی Writing blog posts with AI-generated content

نتیجه گیری Conclusion

  • مراحل بعدی Next steps

نمایش نظرات

Linkedin (لینکدین)

لینکدین: شبکه اجتماعی حرفه‌ای برای ارتباط و کارآفرینی

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

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

یادگیری Next.js
جزییات دوره
3h 25m
49
Linkedin (لینکدین) Linkedin (لینکدین)
(آخرین آپدیت)
1,637
- از 5
ندارد
دارد
دارد
Sandy Ludosky
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Sandy Ludosky Sandy Ludosky

توسعه دهنده وب و مربی

سندی لودوسکی کار خود را به عنوان مشاور فناوری اطلاعات در کانادا آغاز کرد.

پس از توسعه وردپرس، سندی شروع به توسعه اپلیکیشن های موبایل iOS با زبان سوئیفت کرد.

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