Console.log('动态页面') 在 NextJs 中记录两次

Question

我Console.log('Dynamic page')在 NextJs 中添加了一个动态页面，但我意识到它记录了两次而不是一次。我将日志函数移至具有空数组依赖项的 useEffect 中，但它仍然记录了两次。这里可能有什么问题？谢谢

代码/topics/[articleId].js：

import { useRouter } from 'next/router'
import { useEffect } from "react"
import Image from "next/image"
import Link from "next/link"
import ExcitedSVG from '../../../components/reaction-icons/excited'
import HappySVG from '../../../components/reaction-icons/happy'
import InLoveSVG from '../../../components/reaction-icons/in-love'
import NotSureSVG from '../../../components/reaction-icons/not-sure'
import SillySVG from '../../../components/reaction-icons/silly'
import ArticleStyles from "../../../components/styles/article.module.css"

export default function Article(){

    useEffect(()=>{
        console.log('Log once'); <--- //It logs twice instead
    },[])

    return (
        <div className={`${ArticleStyles.articlePg} pt-5`}>
            Component content            
        </div>
    )
}

Answer 1

我认为双重渲染的主要原因是StrictMode在React中（仅在开发模式下）。您可以将其删除next.config.js

module.exports = {
  //reactStrictMode: true,
}