Next.js · Senior · Question 22 of 75

A third-party component uses hooks but has no `'use client'`. How do you use it in a server page?

✓Correct answer: Re-export it from your own file with 'use client'
2Wrap it in <Suspense> - that's enough
3You can't: such libraries are incompatible with the App Router

Explanation

Create components/carousel.tsx: 'use client'; export { Carousel } from 'acme-carousel'. Now the server component imports the client wrapper. Many libraries have already added the directive themselves. Suspense has nothing to do with the client boundary.

A third-party component uses hooks but has no `'use client'`. How do you use it in a server page?

Explanation

Further reading

Problem with a question

Test yourself

A third-party component uses hooks but has no 'use client'. How do you use it in a server page?

Explanation

Further reading

Test yourself

A third-party component uses hooks but has no `'use client'`. How do you use it in a server page?