Next.js 中直接访问路由返回 404，但在开发环境中工作正常

Question

问题：

• 在Azure App Service上托管的Next.js应用程序中，直接访问路由（例如，

  /vehicle-details

  ）会导致404 Not Found错误。
• 但是，通过内部导航（

  Link

  或

  router.push

  ）导航到这些相同的路线效果很好。
• 在开发环境中，一切都按预期运行，并且直接路由加载没有问题。
• 该问题仅出现在 Azure 上的生产环境中。

---

技术细节：

• Next.js 渲染方法： 客户端渲染（CSR）。
• 托管环境：Azure 应用服务。

---

Next.config.js：

const path = require('path');

/** @type {import('next').NextConfig} */
const withTM = require('next-transpile-modules')([
  '@fullcalendar/common',
  '@fullcalendar/react',
  '@fullcalendar/daygrid',
  '@fullcalendar/list',
  '@fullcalendar/timegrid'
]);

module.exports = withTM({
  distDir: '.next',
  output: 'standalone',
  trailingSlash: false,
  reactStrictMode: false,
  webpack: (config, { isServer }) => {
    if (config.watchOptions) {
      config.watchOptions.ignored = '**/node_modules/**';
    }

    config.resolve.alias = {
      ...config.resolve.alias,
      apexcharts: path.resolve(__dirname, './node_modules/apexcharts-clevision')
    };

    if (!isServer) {
      config.output.publicPath = '/_next/';
    }

    return config;
  },
  typescript: {
    ignoreBuildErrors: true
  },
  eslint: {
    ignoreDuringBuilds: true
  }
})

问题：

Azure 应用服务中是否需要特定配置才能正确处理 Next.js 中的直接访问路由（深层链接）？ 是否有任何已知的最佳实践或需要额外的配置来解决此问题？

Answer 1

Azure 上的 Next.js 应用程序中的直接路由出现 404 错误是因为服务器找不到路由，这是由于 Next.js 使用客户端路由造成的。

如果要部署到基于 Windows 的 Azure Web 应用程序，则应使用

web.config

文件。

<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Next.js Routes" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

最好使用基于 Linux 的 Azure Web App，因为路由处理起来比较顺利。

我创建了一个带有路由的示例 Next.js 应用程序，并使用 GitHub Actions 将其部署到基于 Linux 的 Azure Web 应用程序。

确保

.next

目录已正确部署。

工作流程文件：

name: Build and deploy Node.js app to Azure Web App - kawebpp
on:
  push:
    branches:
      - main
  workflow_dispatch:
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Set up Node.js version
        uses: actions/setup-node@v3
        with:
          node-version: '18.x'
      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          mv .next/static .next/standalone/.next/static
      - name: Zip artifact for deployment
        run: zip release.zip ./* .next -qr
      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v4
        with:
          name: node-app
          path: release.zip
  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
    permissions:
      id-token: write 
    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v4
        with:
          name: node-app
      - name: Unzip artifact for deployment
        run: unzip release.zip
      - name: Login to Azure
        uses: azure/login@v2
        with:
          client-id: ${{ secrets.AZUREAPPSERVICE_CLIENTID_83B70739DF0945729AA4CE9A46AB125D }}
          tenant-id: ${{ secrets.AZUREAPPSERVICE_TENANTID_44362B3B45C842599F6DA4078616BA05 }}
          subscription-id: ${{ secrets.AZUREAPPSERVICE_SUBSCRIPTIONID_F17A1BFD2D1043D7A1622137667A64A5 }}
      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v3
        with:
          app-name: 'kawebpp'
          slot-name: 'Production'
          package: .      

将以下启动命令添加到 Azure Web App 的配置部分。

node .next/standalone/server.js

Azure 输出：