将导出脚本添加到现有 next.config.js

Question

我正在学习 Microsoft 的教程： Deploy static-rendered Next.js websites on Azure Static Web Apps

问题是，我正在尝试将以下代码添加到我的 next.config.js 文件中：

const data = require('./utils/projectsData');

module.exports = {
  trailingSlash: true,
  exportPathMap: async function () {
    const { projects } = data;
    const paths = {
      '/': { page: '/' },
    };

    projects.forEach((project) => {
      paths[`/project/${project.slug}`] = {
        page: '/project/[path]',
        query: { path: project.slug },
      };
    });

    return paths;
  },
};

但是我的 next.config.js 已经有了一些现有内容：

require('dotenv').config()

const withFonts = require('next-fonts')

module.exports = withFonts({
  serverRuntimeConfig: {},
  trailingSlash: true,
  exportPathMap: function() {
    return {
      '/': { page: '/' }
    };
  },
  publicRuntimeConfig: {
    API_URL: process.env.API_URL,
    PORT: process.env.PORT || 3000,
    PUBLISHABLE_KEY: process.env.PUBLISHABLE_KEY,
  },
})

如何组合它们？

Answer 1

就这样组合起来？

require('dotenv').config()

const data = require('./utils/projectsData'); // Add this line
const withFonts = require('next-fonts')

module.exports = withFonts({
  serverRuntimeConfig: {},
  trailingSlash: true,
  // And override this key
  exportPathMap: async function () {
    const { projects } = data;
    const paths = {
      '/': { page: '/' },
    };

    projects.forEach((project) => {
      paths[`/project/${project.slug}`] = {
        page: '/project/[path]',
        query: { path: project.slug },
      };
    });

    return paths;
  },
  publicRuntimeConfig: {
    API_URL: process.env.API_URL,
    PORT: process.env.PORT || 3000,
    PUBLISHABLE_KEY: process.env.PUBLISHABLE_KEY,
  },
})

将导出脚本添加到现有 next.config.js

adding export script to an existing next.config.js

next.js

azure-static-web-app