Skip to main content

NextJS

Similarly to the Create-React-App Integration, basic installation should be quite straight forward.

Basic Setup​

First, install the necessary packages as described in Getting Started, then import and use them within pages/index.tsx like so:

import type { NextPage } from "next";
import Head from "next/head";
import { Box } from "@neui/layout";
import { globalStyles } from "@neui/core";
import { yourTheme } from "your-package";

const Home: NextPage = () => {
  return (
    <div className={`${yourTheme}`}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <Box margin={{ base: 10, md: 30 }}>Box Text</Box>
      </main>
    </div>
  );
};

export default Home;

As always, make sure you're using defaultTheme and either defaultLightTheme or defaultDarkTheme somewhere above your first use of a NeUI component within the markup-tree to expose all the necessary CSS variables to your components.

Server-Side Rendering​

To implement stitches' zero-runtime styling, you need to render the static CSS somewhere into the pages' <head>-Tag.

To do this, add the file pages/_document.tsx with the following content:

import React from "react";
import NextDocument, { Html, Head, Main, NextScript } from "next/document";
import { getCssText } from "@neui/core";

export default class Document extends NextDocument {
  render() {
    return (
      <Html lang="en">
        <Head>
          <style
            id="stitches"
            dangerouslySetInnerHTML={{ __html: getCssText() }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Most of this is the basic boilerplate for a custom NextJS document template, including two parts that are custom for this.

First, we're importing getCssText() from @neui/styling, which gathers all CSS that's used within the application and returns it as a string and then we're statically rendering that text into the head.

Also check out stitches' guide on SSR for more information.