next.js

next.js

|── Getting Started
| ├── Installation
| ├── Project Structure
| └── Basic Routing
|
|── Routing
| ├── Client-Side Routing
| ├── Server-Side Routing
| ├── Dynamic Routing
| ├── Internationalized Routing
| ├── Nested Routes
| ├── Catch-All Routes
| ├── Route Interception
| └── 🆕 Parallel Routes (Future Next.js Feature)
|
|── Pages
| ├── Creating Pages
| ├── Pre-Rendering
| ├── Static Site Generation (SSG)
| ├── Server-Side Rendering (SSR)
| └── Incremental Static Regeneration (ISR)
|
|── Components
| ├── Functional Components
| ├── Class Components (Legacy)
| ├── Higher-Order Components (HOCs)
| ├── Built-in Components (next/image, next/link)
| ├── 🆕 React Server Components (Beta)
| └── 🆕 Partial Hydration (Selective Hydration)
|
|── API Routes
| ├── Creating API Routes
| ├── API Route Handlers
| ├── API Route Middleware
| ├── Edge Functions
| └── Serverless Functions vs. Edge Runtime
|
|── Data Fetching
| ├── Fetching Data with `fetch` API
| ├── Using SWR
| ├── Using React Query
| ├── GraphQL Integration
| └── 🆕 Streaming Data with Suspense
|
|── Styling
| ├── CSS Modules
| ├── Styled JSX
| ├── Tailwind CSS
| ├── CSS-in-JS Libraries
| ├── Global Styles and Theming
| └── CSS Container Queries
|
|── State Management
| ├── React Context API
| ├── Redux Integration
| ├── Zustand
| ├── Server-Side State
| └── Jotai/Recoil for Atomic State
|
|── Internationalization (i18n)
| ├── Configuring i18n
| ├── Translating Content
| ├── Language Detection
| └── Localized Routing (e.g., /en/about)
|
|── Static Site Generation (SSG)
| ├── Pre-Rendering Pages
| ├── getStaticProps
| └── getStaticPaths
|
|── Server-Side Rendering (SSR)
| ├── Rendering Pages on the Server
| ├── getServerSideProps
| ├── 🆕 Streaming SSR
| └── 🆕 Using Server Components
|
|── Authentication
| ├── Authenticating Users
| ├── Using NextAuth
| ├── Protecting Routes
| └── OAuth2/OpenID Connect Integration
|
|── Deployment
| ├── Deploying to Vercel
| ├── Deploying to Netlify
| ├── Deploying to Custom Servers
| ├── Monorepo Setup
| └── Turborepo for Monorepo Optimization
|
|── Optimization
| ├── Optimizing Images (next/image)
| ├── Optimizing Code (Code Splitting)
| ├── Optimizing Performance (Lighthouse)
| ├── Caching Strategies
| └── Preloading & Resource Hints
|
|── Security
| ├── Securing Your Application
| ├── Using HTTPS
| ├── Protecting Against Attacks (XSS, CSRF)
| ├── Security Headers (CSP, HSTS)
| └── Error Handling (Custom 404/500)
|
|── Testing
| ├── Writing Unit Tests
| ├── Writing Integration Tests
| ├── Using Jest
| ├── Playwright/Cypress for E2E Testing
| ├── Accessibility Testing
| └── Mocking API Responses
|
|── Debugging
| ├── Debugging Your Application
| ├── Using the Debugger
| └── Debugging Next.js Internals
|
|── Best Practices
| ├── Following Best Practices
| ├── Code Organization
| ├── Performance Optimization
| ├── SEO and Metadata
| └── Performance Budgets
|
|── Community
| ├── Joining the Community
| ├── Participating in Discussions
| └── Contributing to Next.js
|
|── Advanced Topics (Optional)
| ├── WebAssembly (Wasm) Integration
| ├── AI/ML in Next.js (Edge AI)
| ├── Web3 Integration (Blockchain)
| ├── Real-Time Collaboration (e.g., Liveblocks)
| └── 🆕 Server Actions (Next.js 13+)
|