Next.js 学习笔记

Next.js 是由 Vercel 开发的 React 框架，它提供了许多开箱即用的功能，让构建现代 Web 应用变得更加简单。

为什么选择 Next.js？

1. 文件系统路由

Next.js 使用文件系统作为路由，只需要在 app 目录下创建文件夹和文件，就能自动生成路由：

app/
├── page.tsx        → /
├── about/
│   └── page.tsx    → /about
└── posts/
    └── [slug]/
        └── page.tsx → /posts/:slug

2. 服务端组件

Next.js 13+ 引入了 React Server Components，默认情况下所有组件都是服务端组件：

// 这是一个服务端组件，可以直接访问数据库
async function BlogPost({ slug }: { slug: string }) {
  const post = await getPost(slug);
  return <article>{post.content}</article>;
}

3. 自动代码分割

Next.js 会自动进行代码分割，只加载当前页面所需的 JavaScript，提升页面加载速度。

核心概念

App Router vs Pages Router

Next.js 14 推荐使用 App Router，它提供了：

• 嵌套布局


• 服务端组件


• 流式渲染


• 更好的数据获取方式

数据获取

在服务端组件中，可以直接使用 async/await：

async function Page() {
  const data = await fetch('https://api.example.com/data');
  const posts = await data.json();
  
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

总结

Next.js 是一个功能强大且易于上手的框架，非常适合构建现代化的 Web 应用。如果你正在学习 React，强烈推荐尝试 Next.js！