Next.js 基础教程

Next.js 是一个基于 React 的前端开发框架，它提供了服务器端渲染（SSR）和静态生成（SSG）的功能，使得开发者能够构建快速、可扩展的 Web 应用。

环境准备

在开始之前，请确保你已经安装了 Node.js 和 npm/yarn。你可以通过以下命令安装 Next.js：

npx create-next-app@latest my-next-app
cd my-next-app
npm install

或者使用 yarn：

yarn create next-app my-next-app
cd my-next-app
yarn install

目录结构

Next.js 应用的基本目录结构如下：

my-next-app/
  ├── node_modules/
  ├── public/
  ├── src/
  │   ├── pages/
  │   │   └── index.js
  │   └── components/
  ├── next.config.js
  ├── package.json
  └── README.md

页面和路由

在 Next.js 中，页面是通过在 pages 目录下创建 .js、.jsx、.ts 或 .tsx 文件自动生成的。例如，创建一个 about.js 文件在 pages 目录下，将会创建一个 /about 的路由。

// pages/about.js
import Link from 'next/link';

export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <Link href="/"><a>Home</a></Link>
    </div>
  );
}

静态生成与服务器端渲染

• 静态生成（Static Generation）：在构建时生成页面，适用于不频繁更新的内容。
• 服务器端渲染（Server-Side Rendering）：在每次请求时生成页面，适用于需要实时数据的内容。

你可以在页面组件中使用 getStaticProps 或 getServerSideProps 函数来控制数据的获取方式。

// 使用静态生成
export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data').json();
  return {
    props: { data },
    revalidate: 3600, // 重新验证时间（秒）
  };
}

// 使用服务器端渲染
export async function getServerSideProps(context) {
  const data = await fetch('https://api.example.com/data').json();
  return {
    props: { data },
  };
}

API 路由

Next.js 允许你在 pages/api 目录下创建 API 路由。这些路由将被自动处理为 API 端点。

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

部署

Next.js 应用可以部署在许多不同的平台上，包括 Vercel、Netlify、AWS 等。Vercel 是 Next.js 的官方推荐部署平台，因为它提供了一键部署和自动 SSL 等功能。

结语

本教程只是一个简单的入门，Next.js 还有很多高级特性等待你去探索，比如 CSS/Sass 支持、环境变量、国际化等。希望这个基础教程能帮助你开始使用 Next.js 构建你的 Web 应用。

请根据你的具体需求调整和扩展这篇教程的内容。希望这能帮助你开始你的 Next.js 学习之旅！