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`,li:`li`,ol:`ol`,p:`p`,pre:`pre`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Guides/Installation/SSR/Next.js pages router`}),`
`,(0,c.jsx)(t.h1,{id:`installation-nextjs-pages-router`,children:`Installation: Next.js pages 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.jsxs)(t.h2,{id:`instruct-rootprovider-to-not-render-any-css-classes`,children:[`Instruct `,(0,c.jsx)(t.code,{children:`RootProvider`}),` to NOT render any CSS classes`]}),`
`,(0,c.jsxs)(t.p,{children:[`In the case of SSR, `,(0,c.jsx)(t.code,{children:`document.body`}),` is not available during SSR, so you will need to provide `,(0,c.jsx)(t.code,{children:`target="none"`}),` instead.`]}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { RootProvider } from '@preply/ds-web-root';

export const wrapWithProviders = () => (values: ContextValues) => {
    return (elements: React.ReactNode) => (
        ...
        <NextRouter.Provider value={values.nextRouter}>
            ...
            <RootProvider target="none" theme="tokyo-ui">{elements}</RootProvider>
            ...
        </NextRouter.Provider>
        ...
    );
};
`})}),`
`,(0,c.jsx)(t.h2,{id:`add-the-global-styles`,children:`Add the global styles`}),`
`,(0,c.jsxs)(t.p,{children:[`In the component that renders your application's HTML document, as close as possible to the start of the `,(0,c.jsx)(t.code,{children:`<head>`}),` tag, add:`]}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { GlobalStyle } from '@preply/ds-web-root';

...
    return (
        <html>
            <head>
                <link rel="preconnect" href="https://static.preply.com" />
                <GlobalStyle />
                ...
`})}),`
`,(0,c.jsx)(t.h2,{id:`setup-ssrprovider---ds-context-for-ssr-time`,children:`Setup SSRProvider - DS context for SSR time`}),`
`,(0,c.jsxs)(t.p,{children:[`Wrap your SSR application with `,(0,c.jsx)(t.code,{children:`SSRProvider`}),` in order to provide a `,(0,c.jsx)(t.code,{children:`hostname`}),` context and collect the "critical" CSS class names and style blocks.`]}),`
`,(0,c.jsxs)(t.p,{children:[`For more information on this provider visit `,(0,c.jsx)(t.a,{href:`/story/api-ds-web-root-providers-ssrprovider--page`,children:`API / ds-web-root / providers / SSRProvider`}),` reference page.`]}),`
`,(0,c.jsxs)(t.p,{children:[`The following code is taken from a `,(0,c.jsx)(t.code,{children:`Next.js`}),` application.`]}),`
`,(0,c.jsxs)(t.ol,{children:[`
`,(0,c.jsxs)(t.li,{children:[`merge `,(0,c.jsx)(t.code,{children:`{ classNames: string }`}),` with the `,(0,c.jsx)(t.code,{children:`Document`}),` props`]}),`
`,(0,c.jsxs)(t.li,{children:[`create an instance of this class to collect CSS class names and `,(0,c.jsx)(t.code,{children:`<style>`}),` blocks`]}),`
`,(0,c.jsxs)(t.li,{children:[`wrap SSR rendering with the `,(0,c.jsx)(t.code,{children:`SSRProvider`})]}),`
`,(0,c.jsxs)(t.li,{children:[`expose CSS class names and the `,(0,c.jsx)(t.code,{children:`<style>`}),` element`]}),`
`,(0,c.jsxs)(t.li,{children:[`and render the CSS classes in the `,(0,c.jsx)(t.code,{children:`<body>`}),` tag`]}),`
`]}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`// _document.tsx
import { ServerStyleSheet } from '@preply/ds-web-core';
import { SSRProvider } from '@preply/ds-web-root';

// 1
class MyDocument extends Document<Request & { classNames: string }> {
    static async getInitialProps(ctx: DocumentContext}) {

        // 2
        const stylesheet = new ServerStyleSheet();

        // 3
        const originalRenderPage = ctx.renderPage
        ctx.renderPage = () =>
            originalRenderPage({
                enhanceApp: (App) => props => (
                    <SSRProvider stylesheet={stylesheet} hostname={hostname}>
                        <App {...props} />
                    </SSRProvider>
                ),
            });

        // 4
        const initialProps = await Document.getInitialProps(ctx);
        return {
            ...initialProps,
            classNames : stylesheet.getClassName(),
            styles: stylesheet.getStyleElement()
        };
    }

    render() {
        const { classNames } = this.props;
        // 5
        return (
            <Html>
                <body className={\`other-classes \${classNames}\`}>
                    ...
                </body>
            </Html>
        );
    }
}
`})}),`
`,(0,c.jsxs)(t.p,{children:[`See also `,(0,c.jsx)(t.a,{href:`https://nextjs.org/docs/advanced-features/custom-document`,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};