查看Next.js默认配置信息的几种方法
作者:南蓝
文章介绍了几种查看Next.js默认配置信息的方法,包括使用Next.js CLI、getConfigAPI、实验性CLI命令以及在开发模式下访问特定路径,感兴趣的小伙伴跟着小编一起来看看吧
要查看 Next.js 的默认配置信息,有几种方法:
使用 Next.js CLI
next info
通过代码打印配置
// next.config.js
module.exports = (phase, { defaultConfig }) => {
console.log('Default Next.js config:', defaultConfig)
return {
// your custom config
}
}
使用 getConfig API
// config.ts
import { getConfig } from 'next/config'
export default function handler(req, res) {
const nextConfig = getConfig()
res.status(200).json(nextConfig)
}
查看运行时配置
// page.tsx
import { useRouter } from 'next/router'
export default function Page() {
// 在客户端查看运行时配置
console.log(process.env.NEXT_PUBLIC_RUNTIME_CONFIG)
return <div>...</div>
}
使用实验性 CLI 命令(如果可用)
next inspect
// next.config.js
{
env: {},
webpack: null,
webpackDevMiddleware: null,
distDir: '.next',
assetPrefix: '',
configOrigin: 'default',
useFileSystemPublicRoutes: true,
generateBuildId: () => null,
generateEtags: true,
pageExtensions: ['tsx', 'ts', 'jsx', 'js'],
target: 'server',
poweredByHeader: true,
compress: true,
analyticsId: process.env.VERCEL_ANALYTICS_ID || '',
images: {
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
path: '/_next/image',
loader: 'default',
domains: [],
disableStaticImages: false,
minimumCacheTTL: 60,
formats: ['image/webp'],
},
devIndicators: {
buildActivity: true,
buildActivityPosition: 'bottom-right',
},
onDemandEntries: {
maxInactiveAge: 15 * 1000,
pagesBufferLength: 2,
},
amp: {
canonicalBase: '',
},
basePath: '',
sassOptions: {},
trailingSlash: false,
i18n: null,
productionBrowserSourceMaps: false,
optimizeFonts: true,
webpack5: undefined,
excludeDefaultMomentLocales: true,
serverRuntimeConfig: {},
publicRuntimeConfig: {},
reactStrictMode: false,
httpAgentOptions: {
keepAlive: true,
},
outputFileTracing: true,
staticPageGenerationTimeout: 60,
swcMinify: true,
output: 'standalone',
experimental: {
// 实验性功能配置
}
}
要查看完整的运行时配置,也可以:
在开发模式下启动项目
pnpm dev
访问以下路径:
http://localhost:3000/_next/config (试了无效)
到此这篇关于查看Next.js默认配置信息的几种方法的文章就介绍到这了,更多相关查看Next.js配置信息内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
