跳到主要内容

Next.js框架基础

Next.js 是一个基于 React 的框架，专为构建现代 Web 应用而设计。它提供了开箱即用的服务端渲染（SSR）、静态站点生成（SSG）和客户端渲染（CSR）等功能，使得开发者能够轻松构建高性能的应用程序。本文将带你了解 Next.js 的基础知识，并通过实际案例展示其核心功能。

什么是服务端渲染（SSR）？​

服务端渲染（Server-Side Rendering, SSR）是指在服务器端生成 HTML 页面并将其发送到客户端的技术。与传统的客户端渲染（CSR）不同，SSR 可以在服务器端完成页面的渲染工作，从而加快页面的加载速度，并改善搜索引擎优化（SEO）。

Next.js 通过内置的 SSR 功能，使得开发者无需额外配置即可实现服务端渲染。

Next.js 的核心功能​

1. 页面路由​

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

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

访问 /about 时，Next.js 会自动渲染 About 组件。

2. 服务端渲染（SSR）​

Next.js 提供了 getServerSideProps 函数，用于在服务器端获取数据并渲染页面。以下是一个简单的示例：

jsx
// pages/user/[id].js
export default function User({ user }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

export async function getServerSideProps(context) {
  const { id } = context.params;
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  const user = await res.json();

  return {
    props: {
      user,
    },
  };
}

在这个示例中，getServerSideProps 函数会在每次请求时运行，获取用户数据并将其传递给 User 组件。

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

Next.js 还支持静态站点生成（SSG），即在构建时生成静态 HTML 页面。使用 getStaticProps 函数可以在构建时获取数据并生成页面。

jsx
// pages/posts/[id].js
export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

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

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

export async function getStaticPaths() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

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

  return {
    paths,
    fallback: false,
  };
}

在这个示例中，getStaticProps 和 getStaticPaths 函数用于在构建时生成静态页面。

4. API 路由​

Next.js 提供了内置的 API 路由功能，允许你在 pages/api 目录下创建 API 端点。

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

访问 /api/hello 时，Next.js 会返回 { message: 'Hello, world!' }。

实际案例：构建一个博客应用​

让我们通过一个简单的博客应用来展示 Next.js 的实际应用场景。

1. 创建博客页面​

首先，创建一个显示博客文章的页面：

jsx
// pages/index.js
export default function Home({ posts }) {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

2. 创建博客详情页面​

接下来，创建一个显示单个博客文章的页面：

jsx
// pages/posts/[id].js
export default function Post({ post }) {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

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

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

export async function getStaticPaths() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

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

  return {
    paths,
    fallback: false,
  };
}

3. 运行应用​

现在，你可以运行 npm run dev 启动开发服务器，并访问 http://localhost:3000 查看博客应用。

总结​

Next.js 是一个功能强大的框架，能够帮助你轻松构建现代 Web 应用。通过本文，你已经了解了 Next.js 的基础知识，包括页面路由、服务端渲染、静态站点生成和 API 路由。我们还通过一个简单的博客应用展示了 Next.js 的实际应用场景。

附加资源​

练习​

  1. 尝试扩展博客应用，添加一个评论功能。
  2. 使用 getServerSideProps 实现一个动态加载数据的页面。
  3. 创建一个自定义 API 端点，返回当前时间。
提示

在练习过程中，如果遇到问题，可以参考 Next.js 官方文档或社区资源。