Skip to content

Commit

Permalink
docs(storybook): add new import type for nextjs (#985)
Browse files Browse the repository at this point in the history
Co-authored-by: Ogun Babacan <[email protected]>
Co-authored-by: Erbil Nas <[email protected]>
  • Loading branch information
3 people authored Jan 8, 2025
1 parent 33dd9a4 commit 4be4e06
Showing 1 changed file with 23 additions and 0 deletions.
23 changes: 23 additions & 0 deletions docs/using-baklava-in-next.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,29 @@ In the page, import the component using `dynamic` with ssr off.
const Button = dynamic(() => import("@/components/Button"), { ssr: false });
```
Or you can export the component as dynamic to avoid type errors.
```jsx
"use client";
import dynamic from 'next/dynamic';
import type { ComponentProps } from 'react';
import { BlButton } from "@trendyol/baklava/dist/baklava-react";
type ButtonProps = ComponentProps<typeof BlButton>;
const Button = (props: ButtonProps) => (
<BlButton {...props}>Click me!</BlButton>
);
const DynamicButton = dynamic<ButtonProps>(() =>
Promise.resolve(Button)
);
export default DynamicButton;
```
[Here is the demo repository](https://github.com/trendyol/baklava/tree/next/examples/next-app-router-ssr). You can also preview it live with [StackBlitz](https://stackblitz.com/github/trendyol/baklava/tree/next/examples/next-app-router-ssr).
## Using with SSR
Expand Down

0 comments on commit 4be4e06

Please sign in to comment.