Next.js 15 完全指南
从零开始学习 Next.js 15，包括 App Router、Server Components、数据获取和部署等核心概念。
TailG Team
👁 0 views❤️ 0 likesNext.js 15 完全指南
Next.js 15 是 React 全栈框架的最新版本，带来了许多强大的功能。
App Router
文件系统路由
app/
page.tsx # 首页
blog/
page.tsx # 博客列表
[slug]/
page.tsx # 博客详情
布局系统
export default function Layout({ children }) {
return (
<html>
<body>
<nav>导航栏</nav>
{children}
<footer>页脚</footer>
</body>
</html>
);
}
Server Components
Server Components 允许你在服务器端渲染 React 组件：
async function BlogPost() {
const post = await fetchPost();
return <article>{post.content}</article>;
}
数据获取
Fetch API
const data = await fetch('https://api.example.com/data', {
next: { revalidate: 3600 }
});
数据库查询
import { sql } from '@/lib/db';
const posts = await sql`SELECT * FROM posts`;
部署
Vercel
最简单的部署方式：
npm install -g vercel
vercel
Cloudflare Workers
使用 OpenNext.js 部署到 Cloudflare：
npx opennextjs-cloudflare
最佳实践
- 使用 Server Components 获取数据
- 客户端组件添加 'use client'
- 合理使用 ISR 和 SSG
- 优化图片使用 next/image
总结
Next.js 15 提供了构建现代 Web 应用所需的一切工具。
Loading comments...