【NextJS】Uncaught RangeError: Maximum call stack size exceededの対処法

きっかけはWebアプリ制作時。。。

Uncaught RangeError: Maximum call stack size exceeded

またチミか。

原因

端的に言えば、変数やNextJSの場合はコンポーネントの入れ子構造をやりすぎるとこうなるようです。

エラー例

修正前

export default function Box ({children}:any) {
    return (
      <div style={{backgroundColor: "black", color: "white"}}>
        {children}
      </div>
    )
}

// ここと
const BoxInnder = ({children}:any) => {
    return (
        <Box>
            <h1>code test</h1>
            
        </Box>
    )
}

// ここで入れ子の読み込みがほぼ無限に起こっている(?)
const BoxInnderContent = ({children}:any) => {
    return (
        <BoxInnder>
            <h1>code test</h1>
            
        </BoxInnder>
    )
}

よい子はextendsを使いましょう。