mirror of
https://github.com/Rainyy21/framework_note.git
synced 2026-10-10 23:40:30 -04:00
Rainyy21
74 lines
3.2 KiB
Markdown
74 lines
3.2 KiB
Markdown
---
|
|
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*
|