Next. Config. js key reading

use

It is used in the Next build phase, not in the browser. Articles are best served with documentation: documentation

phase

The phase value is the current construction phase. Includes the following phases:

PHASE_EXPORT = 'phase-export'
PHASE_PRODUCTION_BUILD = 'phase-production-build'
PHASE_PRODUCTION_SERVER = 'phase-production-server'
PHASE_DEVELOPMENT_SERVER = 'phase-development-server'
Copy the code

Adding environment variables

Add:

env: {
    customKey: 'my-value',
  }
Copy the code

Use: the process. The env. CustomKey

Extension support

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

CDN prefix support

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

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

To publish static resources (typically in the static directory), you can use them like this:

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

To publish static resources (typically in the static directory), you can use them like this:

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

Using webpack

For example, you can use url-loader or file-loader to optimize image files:

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
    }
Copy the code

Static optimization index

Close:

devIndicators: {
  autoPrerender: false
}
Copy the code

Disable eTAG generation

generateEtags: false
Copy the code

Prohibit x – powered – by

X-powered-by is used to tell you what language or framework the site was written in

    poweredByHeader: false
Copy the code

Runtime configuration

PublicRuntimeConfig is accessible to both the browser and the server. ServerRuntimeConfig is accessible only to the server. Configuration mode:

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',}}Copy the code

The access mode is:

import getConfig from 'next/config'
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
Copy the code

How to configure variables according to dev, PROd, and test environments? One way is as follows:

1. Byprocess.env.DEPLOY_ENVGet the current runtime environment to load different configuration files:

|--config
|----|--dev.js
|----|--test.js
|----|--prod.js
|----|--index.js
Copy the code

// index.js
const env = process.env.DEPLOY_ENV || 'dev'
const config = require(`. /${env}`)
Copy the code

1. inpublicRunConfigTo configure,

// next.config.js
const config = require('./config')
publicRuntimeConfig: {
      config
    }
Copy the code

Customize the package output file

  distDir: 'build'
Copy the code

Custom Route

Custom routing is usually not required

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'}},}},}Copy the code

💡 next – compose – plugins

As a cleaner way to manage the next. Js plug-in, the overall structure of the document should be as follows.

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

const nextConfig = {
  distDir: 'build'.webpack: (config, options) = > {
    // modify the `config` here
    returnconfig; }};module.exports = withPlugins([
  // add plugins here..
], nextConfig);
Copy the code

Here is a complete example

use