Next.js

Next.js 章节详解

1. 章节介绍

2. 基础架构

Next.js 基于 React 构建，提供了一套完整的开发框架，简化了 React 应用的开发流程。其核心思想是“约定优于配置”，通过文件系统路由、内置优化等特性，降低了开发门槛，提高了开发效率。

图解：

• Client Browser: 用户的浏览器，发起请求。

• Next.js Server: Next.js 服务端，负责处理请求、渲染页面、提供 API 等。

• Pages Directory: 存放页面组件的目录，Next.js 基于此目录结构自动生成路由。

• React Components: 使用 React 构建的组件，用于渲染页面内容。

• API Routes: 在 pages/api 目录下定义的 API 路由，用于处理服务端请求。

• Middleware: 中间件，允许在请求到达路由之前运行代码，例如进行身份验证、重定向等。

• Data Fetching (SSR/SSG/ISR): 数据获取方式，包括服务端渲染 (SSR)、静态站点生成 (SSG) 和增量静态再生 (ISR)。

• Data Source (API/Database): 数据来源，可以是 API 接口或数据库。

• Static Assets: 静态资源，例如图片、CSS 文件等。

3. 页面路由

Next.js 使用文件系统路由，pages 目录下的每个文件都会自动生成一个路由。例如，pages/about.js 会生成 /about 路由。

代码示例：

// pages/index.js
function HomePage() {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <p>This is the home page.</p>
    </div>
  );
}
export default HomePage;
​

// pages/about.js
function AboutPage() {
  return (
    <div>
      <h1>About Us</h1>
      <p>Learn more about our company.</p>
    </div>
  );
}
export default AboutPage;
​

详解：

• 在 pages 目录下创建 index.js 文件，定义了首页组件 HomePage。

• 在 pages 目录下创建 about.js 文件，定义了关于页面组件 AboutPage。

• Next.js 会自动将 index.js 映射到根路由 /，将 about.js 映射到 /about 路由。

动态路由：

Next.js 支持动态路由，允许你创建基于参数的路由。例如，pages/posts/[id].js 可以匹配 /posts/1、/posts/2 等路由。

代码示例：

// pages/posts/[id].js
import { useRouter } from 'next/router';
function PostPage() {
  const router = useRouter();
  const { id } = router.query;
  return (
    <div>
      <h1>Post ID: {id}</h1>
      <p>This is the content of post {id}.</p>
    </div>
  );
}
export default PostPage;
​

详解：

• 使用 useRouter hook 获取 router 对象。

• 通过 router.query 获取路由参数，例如 id。

• 在组件中使用 id 参数来展示不同的内容。

4. 数据获取

Next.js 提供了多种数据获取方式，包括服务端渲染 (SSR)、静态站点生成 (SSG) 和增量静态再生 (ISR)。

服务端渲染 (SSR)：

在每次请求时，服务器都会重新渲染页面。适用于需要实时数据的场景。

// pages/ssr.js
export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return {
    props: {
      data,
    },
  };
}
function SSRPage({ data }) {
  return (
    <div>
      <h1>Server-Side Rendered Data</h1>
      <p>{JSON.stringify(data)}</p>
    </div>
  );
}
export default SSRPage;
​

详解：

• 使用 getServerSideProps 函数在服务端获取数据。

• 将获取到的数据作为 props 传递给组件。

• 组件在每次请求时都会重新渲染，展示最新的数据。

静态站点生成 (SSG)：

在构建时生成静态 HTML 文件。适用于内容不经常变化的场景，例如博客文章、文档等。

// pages/ssg.js
export async function getStaticProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return {
    props: {
      data,
    },
  };
}
function SSGPage({ data }) {
  return (
    <div>
      <h1>Static Site Generated Data</h1>
      <p>{JSON.stringify(data)}</p>
    </div>
  );
}
export default SSGPage;
​

详解：

• 使用 getStaticProps 函数在构建时获取数据。

• 将获取到的数据作为 props 传递给组件。

• Next.js 会在构建时生成静态 HTML 文件，提高性能。

