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

Question

我正在关注 Microsoft 的教程： 在 Azure 静态 Web 应用程序上部署静态渲染的 Next.js 网站

问题是，我正在尝试将此代码添加到我的 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,
  },
})