next.config.js 重点解读

·  阅读 3071

用处

它用于Next构建阶段,不作用于浏览器。文章配合文档食用更佳:文档

phase

phase 值的是当前构建阶段。包含以下阶段:

PHASE_EXPORT = 'phase-export'
PHASE_PRODUCTION_BUILD = 'phase-production-build'
PHASE_PRODUCTION_SERVER = 'phase-production-server'
PHASE_DEVELOPMENT_SERVER = 'phase-development-server'
复制代码

添加环境变量

添加:

env: {
    customKey: 'my-value',
  }
复制代码

使用:process.env.customKey

拓展名支持

pageExtensions: ['mdx', 'jsx', 'js', 'ts', 'tsx']

CDN 前缀支持

const isProd = process.env.NODE_ENV === 'production'

module.exports = {
  // Use the CDN in production and localhost for development.
  assetPrefix: isProd ? 'https://cdn.mydomain.com' : '',
}
复制代码

发布静态资源(一般位于static目录下),则可以像这样使用:

import getConfig from 'next/config'
const {publicRuntimeConfig} = getConfig()
<link
    rel="stylesheet"
    type="text/css"
    href={`${publicRuntimeConfig.assetPrefix}/_next/static/your_static_file.css`}
/>
复制代码

发布静态资源(一般位于static目录下),则可以像这样使用:

import getConfig from 'next/config'
const {publicRuntimeConfig} = getConfig()
<link
    rel="stylesheet"
    type="text/css"
    href={`${publicRuntimeConfig.assetPrefix}/_next/static/your_static_file.css`}
/>
复制代码

使用webpack

例如,你可以使用url-loaderfile-loader来优化图片文件:

webpack(config, options) {
      // const {isServer} = options
      nextConfig = Object.assign({inlineImageLimit: 0, assetPrefix: ''}, nextConfig)
      config.module.rules.push({
        test: /\.(jpe?g|png|svg|gif|ico|webp|jp2)$/,
        exclude: nextConfig.exclude,
        use: [
          {
            loader: require.resolve('url-loader'),
            options: {
              limit: nextConfig.inlineImageLimit,
              fallback: require.resolve('file-loader'),
              publicPath: `${nextConfig.assetPrefix}/_next/static/assets/`,
              outputPath: `static/assets/`,
              name: '[name]-[hash:base64:5].[ext]',
              esModule: nextConfig.esModule || false,
            },
          },
        ],
      })

      if (typeof nextConfig.webpack === 'function') {
        return nextConfig.webpack(config, options)
      }

      return config
    }
复制代码

静态优化指标

关闭:

devIndicators: {
  autoPrerender: false
}
复制代码

禁止etag生成

generateEtags: false
复制代码

禁止x-powered-by

x-powered-by用于告知网站是用何种语言或框架编写的

    poweredByHeader: false
复制代码

运行时配置

publicRuntimeConfig 浏览器和服务器均可访问, serverRuntimeConfig仅仅服务器可以访问。 配置方式:

module.exports = {
  serverRuntimeConfig: {
    // Will only be available on the server side
    mySecret: 'secret',
    secondSecret: process.env.SECOND_SECRET, // Pass through env variables
  },
  publicRuntimeConfig: {
    // Will be available on both server and client
    staticFolder: '/static',
  },
}
复制代码

访问方式为:

import getConfig from 'next/config'
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
复制代码

如何根据dev,prod,test不同环境配置不同变量,一种方式如下:

  • 1.通过process.env.DEPLOY_ENV获取当前的运行环境,以加载不同的配置文件:
|--config
|----|--dev.js
|----|--test.js
|----|--prod.js
|----|--index.js
复制代码
// index.js
const env = process.env.DEPLOY_ENV || 'dev'
const config = require(`./${env}`)
复制代码
    1. publicRunConfig进行配置,
// next.config.js
const config = require('./config')
publicRuntimeConfig: {
      config
    }
复制代码

自定义打包输出文件

  distDir: 'build'
复制代码

自定义路由

通常不需要自定义路由

module.exports = {
  exportPathMap: async function(
    defaultPathMap,
    { dev, dir, outDir, distDir, buildId }
  ) {
    return {
      '/': { page: '/' },
      '/about': { page: '/about' },
      '/p/hello-nextjs': { page: '/post', query: { title: 'hello-nextjs' } },
    }
  },
}
复制代码

💡 next-compose-plugins

作为一种更简洁的方式管理next.js插件,文档 它的整体结构应该如下。

// vue.config.js
const withPlugins = require('next-compose-plugins');

const nextConfig = {
  distDir: 'build',
  webpack: (config, options) => {
    // modify the `config` here
    return config;
  },
};

module.exports = withPlugins([
  // add plugins here..
], nextConfig);
复制代码

这里有一个完整的:example

分类:
前端
标签: