یادگیری 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