Next.js 入门指南：深入构建服务器渲染的现代 Web 应用

文章目录

- 前言
- 一、安装 Next.js
- 二、配置 Next.js
- 三、页面路由
- 四、API 路由
- 五、数据获取
- 六、部署 Next.js 应用
- 结语

前言

Next.js 是一个基于 React 的开源框架，用于构建服务端渲染（SSR）的 Web 应用程序。它简化了许多复杂的配置，让开发者可以专注于编写应用逻辑而不是基础设施。本指南将详细介绍如何使用 Next.js 构建一个完整的应用程序，包括安装、配置、路由、API 路由等方面。

一、安装 Next.js

首先，确保你的机器上已经安装了 Node.js。你可以通过运行 node -v 命令来检查是否已安装以及安装的版本。如果尚未安装，请访问 Node.js官方网站下载并安装。

接下来，打开终端或命令提示符，使用以下命令创建一个新的 Next.js 应用：

npx create-next-app@latest my-next-app

按照提示完成项目初始化。这一步会询问你关于项目的一些基本信息，比如是否使用 TypeScript、ESLint 等。完成后，进入项目目录：

cd my-next-app

启动开发服务器以查看应用是否正常工作：

npm run dev

现在，你可以在浏览器中访问 http://localhost:3000 查看你的 Next.js 应用。

二、配置 Next.js

Next.js 提供了一个默认配置，适合大多数应用场景。然而，有时候我们可能需要进行额外的定制化配置。这些配置通常放在项目的根目录下的 next.config.js 文件中。

自定义环境变量
你可以在 .env.local 文件中定义环境变量，这些变量将在运行时可用。例如：

NEXT_PUBLIC_API_URL=https://api.example.com

注意前缀 NEXT_PUBLIC_，只有这样定义的变量才能在客户端代码中访问。

修改 Webpack 配置
如果你想扩展或修改 Webpack 配置，可以在 next.config.js 中这样做：

module.exports = {
  webpack: (config, { isServer }) => {
    // 扩展配置
    if (!isServer) {
      config.resolve.fallback = {
        fs: false,
        net: false,
      };
    }

    return config;
  },
};

三、页面路由

创建静态页面
创建一个简单的静态页面非常直接。在 pages 文件夹中创建一个新的 .js 文件，并导出一个函数组件：

// pages/about.js
export default function AboutPage() {
  return (
    <div>
      <h1>About Us</h1>
      <p>Welcome to our about page!</p>
    </div>
  );
}

动态路由
动态路由允许你根据 URL 参数显示不同的内容。例如，博客文章可以根据其 ID 显示特定的文章：

// pages/posts/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return <div>Post: {id}</div>;
}

四、API 路由

创建 API 路由
Next.js 内置了 API 路由的支持，这意味着你可以在同一个项目中处理前端和后端逻辑。API 路由位于 pages/api 目录下。创建一个简单的 API 路由来响应 GET 请求：

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' });
}

这个 API 可以通过发送 HTTP GET 请求到 /api/hello 来调用。

五、数据获取

静态生成
如果你的数据不需要经常更新，可以使用静态生成（SSG）：

// pages/posts/[id].js
export async function getStaticProps(context) {
  const res = await fetch(`https://.../posts/${context.params.id}`);
  const post = await res.json();

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

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

服务端渲染
对于需要在每次请求时都获取最新数据的情况，可以使用服务端渲染（SSR）：

// pages/posts/[id].js
export async function getServerSideProps(context) {
  const res = await fetch(`https://.../posts/${context.params.id}`);
  const post = await res.json();

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

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