mirror of
https://github.com/Rainyy21/framework_note.git
synced 2026-10-10 23:40:30 -04:00
vault backup: 2026-06-05 18:15:42
This commit is contained in:
Rainyy21
@@ -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*
|
||||
@@ -0,0 +1,58 @@
|
||||
---
|
||||
category: Website Builder
|
||||
type: AI-Driven Digital Experience Platform
|
||||
pricing_tiers:
|
||||
- Free: $0
|
||||
- Light: $17/mo
|
||||
- Core: $29/mo
|
||||
- Business: $39/mo
|
||||
- Business Elite: $159/mo
|
||||
pros:
|
||||
- AI-powered site generation (Aria)
|
||||
- All-in-one platform (hosting, CRM, marketing)
|
||||
- No transaction fees on e-commerce
|
||||
- Leading SEO tools for AI search (AEO)
|
||||
cons:
|
||||
- Template lock-in
|
||||
- Non-transferable sites
|
||||
- Potential performance lag with heavy media
|
||||
- Premium app costs can accumulate
|
||||
target_audience:
|
||||
- Solopreneurs
|
||||
- Small Businesses
|
||||
- Service Providers
|
||||
- Boutique E-commerce
|
||||
latest_major_update: "Wix Harmony & Aria (2026)"
|
||||
---
|
||||
|
||||
# Wix Rundown (2026)
|
||||
|
||||
Wix has evolved into a sophisticated **AI-driven digital experience platform**, moving beyond its origins as a simple drag-and-drop website builder.
|
||||
|
||||
## 🚀 Key Features
|
||||
- **Wix Aria:** A conversational AI agent that allows for "vibe coding"—building and refining sites through natural language prompts.
|
||||
- **Kleo (AI Marketing Agent):** An autonomous assistant for social media management, marketing plans, and ad campaigns.
|
||||
- **Answer Engine Optimization (AEO):** Native tools to optimize your site for LLM-based search engines like ChatGPT and Gemini.
|
||||
- **Wix Studio:** A high-end workspace for agencies and designers requiring advanced CSS control and multi-site management.
|
||||
|
||||
## 💰 Pricing (Billed Annually)
|
||||
| Plan | Price (Monthly) | Best For |
|
||||
| :--- | :--- | :--- |
|
||||
| **Free** | $0 | Testing & personal projects |
|
||||
| **Light** | $17 | Portfolios & blogs (Removes ads) |
|
||||
| **Core** | $29 | Small business e-commerce (Sweet spot) |
|
||||
| **Business** | $39 | Scaling businesses (10 collaborators) |
|
||||
| **Business Elite** | $159 | High-performance brands |
|
||||
|
||||
## ✅ Pros
|
||||
- **Extreme Speed:** AI can generate a functional skeleton in minutes.
|
||||
- **Seamless Integration:** Native hosting, security, and CRM work out of the box.
|
||||
- **AEO Ready:** Optimized for the next generation of search.
|
||||
|
||||
## ❌ Cons
|
||||
- **Platform Lock-in:** You cannot export your site to another host like WordPress.
|
||||
- **Design Constraints:** Switching templates usually requires starting from scratch.
|
||||
- **Cost Scaling:** Premium apps in the marketplace can quickly increase monthly overhead.
|
||||
|
||||
## 🎯 Target Audience
|
||||
Wix is the premier choice for **non-technical business owners** and **agencies** who prioritize speed, integrated marketing tools, and AI-assisted growth. It is less suited for massive e-commerce operations requiring complex logistics or developers needing total backend control.
|
||||
Reference in New Issue
Block a user