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 to the HTML, so you don't need a custom _document. Import the stylesheet once and set up the BolioUIProvider and CssBaseline in pages/_app.js:

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

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

export default MyApp

App Router

Import the stylesheet once in app/layout.js:

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

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

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

Custom Server

The stylesheet is a plain CSS file, not injected at render time, so a custom server needs nothing beyond serving @bolio-ui/core/styles.css (or letting your bundler include it) and rendering the app normally:

import React from 'react'
import ReactDOM from 'react-dom/server'
import App from './app'

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