Next.js 是一个强大的 React 框架，支持服务端渲染、静态生成等多种渲染模式。本文将通过一个全栈项目案例，展示如何使用 Next.js 构建高性能的 Web 应用。

什么是 Next.js?

Next.js 是一个用于生产环境的 React 框架，它提供了许多开箱即用的功能，如服务端渲染（SSR）、静态站点生成（SSG）、自动代码分割、文件系统路由等。

项目结构

Next.js 遵循约定优于配置的原则，通过文件系统来定义路由。一个典型的 Next.js 项目结构如下：

my-app/
├─ .next/
├─ node_modules/
├─ pages/
│  ├─ api/
│  ├─ _app.js
│  ├─ _document.js
│  ├─ index.js
│  └─ ...
├─ public/
├─ styles/
├─ package.json
└─ ...

页面和路由

在 Next.js 中，pages 目录下的每个文件都对应一个路由。例如，pages/index.js 对应根路径 /，pages/about.js 对应 /about。

// pages/index.js
import Link from 'next/link'

export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <Link href="/about">
        <a>About</a>
      </Link>
    </div>
  )
}

数据获取

Next.js 提供了多种数据获取方法，适用于不同的场景：

• getStaticProps: 在构建时获取数据，用于静态生成页面。
• getStaticPaths: 与 getStaticProps 配合使用，用于动态路由的静态生成。
• getServerSideProps: 在每次请求时获取数据，用于服务端渲染页面。

API 路由

Next.js 允许在 pages/api 目录下创建 API 路由，这些路由会被映射为服务器端的 API 接口。

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

部署

Next.js 应用可以轻松部署到 Vercel 平台，Vercel 是 Next.js 的官方托管平台，提供了无缝的部署体验。

// package.json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

结论

Next.js 为 React 应用开发提供了强大的功能和优秀的开发体验。通过合理使用其特性，我们可以快速构建高性能、可扩展的全栈 Web 应用。