Use a kit in Next.js

Place the files

Choose Next.js on the example page and follow the kit’s INSTALL.en.md. Copy the whole folder into your project without flattening nested paths. Import SelectedExample.tsx into an App Router page. Its existing client directive and those of the interactive components should remain in place.

Keep server rendering predictable

You do not need to turn an entire page into a client component to display the example. Browser APIs belong in handlers or effects. Keep the initial content and settings the same on the server and the first client render.

When passing callbacks, define them inside a client component. Do not pass an ordinary server function to a client component as an event handler.

Check your actual application

Run the typecheck and production build commands already defined in your package.json. Then load the page directly, navigate to it and test the action with a keyboard. Check the browser console for hydration errors.

A target selector or a source bundle is not proof of compatibility with every Next.js version. The item’s latest test report and your own application build determine what has been checked. Do not upgrade dependencies just to add the kit.