1- Next.js 学习教程（适合编程小白）

Next.js 是一个基于 React 的框架，适用于构建现代 Web 应用程序。它提供了许多强大的功能，如服务器端渲染（SSR）、静态站点生成（SSG）和 API 路由。

2- 简介

Next.js 是一个用于构建 Web 应用程序的框架，它基于 React，提供了许多现代 Web 开发所需的功能。使用 Next.js，您可以轻松地创建高性能、SEO 友好的网站。

3- 环境设置

在开始之前，请确保您的计算机上已经安装了以下工具：

• Node.js：这是一个 JavaScript 运行环境。您可以从 Node.js 官方网站下载并安装最新版本。
• npm 或 yarn：这是 JavaScript 的包管理工具，通常会随 Node.js 一起安装。

3.1- 安装 Node.js 和 Npm

1. 访问 Node.js 官方网站，下载并安装最新的 LTS 版本。
2. 安装完成后，打开终端（Windows 用户可以使用命令提示符或 PowerShell），输入以下命令检查安装是否成功：

node -v
npm -v

如果显示出版本号，说明安装成功。

3.2- 安装 Next.js

使用以下命令安装 Next.js：

npx create-next-app@latest

如果您希望使用 TypeScript，可以使用以下命令：

npx create-next-app@latest --typescript

4- 创建项目

运行以下命令创建一个新的 Next.js 项目：

npx create-next-app my-next-app
cd my-next-app

4.1- 启动开发服务器

在项目目录下运行以下命令启动开发服务器：

npm run dev

在浏览器中打开 http://localhost:3000，您将看到一个默认的 Next.js 欢迎页面。

5- 项目结构

Next.js 项目的默认结构如下：

my-next-app/
├── pages/
│   ├── api/
│   │   └── hello.js
│   ├── _app.js
│   ├── index.js
├── public/
├── styles/
│   ├── globals.css
│   └── Home.module.css
├── .gitignore
├── package.json
└── README.md

• pages/: 存放页面组件，每个文件对应一个路由。
• public/: 存放静态资源，如图片、字体等。
• styles/: 存放全局和模块化的 CSS 文件。

5.1- 项目结构特征

项目根目录/
  ├── package.json         # 项目配置文件
  ├── node_modules/       # 依赖包目录
  ├── src/               # 源代码目录
  ├── .env              # 环境变量文件
  ├── .gitignore        # Git忽略文件
  └── README.md         # 项目说明文档

6- 页面和路由

Next.js 使用文件系统路由。pages 目录中的每个文件都会自动成为一个路由。

6.1- 创建一个新页面

在 pages 目录下创建一个新的文件 about.js：

// pages/about.js
export default function About() {
  return <h1>关于我们</h1>;
}

现在，您可以在浏览器中访问 http://localhost:3000/about 查看新页面。

7- 数据获取

Next.js 提供了多种数据获取方法，包括 getStaticProps、getServerSideProps 和 getStaticPaths。

7.1- 静态生成（SSG）

使用 getStaticProps 获取静态数据：

// pages/index.js
export async function getStaticProps() {
  return {
    props: {
      message: 'Hello, Next.js!'
    }
  };
}

export default function Home({ message }) {
  return <h1>{message}</h1>;
}

7.2- 服务器端渲染（SSR）

使用 getServerSideProps 获取服务器端数据：

// pages/index.js
export async function getServerSideProps() {
  return {
    props: {
      message: 'Hello, Next.js!'
    }
  };
}

export default function Home({ message }) {
  return <h1>{message}</h1>;
}

8- API 路由

Next.js 允许您在 pages/api 目录下创建 API 路由。

8.1- 创建一个 API 路由

在 pages/api 目录下创建一个新的文件 hello.js：

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

现在，您可以在浏览器中访问 http://localhost:3000/api/hello 查看 API 响应。

9- 样式和 CSS

Next.js 支持多种样式解决方案，包括 CSS 模块、全局 CSS 和第三方库（如 Tailwind CSS）。

9.1- 使用 CSS 模块

在 styles 目录下创建一个新的文件 Home.module.css：

/* styles/Home.module.css */
.title {
  color: blue;
}

在组件中导入并使用 CSS 模块：

// pages/index.js
import styles from '../styles/Home.module.css';

export default function Home() {
  return <h1 className={styles.title}>Hello, Next.js!</h1>;
}

10- 部署

Next.js 应用可以部署到多种平台，包括 Vercel、Node.js 服务器、Docker 等。

10.1- 部署到 Vercel

Vercel 是 Next.js 的官方托管平台。使用以下命令将项目部署到 Vercel：

npm install -g vercel
vercel

按照提示完成部署，您的应用将被托管在 Vercel 上。

11- 高级功能

11.1- 动态路由

Next.js 支持动态路由。创建一个动态路由文件 [id].js：

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

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

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

现在，您可以在浏览器中访问 http://localhost:3000/posts/1 查看动态路由页面。

11.2- API 集成

Next.js 可以轻松集成各种 API，如 OpenAI、Stripe 等。以下是一个简单的示例，展示如何集成 OpenAI API：

// pages/api/generate.js
import { Configuration, OpenAIApi } from 'openai';

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});

const openai = new OpenAIApi(configuration);

export default async function handler(req, res) {
  const response = await openai.createCompletion({
    model: 'text-davinci-003',
    prompt: 'Say this is a test',
    max_tokens: 5,
  });

  res.status(200).json({ result: response.data.choices[0].text });
}