Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lifeiscontent/storybook-addon-next-router
Addon to use Next.js Router in Storybook
https://github.com/lifeiscontent/storybook-addon-next-router
Last synced: 16 days ago
JSON representation
Addon to use Next.js Router in Storybook
- Host: GitHub
- URL: https://github.com/lifeiscontent/storybook-addon-next-router
- Owner: lifeiscontent
- License: mit
- Archived: true
- Created: 2020-03-24T03:20:13.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T01:45:09.000Z (almost 2 years ago)
- Last Synced: 2024-09-19T10:18:15.154Z (about 2 months ago)
- Language: TypeScript
- Size: 1.17 MB
- Stars: 107
- Watchers: 4
- Forks: 23
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# You might not need this project
https://storybook.js.org/blog/integrate-nextjs-and-storybook-automatically/
## Storybook Addon Next Router
Use Next.js Router in your Storybook stories.
## Versions
- Use 1.x if you're using storybook 5.x
- Use 3.x if you're using storybook 6.x
- Use 4.x if you're using storybook 6.x and react 18
**Note: these docs refer to 3.0**
Add the addon to your configuration in `.storybook/main.js`
```js
module.exports = {
...config,
addons: [
...your addons
"storybook-addon-next-router",
],
};
```
Add the RouterContext.Provider to `.storybook/preview.js`
```js
import { AppRouterContext } from "next/dist/shared/lib/app-router-context"; // next 13 next 13 (using next/navigation)
// import { RouterContext } from "next/dist/shared/lib/router-context"; // next 13 (using next/router) / next 12
// import { RouterContext } from "next/dist/shared/lib/router-context"; // next 11.1
// import { RouterContext } from "next/dist/next-server/lib/router-context"; // next < 11.1
export const parameters = {
nextRouter: {
Provider: AppRouterContext.Provider, // next 13 next 13 (using next/navigation)
// Provider: RouterContext.Provider, // next 13 (using next/router) / next < 12
},
}
```
## Usage in story
```jsx
import MyComponentThatHasANextLink from "../component-that-has-a-next-link";
export default {
title: "My Story",
};
// if you have the actions addon
// you can click the links and see the route change events there
export const Example = () => ;
Example.parameters = {
nextRouter: {
pathname: "/profile/[id]",
asPath: "/profile/lifeiscontent",
query: {
id: "lifeiscontent",
},
},
};
```
### Custom defaults
in `preview.js`
```js
export const parameters = {
nextRouter: {
pathname: '/', // defaults to `/`
asPath: '/', // defaults to `/`
query: {}, // defaults to `{}`
push() {
} // defaults to using addon actions integration,
// can override any method in the router
}
};
```
Read more about the options available for next/router at https://nextjs.org/docs/api-reference/next/router
## Example App
To see real world usage of how to use this addon, check out the example app:
https://github.com/lifeiscontent/realworld