next.config.js 重点解读

用处

它用于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-loader或file-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