在Next JS中,可以通过配置文件实现自定义目录的设置。具体步骤如下:
next.config.js
的文件。next.config.js
文件中,使用module.exports
导出一个包含配置选项的对象。// next.config.js
module.exports = {
// 设置自定义目录
webpack(config, { defaultLoaders }) {
config.module.rules.push({
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
publicPath: '/_next/static/', // 设置自定义目录的路径
outputPath: 'static/', // 设置自定义目录的输出路径
name: '[name].[hash].[ext]'
}
}
})
return config
}
}
上述配置中,我们使用了webpack
配置选项,并添加了一个module.rules
规则,用于处理静态资源文件(如图片、字体等)。其中,publicPath
表示资源文件的公共路径,outputPath
表示输出路径。可以根据自己的需求进行调整。
通过上述配置,我们成功在Next JS中设置了自定义目录。注意,这里的自定义目录不包括src
和root
。
领取专属 10元无门槛券
手把手带您无忧上云