next.js - Custom webpack config for PDFs using next-compose-plugins

Question

General recommendation for processing a PDF file in Webpack keeps pointing me back to: https://webpack.js.org/loaders/file-loader/

Webpack documentation doesn't really explain static generation, and Next's config documentation doesn't really explain file loading for PDFs.

I put my PDFs into Next's /public folder and when I run yarn build the file paths are generated as /public/file-name.pdf, which is what I asked for. However, all of those links are dead. I think this might have to do with the way Next bundles things under the hood but that isn't explained anywhere I can find.

I've cobbled the following together, anyone have a sense of where I'm going wrong?

// next.config.js
const withPlugins = require('next-compose-plugins')
const withImages = require('next-images')

const { 
  PHASE_DEVELOPMENT_SERVER, 
  PHASE_PRODUCTION_BUILD 
} = require('next/constants')

const nextConfig = {
  webpack: (config, options) => {
 
    config.module.rules.push({
      test: /.pdf$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]',
            outputPath: '/public'
          }
        } 
      ]
    })
 
    return config;
  }
}
module.exports = withPlugins([
  [withImages, {
    [PHASE_DEVELOPMENT_SERVER]: 'http://localhost:3001',
    [PHASE_PRODUCTION_BUILD]: 'https://www.example.com'
  }]
], nextConfig)

question from:https://stackoverflow.com/questions/65936937/custom-webpack-config-for-pdfs-using-next-compose-plugins

Answer 1

Waitting for answers