求配置好代理的NextJS+.NET6单解决方案模板（适配IIS10）

一、有没有现成的配置好代理的整合模板？ #

有两种现成方案：

• 直接用社区维护的模板：在Visual Studio里通过NuGet包管理器搜索NextJs.Net.Template，或者用.NET CLI命令一键创建：

  dotnet new install NextJs.Net.Template
  dotnet new nextjs-net -n 你的项目名
  

  这类模板已经把代理配置、SPA启动逻辑都预设好了，不用手动踩坑。
• 基于官方React模板改造（解决你当前遇到的问题）：如果不想用第三方模板，按下面步骤修正你的项目就行：

二、修复现有项目的代理与SPA启动冲突问题 #

1. 替换Program.cs里的SPA启动逻辑 #

打开项目根目录的Program.cs，把原来的app.UseSpa(...)代码块换成下面的内容，禁用Microsoft自带的SPA库强制调用：

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp"; // 你的Next.js项目所在目录
    spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(
            Path.Combine(Directory.GetCurrentDirectory(), "ClientApp/.next/static"))
    };

    if (app.Environment.IsDevelopment())
    {
        // 开发环境代理请求到Next.js的dev server
        spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
        // 关掉Microsoft的SPA fallback，避免冲突
        spa.Options.SpaPrerenderedRoutePath = string.Empty;
    }
    else
    {
        // 生产环境直接用构建好的Next.js静态文件
        spa.UseStaticFiles();
    }
});

2. 配置Next.js的API代理规则 #

在Next.js项目根目录（也就是ClientApp文件夹）创建next.config.js，添加转发规则，把前端的API请求转到.NET后端：

module.exports = {
    async rewrites() {
        return [
            {
                source: '/api/:path*',
                destination: 'http://localhost:5000/api/:path*', // 开发环境用.NET的启动地址，生产环境改成相对路径或IIS绑定的域名
            },
        ];
    },
};

3. 调整VS的启动配置 #

打开项目的.csproj文件，删掉原来的SPA相关配置，添加下面的内容，确保VS启动时先跑Next.js的dev server：

<PropertyGroup>
    <SpaRoot>ClientApp\</SpaRoot>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)**\node_modules\**</DefaultItemExcludes>
</PropertyGroup>

<Target Name="DebugEnsureNodeEnv" BeforeTargets="Build">
    <Exec Command="node --version" ContinueOnError="true">
        <Output TaskParameter="ExitCode" PropertyName="NodeExitCode" />
    </Exec>
    <Exec Command="npm --version" ContinueOnError="true">
        <Output TaskParameter="ExitCode" PropertyName="NpmExitCode" />
    </Exec>
    <Error Condition="'$(NodeExitCode)' != '0'" Text="需要安装Node.js才能构建运行项目，请从nodejs.org下载安装" />
    <Error Condition="'$(NpmExitCode)' != '0'" Text="需要安装npm才能构建运行项目，请从npmjs.com下载安装" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
</Target>

<Target Name="RunNextJsDevServer" BeforeTargets="LaunchBrowser" Condition="$(Configuration) == 'Debug'">
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run dev" />
</Target>

三、IIS10部署步骤 #

1. 先在Next.js项目里执行npm run build，生成.next构建文件；
2. 发布.NET项目，选“文件夹发布”，把Next.js的.next和public文件夹复制到发布目录的ClientApp文件夹下；
3. 在IIS里新建网站，物理路径设为.NET发布的根目录；
4. 确保IIS安装了ASP.NET Core模块和URL重写模块，web.config里的反向代理规则会自动处理请求转发，静态文件直接返回。

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