所以我已经按照Next.js教程here建立了一个网站，现在我已经开始添加一些东西并做一些调整。
突然，我听到控制台里有个烦人的唠叨鬼说：

next-dev.js?3515:20 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

现在，我一辈子都记不起我添加了什么会产生这个警告。我试图注解掉我添加的最新组件。
对了，我尝试添加对react-i18next得支持，所以我需要帮助得真实的问题是：

如何获得可读性良好的日志？

我最大的文件最多有100行，所以查找3515行的错误实际上对我没有任何好处。
而且sourceMaps似乎也没有什么帮助。

我的next.config.js

const path = require('path');

module.exports = {
  i18n: {
    locales: ['en', 'sv'],
    defaultLocale: 'en',
  },
  sassOptions: {
        includePaths: [
            path.join(__dirname, 'styles'),
            path.join(__dirname, 'components')
        ],
  },
}

我应该从哪里开始查找错误？

编辑：

import React from "react";
import cn from 'classnames';
import styles from './main-nav.module.scss';
import Link from 'next/link';
import Image from 'next/image';
import LangSwitcher from './lang-switcher';
import MenuItems from './menu-items';

export default class MainNav extends React.Component {
  constructor(props, children, type, state) {
    super(props);
    this.state = {
      children: children,
      type: type,
      show: false,
      expanded: true,
      locale: '',
    };
  }
  toggleMenu = () => {
    const currentState = this.state.expanded;
    this.setState({ expanded: !currentState });
  }
  render() {
    return (
      <div>
        <div className={cn(styles["main-nav"])}>
          <div className={cn(styles["main-nav-inner"])}>
            <div className={cn(styles["capow-logo"])}>
              <h2>
                <Link href="/">
                  <Image
                    src='/images/Jorgeuos-logo.svg'
                    className={cn(styles["jorgeuos-logo"])}
                    width={160}
                    height={69}
                    alt='Jorgeuos'
                  />
                </Link>
              </h2>
            </div>
            <MenuItems
            expanded={this.state.expanded}
            styles={styles}
            toggleMenu={this.toggleMenu}
            ></MenuItems>
            {this.children}
          </div>
          <LangSwitcher></LangSwitcher>
        </div>
      </div>
    );
  }
}

我现在慢慢地掌握了这个窍门。我不能在类组件内部使用forwardRef，所以我需要把我的徽标分解成它自己的功能组件。