我想在 Next.js 中创建一个加载器，它使用 Webpack underhood，它的next.config.js配置文件将为Blog.js路由/blog和Tutorial.js路由加载/tutorial。
MDX 数据在pages/目录中。pages/包含blog/&/tutorial有自己的.mdx文件。
我的文件夹结构如下：
.
├── 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
我的next.config.js文件看起来像：
const { createLoader } = require('simple-functional-loader')
const rehypePrism = require('@mapbox/rehype-prism')
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
module.exports = withBundleAnalyzer({
pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
experimental: {
modern: true,
},
webpack: (config, options) => {
config.module.rules.push({
test: /\.(svg|png|jpe?g|gif|mp4)$/i,
use: [
{
loader: 'file-loader',
options: {
publicPath: '/_next',
name: 'static/media/[name].[hash].[ext]',
},
},
],
})
const mdx = [
options.defaultLoaders.babel,
{
loader: '@mdx-js/loader',
options: {
rehypePlugins: [rehypePrism],
},
},
]
config.module.rules.push({
test: /\.mdx$/,
oneOf: [
{
resourceQuery: /preview/,
use: [
...mdx,
createLoader(function (src) {
console.log('src ')
console.log(src)
console.log('src ')
if (src.includes('<!--more-->')) {
const [preview] = src.split('<!--more-->')
return this.callback(null, preview)
}
const [preview] = src.split('<!--/excerpt-->')
return this.callback(null, preview.replace('<!--excerpt-->', ''))
}),
],
},
{
test: /blog/,
use: [
...mdx,
createLoader(function (src) {
const content = [
'import Blog from "@/components/Blog"',
'export { getStaticProps } from "@/utils/blog/getStaticProps"',
'export { getStaticPaths } from "@/utils/blog/getStaticPaths"',
'console.log("/blog")',
src,
'export default (props) => <Blog meta={meta} {...props} />',
].join('\n')
if (content.includes('<!--more-->')) {
return this.callback(null, content.split('<!--more-->').join('\n'))
}
return this.callback(null, content.replace(/<!--excerpt-->.*<!--\/excerpt-->/s, ''))
}),
],
},
{
test: /tutorial/,
use: [
...mdx,
createLoader(function (src) {
const content = [
'import Tutorial from "@/components/Tutorial"',
'export { getStaticProps } from "@/utils/tutorial/getStaticProps"',
'export { getStaticPaths } from "@/utils/tutorial/getStaticPaths"',
'console.log("/tutorial")',
src,
'export default (props) => <Tutorial meta={meta} {...props} />',
].join('\n')
if (content.includes('<!--more-->')) {
return this.callback(null, content.split('<!--more-->').join('\n'))
}
return this.callback(null, content.replace(/<!--excerpt-->.*<!--\/excerpt-->/s, ''))
}),
],
},
],
})
return config
},
})
我正在使用test: /blog/&test: /tutorial/但它不是那样工作的。我不确定如何使它工作？
tailwind我已经在 Github的分支上上传了我的完整代码→ https://github.com/deadcoder0904/blog-mdx-next/tree/tailwind，它改编自https://github.com/tailwindlabs/blog.tailwindcss。 com
我如何使它blog/使用Blog.js&tutorial/使用Tutorial.js？