Next.js 15 入门指南

Next.js 是一个基于 React 的全栈框架，提供了出色的开发体验和生产级性能。

为什么选择 Next.js？

Next.js 提供了许多开箱即用的功能：

• 服务端渲染 (SSR) - 提升首屏加载速度和 SEO
• 静态站点生成 (SSG) - 构建时预渲染页面
• App Router - 基于文件系统的直观路由
• API 路由 - 轻松构建 API 端点

快速开始

bash
npx create-next-app@latest my-app
cd my-app
npm run dev

App Router 基础

Next.js 15 使用基于文件夹的路由系统：

tsx
// app/page.tsx - 首页
export default function Home() {
  return <h1>Welcome to Next.js!</h1>
}

// app/blog/page.tsx - 博客列表页
export default function BlogPage() {
  return <h1>Blog Posts</h1>
}

服务端组件

默认情况下，Next.js 中的组件都是服务端组件：

tsx
// 这是一个服务端组件
async function getData() {
  const res = await fetch('https://api.example.com/data')
  return res.json()
}

export default async function Page() {
  const data = await getData()
  return <main>{/* 使用数据 */}</main>
}

总结

Next.js 15 带来了许多激动人心的新功能，是构建现代 Web 应用的绝佳选择。