Console.log('Dynamic page') 在 NextJs 中记录两次

Question

我在 NextJs 的动态页面中添加了 Console.log('Dynamic page')，但我意识到它记录了两次而不是一次。我将日志函数移到了具有空数组依赖项的 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 in React (only in development mode). You can remove it in next.config.js

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

Console.log('Dynamic page') 在 NextJs 中记录两次

Console.log('Dynamic page') logging twice in NextJs

reactjs

next.js