Next.js 是构建复杂多页应用的理想选择，结合内容管理系统（CMS）如 Strapi 或 Sanity，可以轻松管理和展示动态内容。以下是如何实现的详细步骤。

1. 设置 Next.js 项目

首先，创建一个新的 Next.js 项目：

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

2. 安装必要依赖

根据所选的 CMS，安装相应的依赖。以 Strapi 为例：

npm install axios

3. 配置 Strapi 或 Sanity

使用 Strapi

1. 安装 Strapi（如果尚未安装）：

npx create-strapi-app my-strapi-app --quickstart

2. 创建内容类型：

   • 登录到 Strapi 管理面板，创建所需的内容类型（如文章、页面等）。

3. 添加内容：

   • 在 Strapi 中添加一些示例数据。

使用 Sanity

1. 安装 Sanity CLI：

npm install -g @sanity/cli

2. 创建 Sanity 项目：

sanity init

3. 设置内容类型：
   • 在 Sanity Studio 中定义数据结构并添加内容。

4. 连接 Next.js 和 CMS

在 Next.js 中创建 API 请求以获取数据。以下是从 Strapi 获取文章数据的示例。

创建数据获取函数：

// lib/api.js
import axios from 'axios';

const API_URL = 'http://localhost:1337'; // Strapi 运行地址

export const fetchPosts = async () => {
  const response = await axios.get(`${API_URL}/posts`);
  return response.data;
};

5. 构建多页应用

使用 Next.js 的文件路由机制构建多页应用。每个页面将从 CMS 中获取数据并展示。

示例：创建一个文章列表页面：

// pages/index.js
import { fetchPosts } from '../lib/api';

const HomePage = ({ posts }) => {
  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <a href={`/posts/${post.id}`}>{post.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
};

export async function getStaticProps() {
  const posts = await fetchPosts();
  return {
    props: {
      posts,
    },
  };
}

export default HomePage;

创建文章详情页面：

// pages/posts/[id].js
import { fetchPosts } from '../../lib/api';

const PostPage = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </div>
  );
};

export async function getStaticPaths() {
  const posts = await fetchPosts();
  const paths = posts.map((post) => ({ params: { id: post.id.toString() } }));

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const posts = await fetchPosts();
  const post = posts.find((p) => p.id.toString() === params.id);

  return {
    props: {
      post,
    },
  };
}

export default PostPage;

6. 部署应用

完成开发后，可以选择将 Next.js 应用部署到 Vercel、Netlify 或其他平台。

部署到 Vercel：

1. 登录到 Vercel。
2. 连接你的 GitHub 仓库并选择项目。
3. 点击“Deploy”进行自动部署。

总结

通过以上步骤，您可以使用 Next.js 构建一个复杂的多页应用，并与 CMS（如 Strapi 或 Sanity）进行集成。这种架构不仅能有效管理内容，还能提供良好的用户体验和性能。使用静态生成和服务器端渲染，Next.js 使得数据获取更加灵活，为用户提供快速、动态的页面体验。