Loose all style on refresh browser with next.js project?

[CreateWebGit]

I realy want react-jss to work in my next.js projects! I love how this framework works!

As suggestions I have create _document file, who looks like this:
`

import React from 'react';
import Document from 'next/document';
import { jss, SheetsRegistry, JssProvider, createGenerateId } from 'react-jss';
import globalPlugin from 'jss-plugin-global';

// eslint-disable-next-line import/no-default-export
export default class JssDocument extends Document {
	static async getInitialProps(ctx) {
		const registry = new SheetsRegistry();
		const generateId = createGenerateId();
		jss.use(globalPlugin());
		const originalRenderPage = ctx.renderPage;

		ctx.renderPage = () =>
			originalRenderPage({
				enhanceApp: App => props =>
					(
						<JssProvider registry={registry} generateId={generateId}>
							<App {...props} />
						</JssProvider>
					),
			});

		const initialProps = await Document.getInitialProps(ctx);

		return {
			...initialProps,
			styles: (
				<React.Fragment>
					{initialProps.styles}
					<style id="server-side-styles">{registry.toString()}</style>
				</React.Fragment>
			),
		};
	}
}

``` `

And my _app.js file looks like this:

`
```javascript
import React, { useEffect } from 'react';
import useStyles from '../css/app.js';

function MyApp({ Component, pageProps }) {
	const classes = useStyles();
	useEffect(() => {
		const style = document.getElementById('server-side-styles');

		if (style) {
			style.parentNode.removeChild(style);
		}
	}, []);
	return (
		<div className={classes.app}>
			<Component {...pageProps} />
		</div>
	);
}

export default MyApp;

``` `

Do I miss something else I need todo in the project to get it to work propely? Is there any ide why I loose style on refresh when I work with the project localy? Its not happen when I have upload everything to forexample Vercel?

Hope someone can help me!