Back to Storybook

Nextjs Navigation Override In Preview

docs/_snippets/nextjs-navigation-override-in-preview.md

10.3.62.8 KB
Original Source
ts
// Replace your-framework with nextjs or nextjs-vite
import { getRouter } from '@storybook/your-framework/navigation';

export default {
  parameters: {
    nextjs: {
      // ๐Ÿ‘‡ Override the default navigation properties
      navigation: {
        pathname: '/app/',
      },
    },
  },
  async beforeEach() {
    // ๐Ÿ‘‡ Manipulate the default navigation method mocks
    getRouter().push.mockImplementation(() => {
      /* ... */
    });
  },
};
js
// Replace your-framework with nextjs or nextjs-vite
import type { Preview } from '@storybook/your-framework';

// ๐Ÿ‘‡ Must include the `.mock` portion of filename to have mocks typed correctly
import { getRouter } from "@storybook/your-framework/navigation.mock";

const preview: Preview = {
  parameters: {
    nextjs: {
      // ๐Ÿ‘‡ Override the default navigation properties
      navigation: {
        pathname: '/app/',
      },
    },
  },
  async beforeEach() {
    // ๐Ÿ‘‡ Manipulate the default navigation method mocks
    getRouter().push.mockImplementation(() => {
      /* ... */
    });
  },
};

export default preview;
ts
// Replace your-framework with nextjs or nextjs-vite
import { definePreview } from '@storybook/your-framework';

// ๐Ÿ‘‡ Must include the `.mock` portion of filename to have mocks typed correctly
import { getRouter } from '@storybook/your-framework/navigation.mock';

const preview = definePreview({
  parameters: {
    nextjs: {
      // ๐Ÿ‘‡ Override the default navigation properties
      navigation: {
        pathname: '/app/',
      },
    },
  },
  async beforeEach() {
    // ๐Ÿ‘‡ Manipulate the default navigation method mocks
    getRouter().push.mockImplementation(() => {
      /* ... */
    });
  },
});

export default preview;
<!-- JS snippets still needed while providing both CSF 3 & Next -->
js
// Replace your-framework with nextjs or nextjs-vite
import { definePreview } from '@storybook/your-framework';

// ๐Ÿ‘‡ Must include the `.mock` portion of filename to have mocks typed correctly
import { getRouter } from '@storybook/your-framework/navigation.mock';

const preview = definePreview({
  parameters: {
    nextjs: {
      // ๐Ÿ‘‡ Override the default navigation properties
      navigation: {
        pathname: '/app/',
      },
    },
  },
  async beforeEach() {
    // ๐Ÿ‘‡ Manipulate the default navigation method mocks
    getRouter().push.mockImplementation(() => {
      /* ... */
    });
  },
});

export default preview;