import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-D-oZzXNK.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-8vvjMMnP.js";function o(e){let t={a:`a`,code:`code`,h1:`h1`,h2:`h2`,p:`p`,pre:`pre`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Guides/Installation/SSR/Next.js app router`}),`
`,(0,c.jsx)(t.h1,{id:`installation-nextjs-app-router`,children:`Installation: Next.js app router`}),`
`,(0,c.jsxs)(t.p,{children:[`This guide assumes you have read and followed the steps in the `,(0,c.jsx)(t.a,{href:`/story/guides-installation-applications--page`,children:`Installation: Applications`}),` guide.`]}),`
`,(0,c.jsx)(t.h2,{id:`packages`,children:`Packages`}),`
`,(0,c.jsxs)(t.p,{children:[`You will need to install one extra package. `,(0,c.jsx)(t.code,{children:`@preply/ds-web-core`}),`, which provides you with everything you need to collect stylesheets and CSS classes during SSR time.`]}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{children:`yarn add @preply/ds-web-core
`})}),`
`,(0,c.jsx)(t.h2,{id:`create-a-client-component-for-collecting-styles-and-rendering-provider`,children:`Create a client component for collecting styles and rendering provider`}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`'use client';

import { ReactNode, useState } from 'react';
import { RootProvider, SSRProvider } from '@preply/ds-web-root';
import { ServerStyleSheet } from '@preply/ds-web-core';
import { useServerInsertedHTML } from 'next/navigation';

const hostname = process.env.PREPLY_HOST; // or any other way to get the hostname

export const DSProvider = ({ children }: { children: ReactNode }) => {
    const [stylesheet] = useState(() => new ServerStyleSheet());

    useServerInsertedHTML(() => {
        const styles = stylesheet.getStyleElement();
        return <>{styles}</>;
    });

    return (
        <SSRProvider stylesheet={stylesheet} hostname={hostname}>
            <RootProvider theme="tokyo-ui" target="none">
                {children}
            </RootProvider>
        </SSRProvider>
    );
};
`})}),`
`,(0,c.jsx)(t.h2,{id:`add-dsprovider-and-the-global-styles-to-the-root-layouttsx`,children:`Add DSProvider and the global styles to the root layout.tsx`}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import type { Metadata } from 'next';
import { DSProvider } from '../components/DSProvider';
import { GlobalStyle } from '@preply/ds-web-root';

export const metadata: Metadata = {
    title: 'Create Next App',
    description: 'Generated by create next app',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
            <head>
                <link rel="preconnect" href="https://static.preply.com" />
                <GlobalStyle />
            </head>
            <body>
                <DSProvider>{children}</DSProvider>
            </body>
        </html>
    );
}
`})}),`
`,(0,c.jsxs)(t.p,{children:[`See also `,(0,c.jsx)(t.a,{href:`https://nextjs.org/docs/app/building-your-application/styling/css-in-js`,rel:`nofollow`,children:`Next.js official docs`}),`.`]})]})}function s(e={}){let{wrapper:t}={...i(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(o,{...e})}):o(e)}var c;e((()=>{c=t(),a(),n()}))();export{s as default};