Next.Js (React.JS framework) 12 Sections142 Lessons1 Quiz10 Weeks
Curriculum
- 12 Sections
- 142 Lessons
- 10 Weeks
Expand all sectionsCollapse all sections
- Introduction to Next.js9 ItemsIntroduction to Next JS and comparison with other frameworks.
- 1.1What is Next.js?10 Minutes
- 1.2Why use Next.js?
- 1.3Next.js vs React10 Minutes
- 1.4Next.js vs other frameworks
- 1.5Key features and achitecture
- 1.6How Rendering Works in Next.js
- 1.7App Router vs. Pages Router: Navigating Next.js Routing Systems
- 1.8Prerequisites: HTML, CSS, JavaScript and React
- 1.9Introduction to Next JS10 Minutes5 Questions
- Installation and setup9 ItemsInstallation and setup Next.js
- Routing, pages and layout15 ItemsRouting, pages and layout
- 3.1File-system-based routing
- 3.2Creating pages with page.tsx
- 3.3Shared layouts with layout.tsx
- 3.4Nested layouts
- 3.5Link component and navigation
- 3.6Dynamic route segments
- 3.7Catch-all and optional catch-all routes
- 3.8Route groups
- 3.9Private folders
- 3.10Loading UI with loading.tsx
- 3.11Error handling with error.tsx
- 3.12not-found.tsx
- 3.13Parallel routes
- 3.14Intercepting routes
- 3.15Programmatic navigation and redirects
- React component and fundamentals11 ItemsReact component and fundamentals
- 4.1React components in Next.js
- 4.2Server Components
- 4.3Client Components
- 4.4The use client directive
- 4.5Choosing server or client rendering
- 4.6Composing server and client components
- 4.7Props and component reuse
- 4.8State and event handlers
- 4.9Forms and controlled inputs
- 4.10Context and providers
- 4.11Third-party client libraries
- Styling, assets and user interface (UI)10 Items
- Data fetching and rendering13 Items
- 6.1Fetching data in Server Components
- 6.2Using the fetch API
- 6.3Database and ORM integration
- 6.4Fetching in Client Components
- 6.5Sequential vs parallel fetching
- 6.6Data loading states
- 6.7Streaming and Suspense
- 6.8Static rendering
- 6.9Dynamic rendering
- 6.10Server-side rendering concepts
- 6.11Client-side rendering
- 6.12Partial prerendering concepts
- 6.13Environment variables and server-only code
- Caching and data updates11 Items
- 7.1Understanding cache fundamentals
- 7.2Data Cache and rendered output
- 7.3Cache Components and the use cache directive
- 7.4Cache boundaries and lifetimes
- 7.5Revalidation strategies
- 7.6Time-based revalidation
- 7.7On-demand revalidation
- 7.8revalidatePath
- 7.9revalidateTag
- 7.10Request deduplication
- 7.11Optimistic UI and fresh data
- Backend development and mutations12 Items
- Authentication and Security12 Items
- 9.1Authentication vs authorization
- 9.2Sessions and cookies
- 9.3Login and logout flows
- 9.4Protecting routes and layouts
- 9.5Authorization checks near data access
- 9.6Role-based access control
- 9.7Using authentication libraries
- 9.8Environment secrets
- 9.9Input validation
- 9.10CSRF and request security
- 9.11Content Security Policy
- 9.12Data security and safe serialization
- SEO, performance and accessibility14 Items
- 10.1Metadata API
- 10.2Dynamic metadata
- 10.3Open Graph images
- 10.4Sitemaps and robots.txt
- 10.5Canonical URLs
- 10.6Font and image optimization
- 10.7Link prefetching
- 10.8Lazy loading
- 10.9Bundle analysis
- 10.10Core Web Vitals
- 10.11Accessibility fundamentals
- 10.12Analytics and Speed Insights
- 10.13Internationalization
- 10.14Redirects and rewrites
- Testing, deployment and production13 Items
- 11.1Unit and component testing
- 11.2Jest and Vitest
- 11.3End-to-end testing with Playwright or Cypress
- 11.4Build and production start
- 11.5Deployment to a managed platform
- 11.6Self-hosting with Node.js or Docker
- 11.7Static export
- 11.8CI/CD pipelines
- 11.9Logging and monitoring
- 11.10Instrumentation and OpenTelemetry
- 11.11Production security checklist
- 11.12Troubleshooting and debugging
- 11.13Upgrading Next.js and codemods
- Advanced topics and Pages Router14 Items
- 12.1Middleware concepts and Proxy conventions
- 12.2Edge Runtime
- 12.3Custom servers
- 12.4Multi-Zones
- 12.5Progressive migration from Pages Router
- 12.6Pages Router pages and layouts
- 12.7getStaticProps
- 12.8getServerSideProps
- 12.9getStaticPaths
- 12.10API Routes
- 12.11Pages Router data fetching
- 12.12useRouter and router events
- 12.13Legacy image and head APIs
- 12.14Migrating Pages Router applications
Next.js vs React
| React | Next.js |
|---|---|
| UI library | React-based application framework |
| Routing usually needs a separate library | File-system routing is built in |
| Rendering architecture is chosen by the developer or tooling | Supports server and client rendering patterns |
| Backend APIs require separate infrastructure or libraries | Can provide Route Handlers and Server Functions |
| Optimization depends on the chosen stack | Provides framework-level optimizations |