vault backup: 2026-06-05 18:15:42

2026-10-11 00:30:29 -04:00 · 2026-06-05 18:15:42 -04:00
parent 0fa1dec471
commit e314b05dac
17 changed files with 1213 additions and 30 deletions
@@ -0,0 +1,73 @@
+---
+tags:
+  - nextjs
+  - react
+  - frontend
+  - web-development
+created: 2026-06-05
+updated: 2026-06-05
+category: Documentation
+---
+
+# Next.js: The Complete Guide
+
+Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.
+
+## 1. Key Features
+
+### 🚀 Routing
+Next.js uses a file-system based router.
+- **App Router (Recommended):** Uses the `app` directory. Supports Shared Layouts, Nested Routing, Loading States, and Error Handling.
+- **Pages Router:** The legacy router using the `pages` directory.
+
+### 🌓 Rendering Strategies
+- **Server-Side Rendering (SSR):** Generates HTML on each request. Use `getServerSideProps` (Pages Router) or Server Components (App Router).
+- **Static Site Generation (SSG):** Generates HTML at build time. High performance, great for SEO.
+- **Incremental Static Regeneration (ISR):** Allows you to update static content after you've built your site, without needing to rebuild the entire site.
+- **Client-Side Rendering (CSR):** Standard React rendering in the browser.
+
+### ⚛️ Server vs. Client Components
+In the App Router:
+- **Server Components (Default):** Render on the server. They don't send JS to the client, reducing bundle size. Good for data fetching and SEO.
+- **Client Components:** Use the `'use client'` directive. Necessary for interactivity (hooks like `useState`, `useEffect`) and browser APIs.
+
+### 📥 Data Fetching
+Next.js extends the native `fetch` API to provide per-request caching and revalidation.
+- **Server-side fetching:** Fetch data directly in Server Components using `async/await`.
+- **Route Handlers:** Create custom request handlers for your API (like `GET`, `POST`).
+
+### 🎨 Styling
+- **CSS Modules:** Locally scoped CSS to avoid naming conflicts.
+- **Tailwind CSS:** Built-in support for the utility-first CSS framework.
+- **CSS-in-JS:** Support for libraries like `styled-components` or `emotion`.
+
+### ⚡ Optimizations
+- **Image Component (`next/image`):** Automatic image optimization, lazy loading, and WebP support.
+- **Font Optimization (`next/font`):** Automatically optimizes and loads custom fonts.
+- **Script Optimization (`next/script`):** Controls how third-party scripts are loaded.
+
+## 2. Project Structure (App Router)
+
+```text
+├── app/
+│   ├── layout.tsx      # Root Layout (required)
+│   ├── page.tsx        # Homepage
+│   ├── globals.css     # Global styles
+│   └── (routes)/       # Folder-based routing
+│       ├── about/
+│       │   └── page.tsx
+│       └── blog/
+│           ├── page.tsx
+│           └── [slug]/ # Dynamic routes
+│               └── page.tsx
+├── public/             # Static assets (images, icons)
+├── next.config.js      # Configuration for Next.js
+├── package.json        # Dependencies and scripts
+└── tsconfig.json       # TypeScript configuration
+```
+
+## 3. Deployment
+The creators of Next.js, **Vercel**, provide the easiest way to deploy Next.js applications with zero configuration. It can also be self-hosted using Node.js or Docker.
+
+---
+*Generated by Gemini CLI on 2026-06-05*