I am looking to implement a custom loader in Next.js that leverages Webpack through the next.config.js configuration file. This loader should route Blog.js for the /blog route and Tutorial.js for the /tutorial route.
The MDX data is stored in the pages/ directory, which contains separate .mdx files for both blog/ and tutorial/.
This is how my folder structure looks like:
.
├── README.md
├── components
│ ├── Blog.js
│ ├── Image.js
│ └── Tutorial.js
├── jsconfig.json
├── next.config.js
├── package-lock.json
├── package.json
├── pages
│ ├── blog
│ │ ├── hello-world
│ │ │ ├── Rustin_Cohle.jpg
│ │ │ └── index.mdx
│ │ └── shit-world
│ │ └── index.mdx
│ ├── blog.js
│ ├── index.js
│ ├── tutorial
│ │ └── console-log-in-javascript
│ │ └── index.mdx
│ └── tutorial.js
├── prettier.config.js
├── src
└── utils
├── blog
│ ├── getAllBlogPreviews.js
│ ├── getStaticPaths.js
│ └── getStaticProps.js
├── common
│ ├── getAllPreviews.js
│ ├── getStaticFilePaths.js
│ └── getStaticFileProps.js
├── date.js
├── mdxUtils.js
└── tutorial
├── getAllTutorialPreviews.js
├── getStaticPaths.js
└── getStaticProps.js
This is a snippet from my next.config.js file:
// The JavaScript code block provided in the text
I have tried using test: /blog/ and test: /tutorial/, but it's not functioning correctly. Can anyone guide me on how to make this setup work as intended?
You can find the complete code on the tailwind branch of my GitHub repository at → https://github.com/deadcoder0904/blog-mdx-next/tree/tailwind. This code base is inspired by https://github.com/tailwindlabs/blog.tailwindcss.com.
Any suggestions on how I can ensure that blog/ uses Blog.js and tutorial/ uses Tutorial.js?