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 };
Voici ma configuration next.config.js. Mais quand j'essaye de courir, je reçois le message comme Erreur! Erreur réseau: jeton N inattendu dans JSON à la position 0
Mais quand j'essaie d'exécuter quoi que ce soit dans le gras (*) et que je ne garde que cette chose dans le next.config.js, cela fonctionne bien. Comment configurer plusieurs plugins dans le module.export
3 Réponses :
Voici un moyen simple d'utiliser plusieurs plugins imbriqués dans Next.js
const withImages = require('next-images'); module.export = withImages();
Si vous souhaitez utiliser un seul plugin, procédez comme suit:
const withImages = require('next-images'); const withCSS = require('@zeit/next-css'); module.exports = withCSS(withImages({ webpack(config, options) { return config } }))
next-compose-plugins
plugin fournit une API plus propre pour activer et configurer les plugins pour next.js.
Installer npm install --save next-compose-plugins code >
Utilisez-le dans 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);
Version Next.js> 10.0.3
Les images sont maintenant intégrées, donc ajouter le plugin et le code d'image ci-dessous fonctionnera:
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);
github.com/zeit/next-plugins/issues/7 - ou peut-être ce? stackoverflow.com/questions/50294005/...