Next-1-启动！ - 技术栈

Next.js 简介

Next.js 是一个基于 React 的框架，用于构建服务端渲染（SSR）、静态生成（SSG）和混合渲染的现代 Web 应用程序。它提供了开箱即用的功能，如路由、API 路由、图像优化和性能优化，简化了开发流程。

核心特性

服务端渲染（SSR）

Next.js 支持服务端渲染，可以在服务器上生成 HTML 并发送到客户端，提升首屏加载速度和 SEO 效果。通过 getServerSideProps 函数实现动态数据的服务端渲染。

静态生成（SSG）

静态生成适合内容不变的页面，通过 getStaticProps 和 getStaticPaths 在构建时生成 HTML 文件，显著提升性能。

混合渲染

支持动态路由与静态页面的混合渲染，允许开发者根据需求选择 SSR 或 SSG。

API 路由

内置 API 路由功能，无需额外配置即可创建后端接口。文件放在 pages/api 目录下，自动映射为 API 端点。

图像优化

通过 next/image 组件自动优化图片，支持懒加载、尺寸调整和现代格式（如 WebP）。

基本使用

创建项目

通过以下命令初始化 Next.js 项目：

bash 复制代码

npx create-next-app@latest

页面路由

Next.js 使用文件系统路由，在 pages 目录下创建的文件会自动映射为路由。例如：

pages/index.js → /
pages/about.js → /about

动态路由

使用方括号命名文件支持动态路由，例如 pages/posts/[id].js 可匹配 /posts/1 或 /posts/2。

数据获取方法

静态生成（getStaticProps）

在构建时获取数据并生成静态页面：

javascript 复制代码

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

服务端渲染（getServerSideProps）

每次请求时获取数据：

javascript 复制代码

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

客户端数据获取

使用 useEffect 或 SWR 库在客户端获取数据：

javascript 复制代码

import useSWR from 'swr';

function Profile() {
  const { data, error } = useSWR('/api/user', fetch);
  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;
  return <div>{data.name}</div>;
}

部署

Next.js 应用可以部署到 Vercel（官方推荐）、Netlify 或其他支持 Node.js 的平台。Vercel 提供一键部署和自动 CI/CD 集成。

进阶功能

中间件（Middleware）

在请求到达页面前运行代码，用于身份验证、重定向等逻辑。文件放在 middleware.js 中。

按需增量静态生成（ISR）

允许静态页面在运行时重新生成，结合了 SSG 和 SSR 的优势。通过 revalidate 参数控制更新时间：

javascript 复制代码

export async function getStaticProps() {
  return { props: {}, revalidate: 60 }; // 每60秒重新生成
}

国际化（i18n）

内置国际化支持，通过配置 next.config.js 实现多语言路由。

学习资源

Next.js 的灵活性和高性能使其成为构建现代 Web 应用的首选框架之一。