Next JS config 多个插件配置答案

【问题标题】：Next JS config multiple plugin configurationNext JS config 多个插件配置
【发布时间】：2019-06-08 12:54:07
【问题描述】：

const {
  DEVELOPMENT_SERVER,
  PRODUCTION_BUILD
} = require("next/constants");

require('dotenv').config()

const path = require('path')
const Dotenv = require('dotenv-webpack')

const nextConfig = {
  webpack: config => ({ ...config, node: { fs: "empty" } })
};
module.exports = phase => {
  if (phase === DEVELOPMENT_SERVER || phase === PRODUCTION_BUILD) {
    const withCSS = require("@zeit/next-css");
    return withCSS(nextConfig);
  }
  return nextConfig;
};
*module.exports =  {
  webpack: (config) => {
    config.plugins = config.plugins || []
    config.plugins = [
      ...config.plugins,
      // Read the .env file
      new Dotenv({
        path: path.join(__dirname, '.env'),
        systemvars: true
      })
    ]
    return config
  }
}*

let prefix;
switch (process.env.NODE_ENV) {
  case "test":
    prefix = "https://test.domain.com/providers";
    break;
  case "stage":
    prefix = "https://state.domain.com/providers";
    break;
  case "production":
    prefix = "https://production.domain.com/providers";
    break;
  default:
    prefix = "";
    break;
}
module.exports = {
  distDir: "build",
  assetPrefix: prefix
};

这是我的 next.config.js 配置。但是当我尝试跑步时，会收到类似的消息错误！网络错误：位置 0 处 JSON 中的意外令牌 N

但是当我试图在粗体（*）中运行任何东西并只将那个东西保留到 next.config.js 中时，它就可以正常工作了。如何在module.export中配置多个插件

【问题讨论】：

github.com/zeit/next-plugins/issues/7 - 或者这个？ stackoverflow.com/questions/50294005/…

标签： reactjs webpack next.js apollo

【解决方案1】：

这是在 Next.js 中使用多个嵌套插件的简单方法

const withImages = require('next-images');
const withCSS = require('@zeit/next-css');

module.exports = withCSS(withImages({
    webpack(config, options) {
      return config
    }
  }))

如果您想使用单个插件，请执行以下操作：

const withImages = require('next-images');

module.export = withImages();

有关 Next.js 插件及其文档的更多信息，请单击此处： https://github.com/zeit/next-plugins/tree/master/packages

【讨论】：

【解决方案2】：

next-compose-plugins 插件提供了一个更简洁的 API，用于为 next.js 启用和配置插件。

安装npm install --save next-compose-plugins

在next.config.js中使用：

// next.config.js
const withPlugins = require('next-compose-plugins');
const images = require('next-images');
const sass = require('@zeit/next-sass');
const typescript = require('@zeit/next-typescript');

// optional next.js configuration
const nextConfig = {
  useFileSystemPublicRoutes: false,
  distDir: 'build',
};

module.exports = withPlugins([

  // add a plugin with specific configuration
  [sass, {
    cssModules: true,
    cssLoaderOptions: {
      localIdentName: '[local]___[hash:base64:5]',
    },
  }],

  // add a plugin without a configuration
  images,

  // another plugin with a configuration
  [typescript, {
    typescriptLoaderOptions: {
      transpileOnly: false,
    },
  }],

], nextConfig);

【讨论】：

【解决方案3】：

Next.js 版本>10.0.3

图像现在是内置的，因此添加插件和图像代码如下：

const withPlugins = require('next-compose-plugins');
const withCSS = require('@zeit/next-css');

const nextConfig = {
    images: {
        domains: ['sd.domain.com'], // your domain
    },
};

module.exports = withPlugins([
    [withCSS]
], nextConfig);

【讨论】：