glennreyes / glennreyes/react-countup

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

Open
#806 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2.1k
Forks
138
PR merge metrics
No merged PRs in 30d

Description

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
](https://beta.nextjs.org/docs/rendering/server-and-client-components)

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 (


Numeric Counter




);
}
```

This is because Next.js doesn't know 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
}
```

Now, you can use directly within a Server Component:

```
import Carousel from './carousel';

export default function Page() {
return (


Numeric Counter




);
}
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.