【Next.js】14 → 15 へ移行してみました [Techblog#36]

import React, { useState, useMemo, useEffect, cloneElement, useRef } from 'react'
const wait_through = async (ms: number = 0, last_call: number = Date.now()) => {  // 現在時刻と差分を計算  const now = Date.now()  const diff = now - last_call
  // 前回の呼び出しから、指定時間分経過していない場合は、指定時間分経過するまで待機  if (ms - diff > 0) await wait(ms - diff)
  // 呼び出し時間の更新  return Date.now()}
type CSSTransitionProps = {  children: React.ReactElement  in?: boolean  timeout: number  classNames?: string  unmountOnExit?: boolean}
type ENTER = 'enter'type ENTER_ACTIVE = 'enter-active'type ENTER_DONE = 'enter-done'type EXIT = 'exit'type EXIT_ACTIVE = 'exit-active'type EXIT_DONE = 'exit-done'
export const CSSTransition = ({  children,  timeout,  in: inProp,  classNames,  unmountOnExit,  ...props}: CSSTransitionProps) => {  const [show, setShow] = useState<boolean>((inProp || false) && !props.hasOwnProperty('onExited'))  const [state, setState] = useState<    ENTER | ENTER_ACTIVE | ENTER_DONE | EXIT | EXIT_ACTIVE | EXIT_DONE | null  >(null)  const effectDate = useRef<number>(0)
  // TransitionGroup の場合 onExited が付与されるので、強制的に unmountOnExit を true にする  const __unmountOnExit = useRef<boolean>(unmountOnExit || props.hasOwnProperty('onExited'))
  useEffect(() => {    ;(async () => {      const __show =        state === 'enter' ||        state === 'enter-active' ||        state === 'enter-done' ||        (state === null && show)      const __inProp = inProp === true
      if (!((__show && !inProp) || (!__show && inProp))) return
      const __effectDate = Date.now()      effectDate.current = __effectDate
      // do      setShow(true)      setState(__inProp ? 'enter' : 'exit')
      // doing      const time = await wait_through(5)      if (__effectDate !== effectDate.current) return      setState(__inProp ? 'enter-active' : 'exit-active')
      // done      await wait_through(timeout, time)      if (__effectDate !== effectDate.current) return      setState(__inProp ? 'enter-done' : 'exit-done')      if (!inProp && __effectDate === effectDate.current) setShow(false)    })()  }, [inProp])
  const component = useMemo(() => {    if (__unmountOnExit.current && !show) return null
    const givenClassNames = classNames ? `${classNames}-${state}` : state
    return cloneElement(children as React.ReactElement, {      className: `${givenClassNames}`,      ...props,    })  }, [show, state, children])
  return component}