快捷導(dǎo)航

查看Next.js默認(rèn)配置信息的幾種方法

更新時(shí)間：2025年02月21日 10:06:38 作者：南藍(lán)

文章介紹了幾種查看Next.js默認(rèn)配置信息的方法,包括使用Next.js CLI、getConfigAPI、實(shí)驗(yàn)性CLI命令以及在開發(fā)模式下訪問特定路徑,感興趣的小伙伴跟著小編一起來看看吧

使用 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)
    }

查看運(yùn)行時(shí)配置

  //  page.tsx
  import { useRouter } from 'next/router'
    export default function Page() {
      // 在客戶端查看運(yùn)行時(shí)配置
      console.log(process.env.NEXT_PUBLIC_RUNTIME_CONFIG)
      return <div>...</div>
    }

使用實(shí)驗(yàn)性 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: {
    // 實(shí)驗(yàn)性功能配置
  }
}

要查看完整的運(yùn)行時(shí)配置，也可以：