# react-helmet-next ## Introduction [react-helmet-next](https://github.com/blencm/react-helmet) is a fork of [React Helmet](https://github.com/nfl/react-helmet) designed for managing document head tags dynamically in modern React applications. Unlike `react-helmet`, this package requires a `` to encapsulate state per request, making it more suitable for server-side rendering (SSR) and concurrent rendering environments. ## Installation You can install the package using your preferred package manager: ```sh # Using pnpm pnpm add react-helmet-next # Using npm npm install react-helmet-next # Using yarn yarn add react-helmet-next ``` ## Usage ### Basic Example Wrap your application in a `` to encapsulate the state for ``: ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import { Helmet, HelmetProvider } from 'react-helmet-next'; const App = () => (

My App

Welcome to My App

); ReactDOM.render(, document.getElementById('root')); ``` ### Server-Side Rendering (SSR) On the server, use the `context` prop to collect metadata during rendering: ```jsx import React from 'react'; import { renderToString } from 'react-dom/server'; import { Helmet, HelmetProvider } from 'react-helmet-next'; const helmetContext = {}; const App = () => (

Server-Side Rendered Page

Welcome to SSR

); const html = renderToString(); const { helmet } = helmetContext; console.log(helmet.title.toString()); // Outputs: Server-Side Rendered Page ``` ### Streaming Support To support streaming SSR, ensure `` data is rendered outside `renderToNodeStream()`: ```jsx import through from 'through'; import { renderToNodeStream } from 'react-dom/server'; import { Helmet, HelmetProvider } from 'react-helmet-next'; import template from 'server/template'; const helmetContext = {}; const App = () => (

Streaming Page

Streaming Rendering

); const [header, footer] = template({ helmet: helmetContext.helmet }); res.status(200); res.write(header); renderToNodeStream() .pipe( through( function write(data) { this.queue(data); }, function end() { this.queue(footer); this.queue(null); } ) ) .pipe(res); ``` ### Testing with Jest If using Jest and needing to emulate SSR behavior, set `HelmetProvider.canUseDOM = false`: ```jsx import { HelmetProvider } from 'react-helmet-next'; HelmetProvider.canUseDOM = false; ``` ### SEO Optimization To prioritize SEO tags, use the `prioritizeSeoTags` flag: ```jsx SEO Optimized Page ``` Server-side rendering: ```html ${helmet.title.toString()} ${helmet.priority.toString()} ${helmet.meta.toString()} ${helmet.link.toString()} ``` ### Usage Without Context You can manually create a `HelmetData` instance to manage state without using ``: ```jsx import React from 'react'; import { renderToString } from 'react-dom/server'; import { Helmet, HelmetData } from 'react-helmet-next'; const helmetData = new HelmetData({}); const App = () => ( Standalone Helmet ); const html = renderToString(); const { helmet } = helmetData.context; ``` ## License This package is licensed under the MIT License.