Add how to use react-countup with NextJS 13 app directory

[jocarrd]

I think it would be very useful to add in the documentation how to use it in the nextjs server components, at first it took me a bit to understand it and it can help more than one developer.

NextJS doc

Example:

if you try to use it directly within a Server Component, you'll see an error:

import { CountUp } from 'acme-carousel';

export default function Page() {
  return (
    <div>
      <p>Numeric Counter</p>
      <CountUp  enableScrollSpy end={300} duration={3}/>
    </div>
  );
}

This is because Next.js doesn't know <CountUp /> is using client-only features.

To fix this, you can wrap third-party components that rely on client-only features in your own Client Components:

 'use client'

import CountUp, { CountUpProps } from 'react-countup'

export const NumberTransition = (props: CountUpProps) => {
  return <CountUp {...props} />
}

Now, you can use <NumberTransition/> directly within a Server Component:

import Carousel from './carousel';

export default function Page() {
  return (
    <div>
      <p>Numeric Counter</p>
      <NumberTransition enableScrollSpy end={300} duration={3} />
    </div>
  );
}

[liamb13]

I'm unable to get it working at all with Next app directory. It just displays as <span></span>

Update: It's being caused by a completely seperate issue. For some reason, another component using: dangerouslySetInnerHTML is preventing this from running.

[keif]

I was able to get it working with App directory - but you can't use enableScrollSpy - I used the Waypoint component instead.

…but that works in development, but silently fails in a production build, which I'm currently diagnosing.

[Frost7994]

I was able to get it working with App directory - but you can't use enableScrollSpy - I used the Waypoint component instead.

…but that works in development, but silently fails in a production build, which I'm currently diagnosing.

Any update on this?