初探 Next.js：构建现代化 React 应用的利器

言兴
159 阅读4分钟

Next.js 是一个基于 React 的服务端渲染（SSR）、静态站点生成（SSG）和现代化 Web 应用的全栈框架。它由 Vercel 公司开发和维护，旨在提供一个开箱即用的、高性能的 React 开发体验。本文将带您快速上手 Next.js，了解其核心概念和基本用法。

一、为什么选择 Next.js？

在传统的 React 应用中，页面是在浏览器中通过 JavaScript 动态生成的（客户端渲染，CSR）。这带来了两个主要问题：

  1. SEO 不友好：搜索引擎爬虫可能无法正确抓取由 JavaScript 生成的内容。
  2. 首屏加载慢：用户需要等待所有 JavaScript 下载、解析、执行后才能看到内容。

Next.js 通过服务端渲染（SSR）和静态站点生成（SSG）解决了这些问题：

  • SSR：页面在服务器端生成 HTML，直接发送给浏览器，用户能快速看到内容，SEO 友好。
  • SSG：在构建时（build time）就生成所有 HTML 页面，部署后可直接由 CDN 提供，速度极快，成本低。

此外，Next.js 还提供了文件系统路由、API 路由、内置 CSS 支持、TypeScript 支持、Image 优化等众多开箱即用的功能。

二、快速开始：创建你的第一个 Next.js 应用

1. 创建项目

使用 create-next-app 脚手架工具，可以快速创建一个 Next.js 项目：

# 使用 npm
npx create-next-app@latest my-next-app

# 使用 yarn
yarn create next-app my-next-app

# 使用 pnpm
pnpm create next-app my-next-app

在创建过程中，您会被询问一些配置选项，如项目名称、是否使用 TypeScript、是否使用 ESLint、是否使用 Tailwind CSS 等。选择您需要的即可。

2. 项目结构

创建完成后，您的项目结构大致如下：

my-next-app/
├── public/           # 静态资源文件（图片、字体等）
│   └── vercel.svg
├── src/              # 源代码目录（可选，Next.js 也支持根目录）
│   ├── app/          # App Router 路由（Next.js 13+ 推荐）
│   │   ├── page.js   # 首页路由
│   │   └── layout.js # 布局组件
│   └── pages/        # Pages Router 路由（旧版，仍支持）
├── .gitignore
├── next.config.js    # Next.js 配置文件
├── package.json
└── README.md

注意：Next.js 13 引入了 App Router (app/ 目录)，它基于 React Server Components，是未来的方向。本文以 App Router 为例。

3. 核心概念：文件系统路由

Next.js 的最大特点之一是基于文件系统的路由。您无需手动配置路由，只需在 app/ 目录下创建文件，文件路径即对应 URL 路径。

  • app/page.js -> / (首页)
  • app/about/page.js -> /about
  • app/blog/[slug]/page.js -> /blog/first-post, /blog/second-post (动态路由)

4. 编写第一个页面

打开 app/page.js，您会看到类似以下代码：

// app/page.js
export default function Home() {
  return (
    <main>
      <h1>Welcome to Next.js!</h1>
      <p>This is the home page.</p>
    </main>
  );
}

这就是您的首页！Home 组件会被渲染到 / 路径。

5. 启动开发服务器

在项目根目录运行：

npm run dev

默认情况下，开发服务器会在 http://localhost:3000 启动。打开浏览器访问该地址，您就能看到您的页面了。

三、核心功能体验

1. 布局（Layouts）

布局组件允许您在多个页面之间共享 UI（如导航栏、页脚），并在页面切换时保持状态（如播放中的音乐）。

创建 app/layout.js：

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>
          <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
          </nav>
        </header>
        <main>{children}</main>
        <footer>&copy; 2025 My Next.js App</footer>
      </body>
    </html>
  );
}

children 是一个特殊的 prop，它代表当前页面的内容。所有在 app/ 目录下的页面都会使用这个布局。

2. 页面（Pages）

创建一个关于页面 app/about/page.js：

// app/about/page.js
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>We are a team building amazing web applications with Next.js.</p>
    </div>
  );
}

访问 http://localhost:3000/about，您会看到这个页面，并且共享了 layout.js 中的导航和页脚。

3. 静态站点生成（SSG）

Next.js 默认对页面进行 SSG。这意味着在 npm run build 时，所有静态页面都会被预先生成。

4. 服务端渲染（SSR）与数据获取

如果页面内容需要从外部 API 获取，您可以使用 async 组件或 generateStaticParams。

示例：获取博客文章列表

// app/blog/page.js
async function getPosts() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5');
  return res.json();
}

export default async function Blog() {
  const posts = await getPosts();

  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

注意：在 App Router 中，async 组件可以直接在服务器端执行 fetch，获取数据并渲染 HTML。

5. 动态路由

创建动态路由 app/blog/[slug]/page.js：

// app/blog/[slug]/page.js
export async function generateStaticParams() {
  // 在构建时生成所有可能的 slug
  const posts = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=3').then(res => res.json());
  return posts.map(post => ({
    slug: post.id.toString(),
  }));
}

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

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </article>
  );
}

运行 npm run build，Next.js 会根据 generateStaticParams 返回的 slug 列表，为每个 slug 预生成一个静态页面。

四、总结

Next.js 通过其文件系统路由、服务端渲染、静态生成等特性，极大地简化了现代 Web 应用的开发。它不仅提升了应用的性能和 SEO，还提供了开箱即用的开发体验。

本文只是一个初步的入门。Next.js 的功能远不止于此，还包括：

  • API Routes：在 app/api/ 目录下创建 API 端点。
  • Middleware：在请求到达页面前执行逻辑（如身份验证、重定向）。
  • Image Optimization：自动优化图片大小和格式。
  • Streaming and Suspense：实现更流畅的用户体验。
avatar
文章
阅读
粉丝