React服务端渲染 Next 使用详解

1. Next.js 概述

Next.js 是一个基于 React 的开源框架，专注于服务器端渲染（SSR）和静态站点生成（SSG），提供开箱即用的 SSR 功能，简化 React 应用的开发与部署。

2. Next.js 的核心特性

SSR 支持：默认支持服务端渲染，提高应用性能和 SEO。
静态站点生成（SSG）：预渲染页面，提高加载速度。
路由自动生成：基于文件系统的路由生成，无需手动配置。【约定式路由 vs 配置式路由】
API 路由：内置 API 路由功能，支持构建后端服务。
代码拆分：自动进行代码分割，优化加载性能。
开发体验：内置热重载（HMR）、错误处理等，提升开发效率。

3. 安装与创建 Next.js 项目

使用命令行工具快速创建 Next.js 项目：

npx create-next-app my-next-app

按照提示选择项目配置，如 TypeScript 支持、ESLint 等。

4. 项目结构解析

  my-next-app/├── pages/          // 页面组件，Next.js 根据此目录生成路由│   ├── index.js    // 对应 / 路径│   ├── about.js    // 对应 /about│   └── ...├── public/         // 静态文件，直接映射到应用的根路径├── styles/         // 样式文件├── components/     // 可复用的 React 组件├── api/            // API 路由├── next.config.js  // Next.js 配置文件├── package.json└── ...

5. 路由与页面

基于文件系统的路由：

pages/index.js 对应 /
pages/about.js 对应 /about
pages/blog/[id].js 对应动态路由 /blog/:id

// pages/index.js
import React from 'react';const Home = () => (<div><h1>首页</h1></div>
);export default Home;

6. 组件与布局

组件（Components）：可复用的 React 组件，放在 components/ 目录。
布局（Layouts）：定义页面的整体结构，如导航栏、页脚等。

// components/Layout.js
import React from 'react';
import Link from 'next/link';const Layout = ({ children }) => (<div><nav><Link href="/">首页</Link><Link href="/about">关于</Link></nav><main>{children}</main><footer>© 2024 My Website</footer></div>
);export default Layout;

在页面中使用布局：

// pages/index.js
import React from 'react';
import Layout from '../components/Layout';const Home = () => (<Layout><h1>首页</h1><p>欢迎来到我的网站！</p></Layout>
);export default

7. 数据获取

7.1. getStaticProps（静态生成）

在构建时获取数据，生成静态页面，适用于数据不经常变化的页面。

// pages/posts.js
import React from 'react';export async function getStaticProps() {const res = await fetch('https://api.example.com/posts');const posts = await res.json();return {props: {posts,},};
}const Posts = ({ posts }) => (<div><h1>博客文章</h1><ul>{posts.map(post => (<li key={post.id}>{post.title}</li>))}</ul></div>
);export default Posts;

7.2. getServerSideProps（服务器端渲染）

每次请求时获取数据，生成页面，适用于需要实时数据的页面。

// pages/profile.js
import React from 'react';export async function getServerSideProps(context) {const res = await fetch(`https://api.example.com/user/${context.params.id}`);const user = await res.json();return {props: {user,},};
}const Profile = ({ user }) => (<div><h1>{user.name} 的个人资料</h1><p>邮箱: {user.email}</p></div>
);export default Profile;

8. 中间件与插件

8.1. 中间件

在请求处理链中执行的函数，用于权限校验、日志记录等。

// middleware/auth.js
export function authMiddleware(req, res, next) {if (!req.user) {res.redirect('/login');} else {next();}
}

8.2. 插件

扩展 Next.js 或 React 的功能，如集成第三方库，通常通过 npm 包或自定义代码实现。

示例：集成 Axios

1. 安装Axios

npm install axios

2. 封装成插件

// lib/axios.js
import axios from 'axios';const instance = axios.create({baseURL: 'https://api.example.com',
});export default instance;

3. 在页面中使用

// pages/posts.js
import React from 'react';
import axios from '../lib/axios';export async function getServerSideProps() {const res = await axios.get('/posts');const posts = res.data;return {props: {posts,},};
}const Posts = ({ posts }) => (<div><h1>博客文章</h1><ul>{posts.map(post => (<li key={post.id}>{post.title}</li>))}</ul></div>
);export default Posts;

9. 动态路由与嵌套路由

9.1. 动态路由参数

使用方括号定义动态参数，可通过 context.params 获取参数值。

// pages/blog/[id].js
import React from 'react';export async function getServerSideProps(context) {const { id } = context.params;const res = await fetch(`https://api.example.com/posts/${id}`);const post = await res.json();return {props: {post,},};
}const Post = ({ post }) => (<div><h1>{post.title}</h1><p>{post.content}</p></div>
);export default Post;

9.2. 嵌套路由

使用目录结构定义嵌套路由，在父组件中使用 <Outlet />（React Router）或嵌套页面结构。

// pages/dashboard/index.js
import React from 'react';
import Link from 'next/link';
import { Outlet } from 'react-router-dom';const Dashboard = () => (<div><h1>仪表盘</h1><ul><li><Link href="/dashboard/settings">设置</Link></li><li><Link href="/dashboard/profile">个人资料</Link></li></ul><Outlet /> {/* 这里使用 Outlet 来渲染子页面 */}</div>
);export default Dashboard;

pages/dashboard/settings.js：

// pages/dashboard/settings.js
import React from 'react';const Settings = () => (<div><h1>设置</h1><p>这里是设置页面。</p></div>
);export default Settings;

pages/dashboard/profile.js：

// pages/dashboard/profile.js
import React from 'react';const Profile = () => (<div><h1>个人资料</h1><p>这里是个人资料页面。</p></div>
);export default Profile;

10. SEO 优化

10.1. Meta 标签管理

使用 next/head 组件定义页面的标题和 meta 信息。

// pages/about.js
import React from 'react';
import Head from 'next/head';const About = () => (<div><Head><title>关于我们 - My Website</title><meta name="description" content="这是关于我们的页面。" /></Head><h1>关于我们</h1><p>这里是关于我们的内容。</p></div>
);export default About;

10.2. 站点地图

使用 next-sitemap 等插件自动生成站点地图。

安装：

npm install next-sitemap

配置：

// next-sitemap.js
module.exports = {siteUrl: 'https://www.example.com',generateRobotsTxt: true,
};

生成：

npx next-sitemap

11. 部署 Next.js 应用

11.1. 服务器渲染模式部署

需要一个 Node.js 服务器运行 Next.js 应用。

1. 构建应用

npm run build

2. 启动应用

npm start

11.2. 静态站点生成

生成静态的 HTML 文件，部署到静态服务器，适用于内容不经常变化的站点。

1. 生成静态文件

npm run export

2. 部署 out/ 目录内容到静态服务器

11.3. 云平台部署

Vercel: Next.js 官方推荐平台，支持无缝部署。
Netlify、AWS、Heroku 等也支持部署 Next.js 应用。

12. 性能优化

代码拆分：利用 Next.js 的自动代码拆分，按需加载组件。
缓存：使用 CDN 缓存静态资源，优化 API 请求。
图片优化：使用 Next.js 内置的 next/image 组件，自动优化图片。
懒加载：延迟加载非关键资源，提升首屏加载速度。

示例：使用 next/image

import Image from 'next/image';const Home = () => (<div><h1>首页</h1><Image src="/logo.png" alt="Logo" width={200} height={200} /></div>
);export default Home;