Next.js

Next.js 是一个基于 React 的开源 JavaScript 框架，用于构建服务器渲染（SSR）或静态生成的 Web应用。由 Vercel 公司开发和维护，Next.js 提供了开箱即用的功能，如路由、代码分割、静态导出和服务器端渲染，使得开发者能够快速构建高性能的现代 Web 应用。

核心特性[编辑 | 编辑源代码]

Next.js 提供了多项强大的功能，使其成为构建现代 Web 应用的理想选择：

服务器端渲染（SSR）：Next.js 支持在服务器端预渲染页面，提升首屏加载速度和 SEO 优化。
静态站点生成（SSG）：支持生成静态 HTML 文件，适合内容不频繁变化的网站。
混合渲染模式：允许开发者按页面选择渲染方式（SSR、SSG 或客户端渲染）。
文件系统路由：基于文件目录自动生成路由，无需额外配置。
API 路由：内置 API 路由功能，可直接在项目中编写后端逻辑。
图像优化：自动优化图片，支持懒加载和多种格式转换。
快速刷新（Fast Refresh）：开发时提供即时反馈，提升开发体验。

安装与使用[编辑 | 编辑源代码]

要开始使用 Next.js，需要先安装 Node.js 和 npm（或 Yarn）。以下是创建一个新 Next.js 项目的步骤：

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

运行后，Next.js 开发服务器会启动，默认访问 `http://localhost:3000`。

基本页面示例[编辑 | 编辑源代码]

Next.js 使用文件系统路由，在 `pages` 目录下创建的文件会自动成为路由。例如，创建 `pages/about.js` 会自动生成 `/about` 路由：

// pages/about.js
export default function About() {
  return <h1>关于我们</h1>;
}

渲染模式[编辑 | 编辑源代码]

Next.js 支持多种渲染模式，开发者可以根据需求选择：

静态生成（SSG）[编辑 | 编辑源代码]

适合内容不频繁变化的页面，在构建时生成 HTML：

// pages/index.js
export default function Home({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

// 在构建时获取数据
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  return { props: { posts } };
}

服务器端渲染（SSR）[编辑 | 编辑源代码]

适合需要频繁更新或依赖用户请求的页面：

// pages/profile.js
export default function Profile({ user }) {
  return <div>用户名: {user.name}</div>;
}

// 每次请求时获取数据
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/user');
  const user = await res.json();
  return { props: { user } };
}