Merge pull request #20436 from storybookjs/valentin/add-next-head-sup…

…port Add next/head support
storybookjs · Dec 30, 2022 · 8aa8ea7 · 8aa8ea7
2 parents c9f2525 + 8a9e836
commit 8aa8ea7
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 1 deletion.
diff --git a/code/frameworks/nextjs/README.md b/code/frameworks/nextjs/README.md
@@ -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)
@@ -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)
@@ -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)

diff --git a/code/frameworks/nextjs/src/head-manager/decorator.tsx b/code/frameworks/nextjs/src/head-manager/decorator.tsx
@@ -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>
+  );
+};
diff --git a/code/frameworks/nextjs/src/head-manager/head-manager-provider.tsx b/code/frameworks/nextjs/src/head-manager/head-manager-provider.tsx
@@ -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;
diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx
@@ -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];
diff --git a/code/frameworks/nextjs/template/stories_default-js/Head.stories.jsx b/code/frameworks/nextjs/template/stories_default-js/Head.stories.jsx
@@ -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'
+    );
+  },
+};