Implementation in SSR (Next.js) #5

sanishkr · 2020-02-10T10:43:27Z

Where do I implement in SSR (Next.js)? Should I keep StyleSheetManager in _app.js or in _document.js? I think it should be in _document.js. But I tried wrapping my in StyleSheetManager, it doesn't work.

Here is a sample _document.js without this plugin.

import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
import stylisRTLPlugin from 'stylis-plugin-rtl';
import { parseCookies } from 'nookies';

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;
    const { html, head, errorHtml, chunks } = ctx.renderPage();
    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
        });
      const initialProps = await Document.getInitialProps(ctx);
      const cookies = parseCookies(ctx);
      initialProps.language = cookies['next-i18next'] || 'en';
      initialProps.direction = initialProps.language === 'ar' ? 'rtl' : 'ltr';
      return {
        html,
        head,
        errorHtml,
        chunks,
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        )
      };
    } finally {
      sheet.seal();
    }
  }
  render() {
    const { language, direction } = this.props;
    return (
      <html dir={direction} lang={language}>
        <body>
          {this.props.customValue}
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

Here is what I tried

.
.
.
       <StyleSheetManager
          stylisPlugins={language === 'ar' ? [stylisRTLPlugin] : []}
        >
          <body>
            {this.props.customValue}
            <Main />
            <NextScript />
          </body>
        </StyleSheetManager>
.
.
.

The text was updated successfully, but these errors were encountered:

Migggz · 2020-03-09T20:32:13Z

It should be in _app.js

<StyleSheetManager stylisPlugins={language === "ar" ? [stylisRTLPlugin] : []}>
   {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
   <CssBaseline />
   <Page {...pageProps}  />
</StyleSheetManager>

sanishkr · 2020-03-10T11:40:52Z

Thanks, @Migggz for the suggestion.
I had tried like this in _app.js:

.
.
.
         {language ? (
            <StyleSheetManager
              stylisPlugins={language === 'ar' ? [stylisRTLPlugin] : []}
            >
              <Component {...pageProps} />
            </StyleSheetManager>
          ) : null}
.
.

Conditional to do re-rendering when I hit change language. It wasn't working otherwise.
What is CssBaseline though?

oliviertassinari · 2020-04-25T09:21:52Z

What is CssBaseline though?

@sanishkr https://material-ui.com/components/css-baseline/

sanishkr · 2020-04-30T14:23:05Z

Got it. Thanks @oliviertassinari

Can anyone help me why it doesn't work when doing like this:

    <StyleSheetManager
              stylisPlugins={language === 'ar' ? [stylisRTLPlugin] : []}
            >
              <Component {...pageProps} />
    </StyleSheetManager>

I have to do like this:

         {language ? (
            <StyleSheetManager
              stylisPlugins={language === 'ar' ? [stylisRTLPlugin] : []}
            >
              <Component {...pageProps} />
            </StyleSheetManager>
          ) : null}

But this approach has its own problems. I have made an example here to look at. Check components/Theme.js. Just comment line 17 and 23.

CodeSandbox

barghi · 2020-07-11T15:42:13Z

@sanishkr Have you found a solution?

sanishkr · 2020-07-11T18:43:50Z

Nope. It's a really cool plugin but authors or community doesn't have much support yet.

barghi · 2020-07-12T05:38:19Z

everything is ok in development mode,
when I run the project in production mode, RTL-plugin won't work at first render
and if I navigate to another page (in the client) styles will show without any problem

the problem is: server render in production mode:

here is _app.js file:

render() {
 const { Component, pageProps, store, lang } = this.props;
 const stylePlugins = [];

 if (APP_CONSTANTS.LANG[lang].direction === 'rtl') {
   stylePlugins.push(rtlPlugin);
 }

 return (
   <Provider store={store}>
      <ThemeProvider theme={theme}>
         <StyleSheetManager stylisPlugins={stylePlugins}>
            <Component {...pageProps} />
         </StyleSheetManager>
      </ThemeProvider>
   </Provider>
 );
}

sanishkr · 2020-07-12T08:11:31Z

Looks fine. A repo would be useful.

Or check this sandbox

Stewiey · 2020-11-01T11:29:07Z

any news on this bug ?
StyleSheetManager/stylisRTLPlugin doesn't seem to work at all with nextjs, i followed the guide in styled-components about how to implement in nextjs.

<StyleSheetManager stylisPlugins={[stylisRTLPlugin]}>

the css doesn't flip

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implementation in SSR (Next.js) #5

Implementation in SSR (Next.js) #5

sanishkr commented Feb 10, 2020

Migggz commented Mar 9, 2020

sanishkr commented Mar 10, 2020

oliviertassinari commented Apr 25, 2020

sanishkr commented Apr 30, 2020

barghi commented Jul 11, 2020

sanishkr commented Jul 11, 2020

barghi commented Jul 12, 2020 •

edited

Loading

sanishkr commented Jul 12, 2020

Stewiey commented Nov 1, 2020 •

edited

Loading

Implementation in SSR (Next.js) #5

Implementation in SSR (Next.js) #5

Comments

sanishkr commented Feb 10, 2020

Migggz commented Mar 9, 2020

sanishkr commented Mar 10, 2020

oliviertassinari commented Apr 25, 2020

sanishkr commented Apr 30, 2020

barghi commented Jul 11, 2020

sanishkr commented Jul 11, 2020

barghi commented Jul 12, 2020 • edited Loading

sanishkr commented Jul 12, 2020

Stewiey commented Nov 1, 2020 • edited Loading

barghi commented Jul 12, 2020 •

edited

Loading

Stewiey commented Nov 1, 2020 •

edited

Loading