I have this directory structure:

 - pages 
   - api
     - products 
       - pro
         - [id].js
     - add.js

[id].js

import { upload, baseHandler } from 'helpers';
import { sequelize } from 'lib';
import { init, Suppliers, Products} from 'models';
import { supplierController, productController } from 'controllers';

const handler = baseHandler.get( async (req, res) => {
    const {
        query: { id, name },
        method,
      } = req

    init()

    res.status(400).json(id)
})
 
export default handler;

export const config = {
  api: {
    bodyParser: false,
  },
};

The static routes works fine but not the dynamic ones. I get this error when I try to access them error - Error: getaddrinfo ENOTFOUND api.example.com which means Next.js does not add dynamic routes from the file system.