Nextjs 配置文件 - 如何导出更多内容答案

【问题标题】：Nextjs config file - how to export more contentNextjs 配置文件 - 如何导出更多内容
【发布时间】：2019-08-23 14:59:54
【问题描述】：

我正在尝试编辑 nextjs 配置文件。使用 ant design 和 i18next。
对于 ant 设计，我需要这个。

/* eslint-disable */
const withCss = require('@zeit/next-css')


module.exports = 
withCss({
  webpack: (config, {
    isServer
  }) => {
    if (isServer) {
      const antStyles = /antd\/.*?\/style\/css.*?/
      const origExternals = [...config.externals]
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback()
          if (typeof origExternals[0] === 'function') {
            origExternals[0](context, request, callback)
          } else {
            callback()
          }
        },
        ...(typeof origExternals[0] === 'function' ? [] : origExternals),
      ]

      config.module.rules.unshift({
        test: antStyles,
        use: 'null-loader',
      })
    }
    return config
  },
})

对于 i18next 我需要

module.exports = {
  publicRuntimeConfig: {
    localeSubpaths: typeof process.env.LOCALE_SUBPATHS === 'string'
      ? process.env.LOCALE_SUBPATHS
      : 'none',
  },
}

所以我把它组合成：

/* eslint-disable */
const withCss = require('@zeit/next-css')


module.exports = ({
  publicRuntimeConfig: {
    localeSubpaths: typeof process.env.LOCALE_SUBPATHS === 'string' ?
      process.env.LOCALE_SUBPATHS : 'none',
  }
}, withCss({
  webpack: (config, {
    isServer
  }) => {
    if (isServer) {
      const antStyles = /antd\/.*?\/style\/css.*?/
      const origExternals = [...config.externals]
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback()
          if (typeof origExternals[0] === 'function') {
            origExternals[0](context, request, callback)
          } else {
            callback()
          }
        },
        ...(typeof origExternals[0] === 'function' ? [] : origExternals),
      ]

      config.module.rules.unshift({
        test: antStyles,
        use: 'null-loader',
      })
    }
    return config
  },
}))

但我不确定这是否是正确的方法，因为我仍然遇到错误（ant design 工作正常，我正在尝试导入 i18next）

D:\xxx\xxx\nextcms\i18n.js:4
} = require('next/config').default().publicRuntimeConfig
                                    ^

TypeError: Cannot read property 'publicRuntimeConfig' of undefined

这可能是由其他问题引起的，但我只需要知道我是否使用 i18next 正确导出了这些 ant 设计。

感谢您的宝贵时间。

【问题讨论】：

标签： node.js webpack next.js antd i18next

【解决方案1】：

您需要使用withCss() 包装整个导出。

试试这个：

/* eslint-disable */
const withCss = require('@zeit/next-css')


module.exports = withCss({
  publicRuntimeConfig: {

   // ...

  },
  webpack: (config, { isServer }) => {

    // ...

    return config
  },
})

【讨论】：