Font.register react-pdf not working properly in NextJS

Question

In a React application I have build I used the https://react-pdf.org/ package and works perfectly fine. I imported my own fonts with:

import PrometoRegular from '../../assets/fonts/Prometo-Regular.ttf';

// Register font
Font.register({family: 'PrometoRegular', src: PrometoRegular });

Then in the styles:

const styles = StyleSheet.create({
    subtitle: {
        fontFamily: 'PrometoRegular',
        fontSize: 20,
        marginBottom: 10
    },
})

This all worked fine but now I am building a NextJS application but doing the same thing here doesn't work.

It returns:

./src/assets/fonts/Prometo-Regular.ttf
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)