How to apply styles to the HTML in Next.js at server side render?

Question

Visit Next.js and notice the page request in the network tab. Preview shows not just the HTML but completely pre-styled page.

When we use Styled-Components and Material-UI they have exposed ServerStyleSheet which is used for serving the required styles for the first render within the HTML.

import { ServerStyleSheet } from 'styled-components'
import { ServerStyleSheets } from '@material-ui/core/styles'

How can we achieve same output when using react-bootstrap or custom css like test.css?

score 1 · Answer 1 · answered Aug 15 '21 at 00:55

Do you care if its a test.css or React bootstrap - Instead why not just inline all critical stylesheets?

It might be worth trying out their experimental feature

Add experimental: { optimizeCss: true } to next.config.js

Install critters@0.0.7 as a dependency

Via How to inline CSS in the head tag of a NextJS project?

score 0 · Answer 2 · answered Aug 18 '21 at 12:35

Add your style file on the the _app file, you can create this file inside the pages directory in nextjs

import { AppProps } from "next/app";
import 'bootstrap/dist/css/bootstrap.min.css';
import "../your_style.css";

function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}


export default App;

for react-bootstrap , you need to add npm i react-bootstrap bootstrap

score 0 · Answer 3 · answered Aug 23 '21 at 12:50

Nextjs allows you to display SSG/SSR pages and javascript-disabled users will still be able to see your app but the layout will be messy if you use react-bootstrap components to build your layout.

To use react-bootstrap at SSR:

Install :
```
npm i react-bootstrap bootstrap
```

Import bootstrap styles in your _app.js:

import 'bootstrap/dist/css/bootstrap.min.css';

You can then use your react-bootstrap components as you would do in reactjs:

import {Container, Row, Col} from 'react-bootstrap';
        
const Layout = () => (
  <>
    <Container fluid>
      <Row>
        <Col>
          <p>Running on Next.js at SSR</p>
        </Col>
      </Row>
    </Container>
  </>
);
        
export default Layout;

score -1 · Answer 4 · answered Aug 17 '21 at 09:39

-1

use Tailwind css

https://tailwindcss.com/

We can simply use classes and it make everything super easy for you design

answered Aug 17 '21 at 09:39

Adarsh

29
2

3

Hey Adarsh! While Tailwind is a great and useful tool, it doesn't actually solve his question. They want to know how they can achieve that with `react-bootstrap` or other styles. – dsomel21 Aug 17 '21 at 16:09

How to apply styles to the HTML in Next.js at server side render?

4 Answers4