如何在静态Next.js应用中将动态路由转为CSR以生成/out文件夹部署？

你的当前代码因使用generateStaticParams，构建时会预渲染所有/projects/[id]对应的静态页面，且组件为服务器组件（async函数），属于静态生成+服务器渲染的混合模式。要转为纯客户端渲染（CSR），按以下步骤修改：

核心修改步骤 #

• 添加客户端组件指令，标记组件在浏览器端执行
• 移除静态预生成逻辑，取消build时的路由预渲染
• 改用客户端路由钩子获取动态参数
• 调整数据获取逻辑适配客户端组件特性

修改后的完整代码 #

'use client';

import { useState, useEffect } from 'react';
import { useParams } from 'next/navigation';
import { projects } from '@/data/projects';
import SingleProjectPage from '@/components/SingleProjectPage';

const Project = () => {
  const params = useParams<{ id: string }>();
  const [project, setProject] = useState<typeof projects[0] | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!params.id) return;
    
    const fetchedProject = projects.find((p) => p.id === params.id) ?? null;
    setProject(fetchedProject);
    setLoading(false);
  }, [params.id]);

  if (loading) {
    return (
      <div className='w-full h-[100vh] flex justify-center items-center text-5xl font-bold'>
        Loading...
      </div>
    );
  }

  if (!project) {
    return (
      <div className='w-full h-[100vh] flex justify-center items-center text-5xl font-bold'>
        Project <span className='text-primary mx-2'>not</span> found
      </div>
    );
  }

  return <SingleProjectPage project={project} />;
};

export default Project;

效果验证 #

执行npm run build后，/projects/[id]不再生成/projects/1、/projects/2等子路径，仅保留动态路由入口。所有数据获取和渲染逻辑将在客户端完成，最终/out文件夹中不会出现每个id对应的静态HTML文件。

若你的projects数据来自外部API而非本地文件，只需将useEffect中的projects.find替换为fetch请求即可，逻辑完全适配。

内容的提问来源于stack exchange，提问作者Oliver