Add an example to next.js

[kof]

https://github.com/zeit/next.js/tree/master/examples

[jcheroske]

Is it currently possible to swap out styled-jsx for jss when using next.js? I was looking at vercel/styled-jsx#142 and didn't think that jss suffers from that kind of problem. Not being able to style component libraries without resorting to global classes seems like a major shortcoming.

[kof]

I am 99% sure you can use jss there, I haven't tried though. Please add an example over there as you go!

And yes, jss has jss-global plugin which is part of the jss-preset-default and allows to use global selectors and scoped global selectors.

[jcheroske]

Here is an issue and pull request to look at: vercel/next.js#1751 and vercel/next.js#1776

The situation is that next.js currently doesn't have any way to wrap all pages with additional components. I forked it and added the functionality myself in order to get SSR working. There are hacks available to get it working without the modification of renderPage, but they have no place in good documentation. I'm happy to create the example when the API changes.

I'm happy to look into fixing the SSR counter reset bug, since I currently have a working system that demonstrates it.

[jcheroske]

And for completeness, here's my comment, copied from #432:

I'm seeing this in next.js as well:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This 
generally means that you are using server rendering and the markup generated on the server was
not what the client was expecting. React injected new markup to compensate which works but you
have lost many of the benefits of server rendering. Instead, figure out why the markup being 
generated is different on the client or server:
 (client) <div class="paper-0-0" style="color:rgba
 (server) <div class="paper-0-2" style="color:rgba

When the next.js server first boots, the jss counter is at 0. If I hit my page everything works, and there is no React warning. If I refresh the browser, for some reason next.js reruns my component file, and re-injects the sheet, which increments the server-side jss counter (This only happens one time). But the browser got refreshed, so its counter is back to zero. Additionally, every time the dev server detects a file change it reruns all the components, and the counter gets incremented yet again.

I think you guys are right in thinking the the load order of React components is deterministic. What might not be though is the counter's starting point on the server. SSR is a weird beast. If you have five sheets, the counter will always increment five times in the same sheet order. But, where it always runs 0, 1, 2, 3, 4 on the client, it might run 13,14,15,16,17 on the server.

And, just to make sure I'm not missing something, is there a special format for the server-generated <style> tag? Meta info of some kind? Reading this thread, I didn't think so.

[kof]

Sure, I am happy to receive a pr.

[kof]

Can you show your JSS example written for next? Maybe something is done in a wrong way…

[jcheroske]

Very likely! So, as far as I know, to get SSR working I just have to create a new SheetsRegistry on every request, and then pass it in via the SheetsRegistryProvider. What I'm not doing is creating a new jss instance on every request. I didn't think that was necessary, but maybe it is. Here is my pages/_document.js:

import Document, { Head, Main, NextScript } from 'next/document'
import {SheetsRegistry, SheetsRegistryProvider} from 'react-jss'
import 'next-extras'

export default class EnhancedDocument extends Document {
  static async getInitialProps ({renderPage}) {
    const sheets = new SheetsRegistry()

    const decoratePage = Page => props => (
      <SheetsRegistryProvider registry={sheets}>
        <Page {...props} />
      </SheetsRegistryProvider>
    )

    const renderedPage = renderPage(decoratePage)
    const styles = (
      <style type='text/css' data-meta='jss-ssr'>
        {sheets.toString()}
      </style>
    )
    const props = {
      ...renderedPage,
      styles
    }
    return props
  }

  render () {
    return (
      <html>
        <Head>
          <link rel='preload stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

[kof]

Ok its all correct, we just need to reset counters on each request.

[jcheroske]

Looking at the code, I see the following:

• Classnames are generated, by default, by utils/generateClassName, which has a rule counter in module scope
• The particular classname generator is linked to a jss instance when jss/create is called. I haven't seen another way to override the generator after that point.
• During SSR, each request needs its own counter. Apparently the only way to do that would be to create a new jss instance and then pass it into react-jss/create, creating a new HOC for each request. This is complicated, since code just wants to import injectSheet from 'react-jss'.

Before I go further, I'd like to know if the above points are correct? I'd also like to know if it's possible to have the default jss instance use the old generator?

[kof]

We would need to bound the counter to some instance which is created on each request, I was thinking about SheetsRegistry, because it will be created for a new request every time.

[jcheroske]

@kof I've got this fixed locally now. It required mods to both jss and react-jss, but nothing severe. My goal was to maintain complete backwards compatibility, which meant I created an options object for SheetsRegistry, that, if omitted, keeps all the existing behavior. I'm putting the finishing touches on now and will push soon.