majiayu000 Next.js 15
Next.js is a React framework that provides server-side rendering, static site generation, API routes, and many other features for building modern web applications.
Quick Start (App Router)
npx create-next-app@latest my-app
cd my-app
npm run dev
Core Concepts
Server vs Client Components
Server Components (default):
- Run on the server
- Can access server-side resources (database, files)
- No JavaScript sent to client
- Can use async/await directly
// app/page.tsx
async function getPosts() {
const res = await fetch("https://api.example.com/posts");
return res.json();
}
export default async function Page() {
const posts = await getPosts();
return <PostList posts={posts} />;
}
Client Components (with 'use client'):
- Run on client and server
- Can use state, effects, browser APIs
- JavaScript sent to client
// components/Counter.tsx
"use client";
import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
return <button => setCount(count + 1)}>Count: {count}</button>;
}
Data Fetching Patterns
Static Data (Default):
// Cached until manually invalidated
export default async function Page() {
const data = await fetch("https://api.example.com/posts");
return <PostsList posts={await data.json()} />;
}
Dynamic Data (No Cache):
// Refetched on every request
export default async function Page() {
const data = await fetch("https://api.example.com/posts", {
cache: "no-store",
});
return <PostsList posts={await data.json()} />;
}
Revalidated Data:
// Revalidated every 60 seconds
export default async function Page() {
const data = await fetch("https://api.example.com/posts", {
next: { revalidate: 60 },
});
return <PostsList posts={await data.json()} />;
}
Route Handlers (API Routes)
Create API endpoints in the app directory:
// app/api/posts/route.ts
import { NextResponse } from "next/server";
export async function GET() {
const res = await fetch("https://api.example.com/posts");
const posts = await res.json();
return NextResponse.json(posts);
}
export async function POST(request: Request) {
const body = await request.json();
// Create post logic
return NextResponse.json({ success: true });
}
Layouts and Routing
Root Layout:
// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<Header />
<main>{children}</main>
<Footer />
</body>
</html>
);
}
Dynamic Routes:
// app/blog/[slug]/page.tsx
export default async function BlogPost({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const { slug } = await params;
const post = await getPost(slug);
return <article>{post.content}</article>;
}
Navigation
import Link from "next/link";
import { useRouter } from "next/navigation";
function Navigation() {
const router = useRouter();
return (
<nav>
<Link href="/about">About</Link>
<Link href="/blog/[slug]" as="/blog/hello-world">
Blog Post
</Link>
<button => router.push("/dashboard")}>Dashboard</button>
</nav>
);
}
Loading and Error States
Loading UI:
// app/dashboard/loading.tsx
export default function Loading() {
return <div>Loading dashboard...</div>;
}
Error Handling:
// app/dashboard/error.tsx
"use client";
export default function Error({
error,
reset,
}: {
error: Error;
reset: () => void;
}) {
return (
<div>
<h2>Something went wrong!</h2>
<button => reset()}>Try again</button>
</div>
);
}
Server Actions
// app/actions.ts
"use server";
export async function createPost(formData: FormData) {
const title = formData.get("title") as string;
// Database operation
revalidatePath("/blog"); // Update cache
}
// Usage in component
export default function CreatePostForm() {
return (
<form action={createPost}>
<input name="title" />
<button type="submit">Create Post</button>
</form>
);
}
Practical Examples
E-commerce Product Page
// app/products/[id]/page.tsx
import Image from "next/image";
import AddToCart from "./add-to-cart";
async function getProduct(id: string) {
const res = await fetch(`https://api.example.com/products/${id}`);
return res.json();
}
export default async function ProductPage({
params,
}: {
params: Promise<{ id: string }>;
}) {
const { id } = await params;
const product = await getProduct(id);
return (
<div>
<Image src={product.image} alt={product.name} width={300} height={300} />
<h1>{product.name}</h1>
<p>{product.description}</p>
<p>${product.price}</p>
<AddToCart productId={product.id} />
</div>
);
}
Blog with Search
// app/blog/page.tsx
import BlogList from "./blog-list";
import SearchForm from "./search-form";
export default async function BlogPage({
searchParams,
}: {
searchParams: Promise<{ query?: string }>;
}) {
const { query } = await searchParams;
const posts = await getPosts(query);
return (
<div>
<SearchForm initialQuery={query} />
<BlogList posts={posts} />
</div>
);
}
Dashboard with Real-time Data
// app/dashboard/page.tsx
import { Suspense } from "react";
import StatsCard from "./stats-card";
import RecentActivity from "./recent-activity";
export default function Dashboard() {
return (
<div>
<h1>Dashboard</h1>
<Suspense fallback={<div>Loading stats...</div>}>
<StatsCard />
</Suspense>
<Suspense fallback={<div>Loading activity...</div>}>
<RecentActivity />
</Suspense>
</div>
);
}
Requirements
- Node.js 18.17+ or 20+
- React 18+
- TypeScript (recommended)
- Modern web browser
Key Features
- App Router: New routing model with Server Components
- Server Components: Reduced client-side JavaScript
- Streaming: Progressive rendering with Suspense
- Route Handlers: Built-in API routes
- Server Actions: Form handling and mutations
- Optimized Builds: Fast builds with Turbopack
- Image Optimization: Automatic image optimization
- Font Optimization: Automatic web font optimization
Common Patterns
- Fetch data in Server Components, pass to Client Components
- Use Server Actions for form submissions
- Implement Loading states with Suspense
- Use dynamic routes for parameterized pages
- Leverage route groups for layout organization
- Use middleware for authentication and redirects
Best Practices
- Keep Server Components server-only (no state/effects)
- Minimize 'use client' usage
- Use TypeScript for better DX
- Implement proper error boundaries
- Use appropriate caching strategies
- Optimize images and fonts
- Structure routes logically