title: Webpack configuration for react-pdf in a Next.js project
body: <p>Im using <code>react-pdf</code> library in Next.js to generate PDF, view PDF and download that PDF in a Static Client Side Next.js Application (Server is not involved). But I can't set up the Webpack for Next.js as I don't have much knowledge about it.</p>
  <p>This is what the required setup for Webpack is for <code>react-pdf</code>:</p>
  <pre class="lang-js prettyprint-override"><code>const webpack = require('webpack')
  
  module.exports = {
    /* ... */
  
    resolve: {
      fallback: {
        process: require.resolve('process/browser'),
        zlib: require.resolve('browserify-zlib'),
        stream: require.resolve('stream-browserify'),
        util: require.resolve('util'),
        buffer: require.resolve('buffer'),
        asset: require.resolve('assert'),
      },
    },
    plugins: [
      new webpack.ProvidePlugin({
        Buffer: ['buffer', 'Buffer'],
        process: 'process/browser',
      }),
    ],
  
    /* ... */
  }
  
  </code></pre>
  <p>And this is the <code>next.config.js</code>:</p>
  <pre class="lang-js prettyprint-override"><code>module.exports = {
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) =&gt; {
      // Important: return the modified config
      return config
    },
  }
  </code></pre>