增量静态再生 (ISR)：

结合了 SSR 和 SSG 的优点，允许你定期重新生成静态页面。适用于内容更新频率不高，但又需要保持一定新鲜度的场景。

// pages/isr.js
export async function getStaticProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return {
    props: {
      data,
    },
    revalidate: 10, // 每 10 秒重新生成页面
  };
}
function ISRPage({ data }) {
  return (
    <div>
      <h1>Incremental Static Regeneration</h1>
      <p>{JSON.stringify(data)}</p>
    </div>
  );
}
export default ISRPage;
​

详解：

• 使用 getStaticProps 函数在构建时获取数据。

• 设置 revalidate 属性，指定重新生成页面的时间间隔。

• Next.js 会在后台定期重新生成页面，保证内容的新鲜度。

5. API 路由

Next.js 允许你在 pages/api 目录下创建 API 路由，用于处理服务端请求。

代码示例：

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

详解：

• 在 pages/api 目录下创建 hello.js 文件。

• 定义 handler 函数，接收 req 和 res 对象。

• 使用 res.status 设置响应状态码，使用 res.json 发送 JSON 响应。

处理不同 HTTP 方法：

// pages/api/users.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // 获取用户列表
    res.status(200).json([{ id: 1, name: 'John Doe' }, { id: 2, name: 'Jane Doe' }]);
  } else if (req.method === 'POST') {
    // 创建新用户
    const { name } = req.body;
    // ... 保存用户到数据库
    res.status(201).json({ id: 3, name });
  } else {
    // 不支持的 HTTP 方法
    res.status(405).end();
  }
}
​

详解：

• 根据 req.method 判断 HTTP 方法。

• 根据不同的 HTTP 方法执行不同的逻辑。

• 使用 res.status(405).end() 返回 "Method Not Allowed" 错误。

6. 中间件

Next.js 中间件允许你在请求到达路由之前运行代码。可以用于身份验证、重定向、日志记录等。

代码示例：

// middleware.js
import { NextResponse } from 'next/server';
export function middleware(req) {
  // 检查用户是否已登录
  const isLoggedIn = req.cookies.get('loggedIn');
  // 如果用户未登录，并且请求的不是登录页面，则重定向到登录页面
  if (!isLoggedIn && req.nextUrl.pathname !== '/login') {
    return NextResponse.redirect(new URL('/login', req.url));
  }
  return NextResponse.next();
}
// 匹配需要应用中间件的路由
export const config = {
  matcher: ['/profile', '/dashboard'],
};
​

详解：

• 创建 middleware.js 文件。

• 定义 middleware 函数，接收 req 对象。

• 使用 req.cookies.get 获取 cookie。

• 使用 req.nextUrl.pathname 获取请求的路径。

• 使用 NextResponse.redirect 进行重定向。

• 使用 config.matcher 指定需要应用中间件的路由。

7. 优化策略

Next.js 提供了多种优化策略，帮助你构建高性能的 Web 应用程序。

• 代码分割： Next.js 会自动将代码分割成多个 chunk，只加载当前页面需要的代码。

• 图片优化： Next.js 提供了 <Image> 组件，可以自动优化图片大小、格式和加载方式。

• 字体优化： 使用 next/font 可以优化字体加载，避免阻塞渲染。

• 缓存： 使用 HTTP 缓存、浏览器缓存和 CDN 缓存，减少服务器负载，提高加载速度。

• 压缩： 使用 Gzip 或 Brotli 压缩静态资源，减少传输大小。

8. 总结

本章节介绍了 Next.js 的核心概念和实践技巧，包括页面路由、数据获取、API 路由、中间件和优化策略。掌握这些知识，可以帮助你构建高性能、可扩展的 Web 应用程序。Next.js 的强大之处在于其灵活性和易用性，它允许开发者根据项目需求选择最合适的数据获取方式和优化策略。希望本章节能为你提供一个坚实的 Next.js 基础，让你能够更自信地应对各种 Web 开发挑战。