如何在Next.js 12中不关闭SWC的前提下配置Why Did You Render

Next.js 12 版本默认使用SWC作为编译工具，无需回退到Babel、无需禁用SWC即可完成Why Did You Render的配置，操作步骤如下：

• 第一步：安装依赖
  执行命令安装Why Did You Render：

  npm install @welldone-software/why-did-you-render --save-dev
  # 或使用yarn
  yarn add @welldone-software/why-did-you-render --dev
  # 或使用pnpm
  pnpm add @welldone-software/why-did-you-render -D
  

• 第二步：修改next.config.js配置SWC
  直接在next.config.js中配置react的导入源，仅开发环境生效，不需要修改任何Babel相关配置：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    // 其他原有配置保持不变
    compiler: {
      react: {
        importSource: process.env.NODE_ENV === 'development' 
          ? '@welldone-software/why-did-you-render' 
          : 'react',
      },
    },
  }
  
  module.exports = nextConfig
  

• 第三步：添加Why Did You Render初始化文件
  在项目根目录新建wdyr.js（TS项目为wdyr.ts），配置仅客户端开发环境生效：

  // wdyr.js
  import React from 'react'
  
  // 仅在客户端开发环境启动WDYR，避免服务端运行报错
  if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
    const whyDidYouRender = require('@welldone-software/why-did-you-render')
    whyDidYouRender(React, {
      // 可根据需求调整配置，比如开启跟踪所有纯组件
      trackAllPureComponents: true,
    })
  }
  

• 第四步：在入口文件引入初始化配置
  打开项目的pages/_app.js（或pages/_app.tsx），在所有导入的最顶部引入刚才的初始化文件：

  // 必须放在第一行，早于React的导入
  import './wdyr'
  import React from 'react'
  // 其他原有导入和代码保持不变
  

如果是TypeScript项目，出现类型报错时，可在项目根目录新建wdyr.d.ts类型声明文件解决：

/// <reference types="@welldone-software/why-did-you-render" />

注意：该配置全程使用Next.js原生SWC能力，不需要创建任何Babel配置文件，不会触发SWC降级，编译性能不受影响。

内容的提问来源于stack exchange，提问作者francis