NextUI + Next.js

NextUI is totally compatible with Next.js you just need to customize the _app.jsx entry file to load the provider.

Start your Next.js project with this example.

Server Render

All Components of @nextui-org/react 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.

In addition, for server-side render and web applications, we strongly recommend that you read this famous post 7-principles-of-rich-web-applications from Guillermo Rauch.

Next.js

In Next.js framework, you need customization file _document.js, please refer to Next.js document here to create file _document.js.

Then we add the following code to the file:

import React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import { CssBaseline } from "@nextui-org/react";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return {
      ...initialProps,
      styles: React.Children.toArray([initialProps.styles]),
    };
  }

  render() {
    return (
      <Html lang="en">
        <Head>{CssBaseline.flush()}</Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Here's an example of what your _document.js file should look like: _document.jsx.

Custom Server

In the custom server, also get the style set from function CssBaseline.flush as shown below.

import React from "react";
import ReactDOM from "react-dom/server";
import { CssBaseline } from "@nextui-org/react";
import App from "./app";

export default (req, res) => {
  const app = ReactDOM.renderToString(<App />);
  const styles = CssBaseline.flush();
  const html = ReactDOM.renderToStaticMarkup(
    <html>
      <head>{styles}</head>
      <body>
        <div id="root" dangerouslySetInnerHTML={{ __html: app }} />
      </body>
    </html>
  );
  res.end("<!doctype html>" + html);
};
gradient blue backgroundgradient violet background