PROWIDIT Education Academy

Blog
About us
How it works
FAQ

+994 77 333 38 36 Trial lesson Account

AZ RU EN

← Back to account

Switch courseNext.js course

AI for developers course104
Algorithms and data structures course129
Django & FastAPI course140
Docker & deployment course103
Full Stack Developer course270
Git & GitHub course103
HTML & CSS course154
JavaScript course169
Laravel course136
Provider Networks: MPLS, BGP and BNG81
Next.js course113
Node.js course123
PHP course144
Python course153
React course122
SQL & databases course122
TypeScript course112
Vue.js course111

Getting Started with Next.js
What Next.js Adds to React Free
Creating a Project with create-next-app
Project Structure: app, public and Config Files
dev, build and start: Development and Production Builds
How Next.js Renders a Page: Server, HTML and Hydration
next.config.ts, TypeScript and ESLint in a Project
Routing and Navigation
File-Based Routing: Folders, page.tsx and Nested Routes
Layouts: Root and Nested Layouts
Navigation with the Link Component
Programmatic Navigation: useRouter, usePathname, useParams
Dynamic Segments: [id] and Async params
Catch-All Segments: [...slug] and [[...slug]]
Route Groups and Private Folders
Search Params: Keeping State in the URL
Redirects and Rewrites: redirect(), permanentRedirect() and next.config
Project: Multi-Page Portfolio Website
Special Files and Advanced Routing
Loading UI: loading.tsx and Skeletons
Error Handling: error.tsx and global-error.tsx
404 Pages: notFound() and not-found.tsx
template.tsx and the Special File Hierarchy
Parallel Routes: @folder Slots and default.tsx
Intercepting Routes: Modals with Their Own URL
Project: Photo Gallery with Modal Viewer
Server and Client Components
Server Components: Components That Run on the Server
The 'use client' Directive and Client Boundaries
Passing Data from Server to Client Components
Composition Patterns: Server Components Inside Client Components
Context and Providers in the App Router
Third-Party Client Libraries and next/dynamic
Hydration Errors: Causes and Fixes
Project: Migrating a React SPA to Server Components
Styling, Fonts and Images
Tailwind CSS v4 in Next.js: Setup and Theme
CSS Modules, Global Styles and Sass
UI Components: shadcn/ui, cn() and Variants with cva
Dark Mode with next-themes Without Flicker
Fonts: next/font/google and Local Fonts
Images: The next/image Component
Third-Party Scripts: next/script and @next/third-parties
Data Fetching and Streaming
Environment Variables: .env and NEXT_PUBLIC_
Fetching Data in Server Components
Async Request APIs: cookies(), headers() and params
Parallel vs Sequential Fetching: Avoiding Waterfalls
Streaming with Suspense: Rendering a Page in Parts
The use() Hook: Passing Promises to Client Components
Client-Side Fetching: TanStack Query and SWR
Project: Exchange Rates and Weather Dashboard
Route Handlers and Proxy (Middleware)
Route Handlers: API Endpoints in the app Folder
Route Handlers: Params, Request Body and Responses
CORS, Webhooks and Streaming Responses in Route Handlers
Proxy (Formerly Middleware): Intercepting Requests Before Rendering
Proxy in Practice: Redirects, A/B Tests and Headers
Rendering and Caching
Static vs Dynamic Rendering
generateStaticParams: Static Pages for Dynamic Routes
How Caching Works in Next.js
Caching fetch: cache, revalidate and tags
ISR: Time-Based Incremental Static Regeneration
On-Demand Revalidation: revalidatePath and revalidateTag
The 'use cache' Directive: cacheLife and cacheTag
Partial Prerendering: Static Shell and Dynamic Holes
Project: News Site with ISR and Revalidation
Databases: PostgreSQL, Prisma and Drizzle
PostgreSQL and Prisma: Connecting to a Project
Prisma Schema, Migrations and Seeding
Prisma Queries: Create, Read, Update, Delete
Relations in Prisma: One-to-Many and Many-to-Many
Transactions and Database Error Handling
Drizzle ORM: TypeScript Schema and SQL-Like Queries
Data Access Layer: DAL, DTO and React cache()
Database-Side Search, Filters and Pagination
Project: Product Catalog with Search and Filters
Server Actions and Forms
Server Actions: The 'use server' Directive and Forms
Data Mutations: Server Actions, revalidatePath and redirect
Server-Side Form Validation with Zod
useActionState and useFormStatus: Form State
Server Actions Outside Forms: useTransition and bind
Optimistic Updates with useOptimistic
Complex Forms: React Hook Form, Zod and Server Actions
File Uploads with Server Actions
Server Actions Security
Project: Full-Stack Task Manager with Server Actions
Authentication and Authorization
Authentication Basics: Sessions, Cookies and JWT
Auth.js v5: Setup and Sign-In with GitHub
User Session in Server and Client Components
Users in the Database: Prisma Adapter and Callbacks
Multiple Providers, Google and a Custom Sign-In Page
Registration and Email/Password Sign-In
Protecting Routes: Proxy, DAL and Server Actions
Authorization: Roles, Permissions and Data Ownership
Project: Protected Dashboard with Roles
SEO, Content and Internationalization
Metadata API: Titles, Descriptions and Open Graph
Dynamic Metadata: generateMetadata
sitemap.xml, robots.txt, Icons and Manifest
Dynamic OG Images with ImageResponse
JSON-LD Structured Data and an SEO Checklist
MDX: Markdown Articles with React Components
Project: MDX Blog
Internationalization: [locale] Routes and Language Detection
Translations with next-intl: Messages, Numbers and Dates
Multilingual SEO: hreflang and Localized URLs
Project: Multilingual Landing Page (az/ru/en)
Professional Practices: Testing, Performance, Security
Logging and Error Monitoring: instrumentation.ts and Sentry
Unit Tests: Vitest and React Testing Library
End-to-End Tests with Playwright
Core Web Vitals: Measurement and Optimization
Less JavaScript: Bundle Analysis and React Compiler
App Security: Headers, CSP and Data Protection
Pages Router vs App Router: Comparison and Migration
Deployment and Final Project
Deploying to Vercel
Self-Hosting: Node.js Server, Standalone Output and Nginx
Docker: Containerizing Next.js with PostgreSQL
Static Export: output: 'export'
Final Project: Idea, Architecture and Data Schema
Final Project: Building the Core Features
Final Project: Testing, Optimization, Deployment and Presentation

Next.js course · Deployment and Final Project

Deploying to Vercel

🔒 This is the beginning of the lesson. The full lesson is available with a subscription.

Create account Log in

← Previous lesson🔒 Pages Router vs App Router: Comparison and Migration Next lesson →🔒 Self-Hosting: Node.js Server, Standalone Output and Nginx

PROWIDIT Education Academy

Online programming courses in Baku. Live lessons in Azerbaijani and Russian, 80% practice, mentor support and job placement assistance.

Front End

HTML & CSS JavaScript TypeScript React Next.js Vue.js

Back End

SQL (PostgreSQL, MySQL) PHP Laravel Python Algorithms Django & FastAPI Node.js Full Stack

Tools & AI

Git & GitHub Docker & deployment AI for developers

Useful links

Free trial lesson Mentoring & interviews For companies Blog FAQ

Contacts

+994 77 333 38 36 info@prowid.com Video lessons Send a request

© 2021–2026 Prowid — IT Education Academy. All rights reserved. Baku, Azerbaijan