Hi Devs,

I am developing a web app where i have a need to render my locally placed markdown file in the NextJS server components but its not rendering till we dont use any custom loader for that to render.

to load .md file using a loader i have configured a loader in my next.config.mjs file as below

/ @type {import('next').NextConfig} */
const nextConfig = {
webpack: (config) => {
config.module.rules.push({
test: /.md$/,
use: 'raw-loader',
});
return config;
},
};

export default nextConfig;
but after doing this, NextJS started ginvg error for all the files like .alt.txt, .txt and even .xml saying loader is required for this as well.
So to fix those for now i have configured my next.config.mjs file as below

/ @type {import('next').NextConfig} */
const nextConfig = {
webpack: (config) => {
config.module.rules.push(...[{
test: /.md$/,
use: [
{
loader: 'raw-loader',
},
],
},
{
test: /.txt$/,
use: ['text-loader'],
},
{
test: /.xml$/,
use: [
{
loader: 'xml-loader',
},
],
}
]);
return config;
}
};

export default nextConfig;
But I don't want to use any such custom loaders because if I will use custom loaders then in future if I need to add any new file type I need to add loader for that file type as well,
Not sure how can I resolve this issue without using any loader for the files other than markdown file.

Looking forward for your help and support

Thanks,
Rahul Nag
www.rahulnag.in