Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add next/head support #20436

Merged
merged 1 commit into from
Dec 30, 2022
Merged

Add next/head support #20436

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions code/frameworks/nextjs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
- [`useSelectedLayoutSegment` and `useSelectedLayoutSegments` hook](#useselectedlayoutsegment-and-useselectedlayoutsegments-hook)
- [Default Navigation Context](#default-navigation-context)
- [Actions Integration Caveats](#actions-integration-caveats-1)
- [Next.js Head](#nextjs-head)
- [Sass/Scss](#sassscss)
- [Css/Sass/Scss Modules](#csssassscss-modules)
- [Styled JSX](#styled-jsx)
Expand All @@ -54,6 +55,8 @@

👉 [Next.js Routing (next/router)](#nextjs-routing)

👉 [Next.js Head (next/head)](#nextjs-head)

👉 [Next.js Navigation (next/navigation)](#nextjs-navigation)

👉 [Sass/Scss](#sassscss)
Expand Down Expand Up @@ -599,6 +602,10 @@ export const parameters = {
};
```

### Next.js Head

[next/head](https://nextjs.org/docs/api-reference/next/head) is supported out of the box. You can use it in your stories like you would in your Next.js application. Please keep in mind, that the Head children are placed into the head element of the iframe that Storybook uses to render your stories.

### Sass/Scss

[Global sass/scss stylesheets](https://nextjs.org/docs/basic-features/built-in-css-support#sass-support) are supported without any additional configuration as well. Just import them into [preview.js](https://storybook.js.org/docs/react/configure/overview#configure-story-rendering)
Expand Down
10 changes: 10 additions & 0 deletions code/frameworks/nextjs/src/head-manager/decorator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import * as React from 'react';
import HeadManagerProvider from './head-manager-provider';

export const HeadManagerDecorator = (Story: React.FC): React.ReactNode => {
return (
<HeadManagerProvider>
<Story />
</HeadManagerProvider>
);
};
22 changes: 22 additions & 0 deletions code/frameworks/nextjs/src/head-manager/head-manager-provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React, { useMemo } from 'react';
import { HeadManagerContext } from 'next/dist/shared/lib/head-manager-context';
import initHeadManager from 'next/dist/client/head-manager';

type HeadManagerValue = {
updateHead?: ((state: JSX.Element[]) => void) | undefined;
mountedInstances?: Set<unknown>;
updateScripts?: ((state: any) => void) | undefined;
scripts?: any;
getIsSsr?: () => boolean;
appDir?: boolean | undefined;
nonce?: string | undefined;
};

const HeadManagerProvider: React.FC = ({ children }) => {
const headManager: HeadManagerValue = useMemo(initHeadManager, []);
headManager.getIsSsr = () => false;

return <HeadManagerContext.Provider value={headManager}>{children}</HeadManagerContext.Provider>;
};

export default HeadManagerProvider;
12 changes: 11 additions & 1 deletion code/frameworks/nextjs/src/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,15 @@ import './config/preview';
import { RouterDecorator } from './routing/decorator';
import { StyledJsxDecorator } from './styledJsx/decorator';
import './images/next-image-stub';
import { HeadManagerDecorator } from './head-manager/decorator';

export const decorators = [StyledJsxDecorator, RouterDecorator];
function addNextHeadCount() {
const meta = document.createElement('meta');
meta.name = 'next-head-count';
meta.content = '0';
document.head.appendChild(meta);
}

addNextHeadCount();

export const decorators = [StyledJsxDecorator, RouterDecorator, HeadManagerDecorator];
34 changes: 34 additions & 0 deletions code/frameworks/nextjs/template/stories_default-js/Head.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/* eslint-disable no-undef */
import { expect } from '@storybook/jest';
import Head from 'next/head';
import React from 'react';
import { within, userEvent, waitFor } from '@storybook/testing-library';

function Component() {
return (
<div>
<Head>
<title>Next.js Head Title</title>
<meta property="og:title" content="My page title" key="title" />
</Head>
<Head>
<meta property="og:title" content="My new title" key="title" />
</Head>
<p>Hello world!</p>
</div>
);
}

export default {
component: Component,
};

export const Default = {
play: async ({ canvasElement }) => {
await waitFor(() => expect(document.title).toEqual('Next.js Head Title'));
await expect(document.querySelectorAll('meta[property="og:title"]')).toHaveLength(1);
await expect(document.querySelector('meta[property="og:title"]').content).toEqual(
'My new title'
);
},
};