跳到主要内容

Next.js 简介

Next.js 是一个基于 React 的框架，用于构建现代 Web 应用程序。它提供了许多开箱即用的功能，如服务器端渲染（SSR）、静态站点生成（SSG）、API 路由等，使得开发者能够更高效地构建高性能的 Web 应用。

什么是 Next.js？​

Next.js 是由 Vercel 团队开发的一个 React 框架，旨在简化 React 应用的开发流程。它通过提供一系列内置功能，帮助开发者快速构建高性能、可扩展的 Web 应用。Next.js 的核心优势在于其支持多种渲染方式，包括客户端渲染（CSR）、服务器端渲染（SSR）和静态站点生成（SSG），这使得它能够适应各种不同的应用场景。

Next.js 的核心特性​

1. 服务器端渲染（SSR）​

服务器端渲染是指在服务器上生成 HTML 页面，并将其发送到客户端。这种方式可以提高页面的加载速度，并且对 SEO 友好。Next.js 通过 getServerSideProps 函数支持 SSR。

javascript
export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/data`);
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

function Page({ data }) {
  return <div>{data.message}</div>;
}

export default Page;

2. 静态站点生成（SSG）​

静态站点生成是指在构建时生成 HTML 页面，并将其作为静态文件提供给客户端。这种方式适用于内容不经常变化的页面。Next.js 通过 getStaticProps 函数支持 SSG。

javascript
export async function getStaticProps() {
  const res = await fetch(`https://api.example.com/data`);
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

function Page({ data }) {
  return <div>{data.message}</div>;
}

export default Page;

3. API 路由​

Next.js 允许你在 pages/api 目录下创建 API 路由，这些路由可以直接处理 HTTP 请求。这使得你可以在同一个项目中同时处理前端和后端逻辑。

javascript
// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, world!' });
}

4. 文件系统路由​

Next.js 使用文件系统作为路由系统。你只需在 pages 目录下创建文件，Next.js 就会自动为你生成相应的路由。例如，pages/about.js 会自动映射到 /about 路由。

javascript
// pages/about.js
export default function About() {
  return <div>About Us</div>;
}

实际应用场景​

1. 博客网站​

Next.js 非常适合用于构建博客网站。你可以使用 SSG 来生成静态页面，这样可以提高页面的加载速度，并且对 SEO 友好。

javascript
// pages/posts/[id].js
export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

2. 电子商务网站​

Next.js 也可以用于构建电子商务网站。你可以使用 SSR 来动态生成产品页面，确保用户能够看到最新的产品信息。

javascript
// pages/products/[id].js
export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/products/${params.id}`);
  const product = await res.json();

  return {
    props: {
      product,
    },
  };
}

export default function Product({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <p>Price: ${product.price}</p>
    </div>
  );
}

总结​

Next.js 是一个功能强大的 React 框架，它通过提供服务器端渲染、静态站点生成、API 路由等功能，使得开发者能够更高效地构建现代 Web 应用。无论你是构建博客、电子商务网站还是其他类型的应用，Next.js 都能为你提供强大的支持。

附加资源​

练习​

  1. 创建一个简单的 Next.js 应用，使用 SSG 生成一个静态页面。
  2. 在 Next.js 中创建一个 API 路由，返回一个简单的 JSON 响应。
  3. 使用 SSR 动态生成一个页面，显示从 API 获取的数据。
提示

在完成练习时，可以参考 Next.js 官方文档中的示例代码，帮助你更好地理解和使用 Next.js。