آموزش یادگیری Next.js

مقدمه Introduction

• سرعت بخشیدن به گردش کار خود با Next.js Speeding up your workflow with Next.js

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

• فایل های تمرین و آنچه شما نیاز دارید The exercise files and what you need

1. چرا Next.js را انتخاب کنید 1. Why Choose Next.js

• یادگیری اجزای سازنده یک برنامه کاربردی Learning the building blocks of an application

• چارچوب وب چیست؟ What is a web framework?

• کشف چارچوب Next.js Discovering the Next.js framework

• یادگیری مزایای Next.js Learning the benefits of Next.js

• امتحان فصل Chapter Quiz

2. شروع به کار و یادگیری اصول اولیه 2. Getting Started and Learning the Basics

• شروع به کار با ابزار Next.js Getting started with the Next.js tooling

• ایجاد صفحات جدید Creating new pages

• ساخت یک سیستم مسیریابی مبتنی بر فایل Building a file-based routing system

• ایجاد لینک برای پیمایش بین صفحات Creating links to navigate between pages

• راه اندازی مسیریابی پویا و URL ها Setting up dynamic routing and URLs

• چالش: یک سیستم مبتنی بر فایل با پیکربندی صفر راه اندازی کنید Challenge: Set up a file-based system with zero config

• راه حل: یک سیستم مبتنی بر فایل با پیکربندی صفر راه اندازی کنید Solution: Set up a file-based system with zero config

• امتحان فصل Chapter Quiz

3. پیش رندر و واکشی داده ها 3. Pre-rendering and Data Fetching

• کشف استراتژی های رندرینگ Discovering the rendering strategies

• کشف استراتژی های رندر با getStaticProps Discovering the rendering strategies with getStaticProps

• پیش رندر در زمان ساخت با تولید استاتیک Pre-rendering at build time with static generation

• پیش رندر کردن محتوای فوق سریع و فوق العاده با سئو کارآمد Pre-rendering super fast and super SEO-efficient content

• کشف استراتژی های رندر با getServerSideProps Discovering the rendering strategies with getServerSideProps

• استفاده از مسیرهای پویا و ورودی کاربر برای درخواست محتوا Using dynamic routes and user's input to query content

• جستجو، درخواست و پیش رندر محتوا با SSR Search, request, and pre-render content with SSR

• کشف استراتژی های رندر با getStaticPaths Discovering the rendering strategies with getStaticPaths

• پیش رندر در زمان ساخت با مسیرهای ثابت Pre-rendering at build time with static paths

• رسیدگی به خطاها با یک صفحه بازگشتی (404 یافت نشد) Handling errors with a fallback page (404 not found)

• سفارشی کردن صفحه خطا Customizing an error page

• چالش: پیش رندر در زمان ساخت در مقابل زمان اجرا Challenge: Pre-rendering at build vs. runtime

• راه حل: پیش رندر در زمان ساخت در مقابل زمان اجرا Solution: Pre-rendering at build vs. runtime

• امتحان فصل Chapter Quiz

4. Styling Your Next.js Application 4. Styling Your Next.js Application

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

• استفاده از CSS با محدوده با ماژول های CSS Using scoped CSS with CSS modules

• استایل کردن Next.js با JSX استایل‌دار Styling Next.js with styled JSX

• بارگذاری تصاویر ثابت Loading static images

• چالش: اضافه کردن یک ظاهر طراحی جهانی و محدوده Challenge: Add global and scoped styling

• راه حل: افزودن و نگهداری CSS در سطح جهانی Solution: Adding and maintain CSS globally

• امتحان فصل Chapter Quiz

نتیجه Conclusion

• بعد چه چیزی یاد بگیریم؟ What to learn next?