Example with Next.js

Get started with an example

To begin, the most straightforward approach is to utilize one of the provided templates. These templates come pre-configured with the necessary settings, such as CssBaseline and other fundamental components.

If you're new to GitHub and need guidance on initiating a project using a template, you can access comprehensive instructions on how to get started on this example.

Server Render

All Components of @bolio-ui/core are compatible with Server Render. In fact, the page you see now is rendered by the server.

Server-side rendering (SSR) is the process of rendering web pages on a server and passing them to the browser (client-side), instead of rendering them in the browser. SSR sends a fully rendered page to the client; the client's JavaScript bundle takes over and enables the SPA framework to operate, the best option to use server side render in React.js is using Next.js.

If you are worried about losing the advantages of a Single Page Application by implementing server-side rendering, you can use the hybrid render application. Please read the post from the Next.js team to learn more.

Next.js

Bolio UI works with the Pages Router and with the App Router.

Pages Router

Next.js already adds the styles rendered on the server to the HTML, so you don't need a custom _document. Set up the BolioUIProvider and CssBaseline in pages/_app.js:

import { BolioUIProvider, CssBaseline } from '@bolio-ui/core'

function MyApp({ Component, pageProps }) {
  return (
    <BolioUIProvider>
      <CssBaseline />
      <Component {...pageProps} />
    </BolioUIProvider>
  )
}

export default MyApp

App Router

The App Router doesn't add the styles of styled-jsx to the HTML on its own. Wrap the app with StyledJsxRegistry in app/layout.js:

import { BolioUIProvider, CssBaseline } from '@bolio-ui/core'
import { StyledJsxRegistry } from '@bolio-ui/core/next'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <StyledJsxRegistry>
          <BolioUIProvider>
            <CssBaseline />
            {children}
          </BolioUIProvider>
        </StyledJsxRegistry>
      </body>
    </html>
  )
}

The components are Client Components, so you can use them in Server Components without adding 'use client'.

Custom Server

In a custom server, collect the styles with a styled-jsx registry, as shown below.

import React from 'react'
import ReactDOM from 'react-dom/server'
import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
import App from './app'

export default (req, res) => {
  const registry = createStyleRegistry()
  const app = ReactDOM.renderToString(
    <StyleRegistry registry={registry}>
      <App />
    </StyleRegistry>
  )
  const styles = registry.styles()
  const html = ReactDOM.renderToStaticMarkup(
    <html>
      <head>{styles}</head>
      <body>
        <div id="root" dangerouslySetInnerHTML={{ __html: app }} />
      </body>
    </html>
  )
  res.end('<!doctype html>' + html)
}